Andreas Reinhold / reiniandClaude Fable 5.1
699827d696
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
44 lines
1.9 KiB
PHP
44 lines
1.9 KiB
PHP
{{-- 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.
|
|
|
|
24px unless the caller sizes it. The default is added only when no size class is passed,
|
|
rather than merged under one: `size-6 size-4` compiles to whichever Tailwind emits last,
|
|
not to the one the caller wrote. --}}
|
|
|
|
@props([
|
|
'name',
|
|
'filled' => false,
|
|
'label' => null,
|
|
'optical' => 24,
|
|
])
|
|
|
|
@php
|
|
$sized = preg_match('/(^|\s)(size|w|h)-/', (string) $attributes->get('class')) === 1;
|
|
|
|
$attributes = $attributes
|
|
->class(['shrink-0', 'size-6' => ! $sized])
|
|
->merge(array_filter([
|
|
'aria-hidden' => $label === null ? 'true' : null,
|
|
'aria-label' => $label,
|
|
'role' => $label === null ? null : 'img',
|
|
'focusable' => 'false',
|
|
]));
|
|
@endphp
|
|
|
|
{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::symbol($name, (bool) $filled, $attributes, (int) $optical) }}
|