Let <x-icon> pick the optical size 20 cut

M3's optical size axis redraws a symbol so its strokes look equally heavy at
every size; drawing the 24 cut at 20px thins them by about a sixth (styles.md
§ Icons). `optical` picks the cut — 24 by default, 20 for an icon drawn at 20px
or smaller — and combines with `filled`; anything else falls back to 24, so no
caller can land on a folder that does not exist. SvgFile::symbol() takes the
size as a fourth argument and resolves the `-20` folders; the catalogue is the
same in both cuts, so symbolNames() and DesignGuard's icon-name check are
unchanged. The callers that size their own icons pass it in a later step.

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:32 +02:00
co-authored by Claude Fable 5.1
parent c22d693334
commit 699827d696
4 changed files with 89 additions and 15 deletions
+11 -2
View File
@@ -1,9 +1,17 @@
{{-- A Material Symbol (Rounded, weight 400, grade 0, optical size 24), inline.
{{-- A Material Symbol (Rounded, weight 400, grade 0), inline.
`name` is Google's name for it, underscores and all (`arrow_back`), as listed on
fonts.google.com/icons; every symbol Google publishes is available, and an unknown name
throws. `filled` draws the filled state, which in M3 means active or selected.
`optical` is the cut the glyph is drawn from, `24` (the default) or `20`; anything else
falls back to 24, and `filled` combines with either. M3's optical size axis redraws a
symbol so its strokes look equally heavy at every size, which means an icon drawn at
20px or smaller uses the 20 cut: scaling the 24 cut down to 20px instead makes its
strokes about a sixth too thin (docs/reference/m3/styles.md § Icons). The cut and the
size are separate decisions, so a caller that draws `size-5` passes `optical="20"`
with it; the components that size their own icons do that for you.
Decorative by default and hidden from screen readers, because nearly every icon sits
beside words that already say what it means. Pass `label` when the icon alone carries
the meaning.
@@ -16,6 +24,7 @@
'name',
'filled' => false,
'label' => null,
'optical' => 24,
])
@php
@@ -31,4 +40,4 @@
]));
@endphp
{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::symbol($name, (bool) $filled, $attributes) }}
{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::symbol($name, (bool) $filled, $attributes, (int) $optical) }}