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
+14 -4
View File
@@ -10,7 +10,7 @@ use InvalidArgumentException;
* Inline SVGs from the package's own folders: Material Symbols and M3 Expressive shapes.
*
* Not blade-icons: its view-factory hook registers one Blade component per icon on every
* request, which for the ~8,000 symbol files here would be ~8,000 registrations each time.
* request, which for the ~16,500 symbol files here would be ~16,500 registrations each time.
* A file is read the first time it is drawn and kept for the life of the worker; the
* contents never change while the application runs, so nothing request-specific is held.
*/
@@ -19,13 +19,22 @@ class SvgFile
/** @var array<string, string> */
protected static array $contents = [];
public static function symbol(string $name, bool $filled, ComponentAttributeBag $attributes): HtmlString
/**
* One symbol, from the cut drawn for the optical size it will be seen at.
*
* The package ships Google's 24 and 20 cuts; the 20 one lives in a `-20` folder under the
* same names, so a symbol that exists exists in both. Any optical size but 20 draws the
* standard 24 cut, which is also what a caller who says nothing gets.
*/
public static function symbol(string $name, bool $filled, ComponentAttributeBag $attributes, int $optical = 24): HtmlString
{
if (preg_match('/^[a-z0-9_]+$/', $name) !== 1) {
throw new InvalidArgumentException("[{$name}] is not a Material Symbol name. Symbols are named in lowercase with underscores, as on fonts.google.com/icons: `calendar_month`, `arrow_back`.");
}
$path = static::directory('svg/symbols/'.($filled ? 'filled' : 'outlined'))."/{$name}.svg";
$folder = ($filled ? 'filled' : 'outlined').($optical === 20 ? '-20' : '');
$path = static::directory('svg/symbols/'.$folder)."/{$name}.svg";
if (! is_file($path)) {
throw new InvalidArgumentException("There is no Material Symbol named [{$name}].");
@@ -54,7 +63,8 @@ class SvgFile
}
/**
* The names of every Material Symbol the package ships.
* The names of every Material Symbol the package ships, in either cut: Google draws the
* same catalogue at optical size 24 and at 20, so one folder answers for all four.
*
* @return list<string>
*/