noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Draw the 67 Material Symbols Google ships without a viewBox at every size

Browse Source 
Google publishes 67 symbols per cut (auto_awesome, insights,
tips_and_updates, battery_50 ...) with width and height but no viewBox,
their paths in 24 units, or 20 in the 20 cut, where every other symbol
draws in `0 -960 960 960`. bin/fetch-symbols dropped the size so CSS
decides it, which left these with no coordinate system: `<x-icon>`
drew them at 1:1, whole only at exactly 24px and cut off or misplaced
at any other size, the 20 cut every small button uses included.
normalise() now turns a file's width and height into its viewBox when
it has none, before dropping them. The 268 files are regenerated from
Google's originals at the recorded SOURCE commit with the fixed step
(each shipped file matched the old step's output first; the other
16,272 do not change), and every path lies inside its new viewBox.
IconTest checks that each shipped symbol has a viewBox and that
`<x-icon name="auto_awesome">` renders in 20 units at size 16 and in 24
at size 32; both fail without the change.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-09-17 04:18:10 +02:00
co-authored by Claude Opus 5
parent b7e16476cd
commit 7a95449c82
271 changed files with 296 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/IconTest.php
+17 -1
View File
@@ -5,7 +5,7 @@ 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.
* another, since nearly every file opens with the same `<svg>` and viewBox.
*/
function symbolGeometry(string $file): string
{
@@ -39,6 +39,22 @@ it('ignores a size that is not a whole number of pixels in range', function () {
}
});
it('gives every symbol it ships a viewBox, so each is drawn whole at any size', function () {
foreach (['outlined', 'filled', 'outlined-20', 'filled-20'] as $folder) {
$files = glob(__DIR__."/../../../resources/svg/symbols/{$folder}/*.svg") ?: [];
$withoutViewBox = array_filter($files, fn (string $file): bool => ! str_contains((string) file_get_contents($file), ' viewBox="'));
expect($files)->not->toBeEmpty()
->and(array_values(array_map(basename(...), $withoutViewBox)))->toBe([]);
}
});
it('draws a symbol Google drew in 24 or 20 units in its own units, not only at that size', function () {
// One of the symbols Google publishes with a width and height but no 960-unit viewBox.
expect((string) $this->blade('<x-icon name="auto_awesome" size="16" />'))->toContain('viewBox="0 0 20 20"')
->and((string) $this->blade('<x-icon name="auto_awesome" size="32" filled />'))->toContain('viewBox="0 0 24 24"');
});
it('takes the 20 cut for a size of 20 or less, unless optical says otherwise', function () {
expect((string) $this->blade('<x-icon name="home" size="20" />'))->toContain(symbolGeometry('outlined-20/home'))
->and((string) $this->blade('<x-icon name="home" size="18" />'))->toContain(symbolGeometry('outlined-20/home'))