noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show both symbol cuts in the showcase icon search

Browse Source 
The search draws its 4,135 symbols as CSS masks through the symbol route, so
the route learned `?optical=20` — the 24 cut otherwise, as on <x-icon> — and
the section got a checkbox that switches the cut and draws the grid at 20px,
where the difference in stroke weight is the point.

Plan step 10; finding C16.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 04:04:42 +02:00
co-authored by Claude Fable 5.1
parent 699827d696
commit 1134dbac0b
3 changed files with 35 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/sections/icons.blade.php
+12 -3
View File
@@ -5,6 +5,7 @@
names: [],
query: '',
filled: false,
optical20: false,
async load() {
this.names = await (await fetch('{{ route('livewire-material.symbols', [], false) }}')).json();
},
@@ -19,7 +20,9 @@
<h2 class="type-headline-md">Icons</h2>
<p class="max-w-3xl type-body-md text-on-surface-variant">
Every Material Symbol (Rounded, 400, grade 0, 24px) as <code>&lt;x-icon name="…" /&gt;</code>, outlined or <code>filled</code>.
Every Material Symbol (Rounded, 400, grade 0) as <code>&lt;x-icon name="…" /&gt;</code>, outlined or <code>filled</code>,
drawn from the optical size 24 cut or — for an icon 20px or smaller, where 24's strokes would look thin —
the 20 cut: <code>&lt;x-icon name="…" optical="20" class="size-5" /&gt;</code>.
</p>
<div class="flex flex-wrap items-center gap-4">
@@ -32,15 +35,21 @@
<input type="checkbox" x-model="filled" class="size-4 accent-primary" />
Filled
</label>
<label class="flex items-center gap-2 type-label-lg">
<input type="checkbox" x-model="optical20" class="size-4 accent-primary" />
Optical size 20
</label>
</div>
<ul class="grid grid-cols-[repeat(auto-fill,minmax(7.5rem,1fr))] gap-2">
<template x-for="name in matches" x-bind:key="name">
<li class="flex flex-col items-center gap-2 rounded-corner-md bg-surface-container p-3 text-center">
<span
class="size-6 bg-current"
class="bg-current"
x-bind:class="optical20 ? 'size-5' : 'size-6'"
x-bind:style="{
mask: `url('{{ rtrim(route('livewire-material.showcase', [], false), '/') }}/symbols/${filled ? 'filled' : 'outlined'}/${name}.svg') center / contain no-repeat`,
mask: `url('{{ rtrim(route('livewire-material.showcase', [], false), '/') }}/symbols/${filled ? 'filled' : 'outlined'}/${name}.svg${optical20 ? '?optical=20' : ''}') center / contain no-repeat`,
}"
></span>
<code class="w-full break-all type-label-sm text-on-surface-variant" x-text="name"></code>