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

tests/Feature/Components/IconTest.php

@@ -3,6 +3,17 @@
 use Illuminate\View\ViewException;
 use NoNameWeb\LivewireMaterial\Support\SvgFile;
 
+/**
+ * What a symbol file draws, from its first shape on: the part that tells one cut from
+ * another, since every file opens with the same `<svg>` and viewBox.
+ */
+function symbolGeometry(string $file): string
+{
+    $svg = trim((string) file_get_contents(__DIR__.'/../../../resources/svg/symbols/'.$file.'.svg'));
+
+    return substr($svg, (int) strpos($svg, '><') + 1);
+}
+
 it('draws a symbol inline, hidden from screen readers, 24px by default', function () {
     $this->blade('<x-icon name="calendar_month" />')
         ->assertSee('class="shrink-0 size-6"', false)
@@ -32,6 +43,34 @@ it('draws the filled symbol when asked', function () {
         ->and($filled)->toContain('<path d=');
 });
 
+it('draws the optical size 20 cut when the caller asks for it', function () {
+    $standard = (string) $this->blade('<x-icon name="home" class="size-5" />');
+    $dense = (string) $this->blade('<x-icon name="home" class="size-5" optical="20" />');
+
+    expect($dense)->not->toBe($standard)
+        ->and($dense)->toContain('class="shrink-0 size-5"')
+        ->and($dense)->toContain('fill="currentColor"')
+        ->and($dense)->toContain(symbolGeometry('outlined-20/home'));
+});
+
+it('combines the filled state with the 20 cut', function () {
+    $outlined = (string) $this->blade('<x-icon name="favorite" optical="20" />');
+    $filled = (string) $this->blade('<x-icon name="favorite" optical="20" filled />');
+
+    expect($filled)->not->toBe($outlined)
+        ->and($outlined)->toContain(symbolGeometry('outlined-20/favorite'))
+        ->and($filled)->toContain(symbolGeometry('filled-20/favorite'))
+        ->and($filled)->not->toContain(symbolGeometry('filled/favorite'));
+});
+
+it('falls back to the 24 cut for an optical size it does not ship', function () {
+    $standard = (string) $this->blade('<x-icon name="home" />');
+
+    expect((string) $this->blade('<x-icon name="home" optical="40" />'))->toBe($standard)
+        ->and((string) $this->blade('<x-icon name="home" optical="24" />'))->toBe($standard)
+        ->and((string) $this->blade('<x-icon name="home" optical="" />'))->toBe($standard);
+});
+
 it('refuses a name that is not a symbol', function () {
     expect(fn () => $this->blade('<x-icon name="not_a_symbol_at_all" />'))
         ->toThrow(ViewException::class, 'There is no Material Symbol named [not_a_symbol_at_all].');
@@ -42,16 +81,29 @@ it('points a Heroicon name at the symbol catalogue', function () {
         ->toThrow(ViewException::class, 'is not a Material Symbol name');
 });
 
-it('ships every symbol outlined and filled, painted in the text colour', function () {
+it('ships every symbol outlined and filled in both cuts, painted in the text colour', function () {
     $symbols = SvgFile::symbolNames();
-    $filled = array_map(fn (string $file): string => basename($file, '.svg'), glob(__DIR__.'/../../../resources/svg/symbols/filled/*.svg'));
 
-    expect(count($symbols))->toBeGreaterThan(4000)
-        ->and($filled)->toEqual($symbols);
+    expect(count($symbols))->toBeGreaterThan(4000);
 
+    foreach (['filled', 'outlined-20', 'filled-20'] as $folder) {
+        $names = array_map(fn (string $file): string => basename($file, '.svg'), glob(__DIR__."/../../../resources/svg/symbols/{$folder}/*.svg"));
+
+        expect($names)->toEqual($symbols, "{$folder} holds a different catalogue than outlined");
+    }
+
+    foreach (['outlined', 'filled', 'outlined-20', 'filled-20'] as $folder) {
+        foreach (['home', 'search', 'cloud_upload', 'content_copy', 'delete'] as $name) {
+            expect(file_get_contents(__DIR__."/../../../resources/svg/symbols/{$folder}/{$name}.svg"))
+                ->toStartWith('<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path')
+                ->not->toContain('width=');
+        }
+    }
+});
+
+it('draws the two cuts from different geometry, not the same file scaled', function () {
     foreach (['home', 'search', 'cloud_upload', 'content_copy', 'delete'] as $name) {
-        expect(file_get_contents(__DIR__."/../../../resources/svg/symbols/outlined/{$name}.svg"))
-            ->toStartWith('<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path')
-            ->not->toContain('width=');
+        expect(symbolGeometry("outlined-20/{$name}"))->not->toBe(symbolGeometry("outlined/{$name}"))
+            ->and(symbolGeometry("filled-20/{$name}"))->not->toBe(symbolGeometry("filled/{$name}"));
     }
 });