noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions 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
resources/svg/symbols/outlined/error_circle_rounded.svg
+1 -1
View File
@@ -1 +1 @@
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 13q.425 0 .713-.288Q13 12.425 13 12V7.975q0-.425-.287-.7Q12.425 7 12 7t-.712.287Q11 7.575 11 8v4.025q0 .425.288.7.287.275.712.275Zm0 4q.425 0 .713-.288Q13 16.425 13 16t-.287-.713Q12.425 15 12 15t-.712.287Q11 15.575 11 16t.288.712Q11.575 17 12 17Zm0 5q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-10Zm0 8q3.325 0 5.663-2.337Q20 15.325 20 12t-2.337-5.663Q15.325 4 12 4T6.338 6.337Q4 8.675 4 12t2.338 5.663Q8.675 20 12 20Z"/></svg>
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 13q.425 0 .713-.288Q13 12.425 13 12V7.975q0-.425-.287-.7Q12.425 7 12 7t-.712.287Q11 7.575 11 8v4.025q0 .425.288.7.287.275.712.275Zm0 4q.425 0 .713-.288Q13 16.425 13 16t-.287-.713Q12.425 15 12 15t-.712.287Q11 15.575 11 16t.288.712Q11.575 17 12 17Zm0 5q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-10Zm0 8q3.325 0 5.663-2.337Q20 15.325 20 12t-2.337-5.663Q15.325 4 12 4T6.338 6.337Q4 8.675 4 12t2.338 5.663Q8.675 20 12 20Z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 742 B

After

Width:  |  Height:  |  Size: 762 B