Andreas Reinhold / reiniandClaude Opus 5
13b975358f
Plan step 38 review: the Colour section dropped its "Ink and lines" group with the retired Tailwind ink names and put nothing in its place, so no page showed the md-ink-* classes that replaced them or how to draw a line. A new "Ink and lines" example writes md-ink, md-ink-variant and md-ink-quiet with their roles, the state inks, and a line as <x-divider> and an edge as <x-surface outlined>. Doc comments teach too: the Icons intro showed optical="20" alone for a 20px icon, where <x-icon size="20"> picks the cut itself; icon's header still spoke of a caller's size-5 class, the navigation rail's usage wrapped it in flex/min-w-0 utilities, and the menu item's icon-class example named a Tailwind-style text- class. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
58 lines
2.7 KiB
PHP
58 lines
2.7 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). `size` makes that
|
|
choice for you; `optical` is for an icon sized some other way, by the caller's own CSS.
|
|
|
|
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.
|
|
|
|
`size` is the drawn size in px (`16`, `18`, `20`, `24`, `32`, `40`, `48` …, any whole number
|
|
from 8 to 256; 24 when left out), written as `--md-icon-size` and drawn by
|
|
resources/css/components/icon.css. An icon given a size of 20 or less takes the 20 cut
|
|
unless `optical` says otherwise, which is M3's rule. A caller's unlayered class or `style`
|
|
setting a width and height still outranks the package's layer.
|
|
|
|
`mirror-rtl` flips a directional symbol (an arrow, a chevron) in a right-to-left document,
|
|
as M3's bidirectionality rules ask; symbols that mean the same in both directions do not
|
|
take it. --}}
|
|
|
|
@props([
|
|
'name',
|
|
'filled' => false,
|
|
'label' => null,
|
|
'optical' => null,
|
|
'size' => null,
|
|
'mirrorRtl' => false,
|
|
])
|
|
|
|
@php
|
|
$size = filter_var($size, FILTER_VALIDATE_INT, ['options' => ['min_range' => 8, 'max_range' => 256]]) ?: null;
|
|
$optical = match (true) {
|
|
in_array((string) $optical, ['20', '24'], true) => (int) $optical,
|
|
$size !== null && $size <= 20 => 20,
|
|
default => 24,
|
|
};
|
|
|
|
$attributes = $attributes
|
|
->merge(array_filter([
|
|
'data-md-icon' => true,
|
|
'data-md-mirror-rtl' => $mirrorRtl ? true : null,
|
|
'style' => $size !== null ? "--md-icon-size: {$size}px" : null,
|
|
'aria-hidden' => $label === null ? 'true' : null,
|
|
'aria-label' => $label,
|
|
'role' => $label === null ? null : 'img',
|
|
'focusable' => 'false',
|
|
], fn ($value): bool => $value !== null));
|
|
@endphp
|
|
|
|
{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::symbol($name, (bool) $filled, $attributes, $optical) }}
|