Files
livewire-material/resources/views/components/icon.blade.php
T
Andreas Reinhold / reiniandClaude Opus 5 b48e879254
tests / lint (push) Successful in 1m0s
tests / feature (8.4) (push) Successful in 1m0s
tests / feature (8.5) (push) Successful in 1m1s
tests / browser (safari, webkit) (push) Successful in 1m59s
tests / browser (chrome, chromium) (push) Successful in 1m49s
tests / browser (firefox, firefox) (push) Successful in 1m54s
Add the Material 3 Expressive foundation
Colour, shape, type, elevation and motion as tokens and Tailwind
utilities; `php artisan material:scheme`, which generates an app's colour
roles with Google's material-color-utilities (spec 2025); the theme head
script with light, dark and system and its Alpine store; Google Sans Flex;
every Material Symbol (4,135, outlined and filled) drawn by <x-icon>
without blade-icons; all 35 M3 Expressive shapes, ported from androidx, as
<x-shape>; the x-figure directive; the Toasts concern; DesignGuard for
applications' tests; and a showcase with every token, both themes side by
side and an icon search.

Colour utilities are `@theme inline`, so a section with its own
data-theme repaints; without it they resolve once on :root.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
2026-09-13 05:24:11 +02:00

35 lines
1.3 KiB
PHP

{{-- A Material Symbol (Rounded, weight 400, grade 0, optical size 24), 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.
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,
])
@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) }}