Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Size SVG icons with width/height attributes matching the viewBox
Use intrinsic width/height attributes for icon dimensions (verifiable against the viewBox) rather than mapping sizes onto a CSS/utility spacing scale.
Bad example
| 1 | // viewBox is "0 0 16 16" but the size is expressed via a spacing scale |
| 2 | <svg className="h-8 w-8" viewBox="0 0 16 16"> |
| 3 | <use href={`${sprite}#search`} /> |
| 4 | </svg> |
Explanation (EN)
The rendered size comes from a utility spacing scale (h-8/w-8) that has no obvious relationship to the icon's coordinate system. You cannot tell whether the icon is being scaled or distorted without resolving what the spacing token means in pixels and comparing it to the viewBox.
Objašnjenje (HR)
Prikazana veličina dolazi iz utility skale razmaka (h-8/w-8) koja nema očitu vezu s koordinatnim sustavom ikone. Ne možeš znati skalira li se ikona ili izobličuje dok ne razriješiš koliko piksela token razmaka predstavlja i usporediš to s viewBoxom.
Good example
| 1 | // dimensions match the viewBox and are immediately verifiable |
| 2 | <svg width="16" height="16" viewBox="0 0 16 16"> |
| 3 | <use href={`${sprite}#search`} /> |
| 4 | </svg> |
Explanation (EN)
Explicit width/height attributes match the viewBox, so anyone reading the code can confirm the icon renders at its native aspect ratio. Intent is expressed in the same unit as the icon's own coordinate space.
Objašnjenje (HR)
Eksplicitni width/height atributi odgovaraju viewBoxu, pa svatko tko čita kod može potvrditi da se ikona prikazuje u svom prirodnom omjeru. Namjera je izražena u istoj jedinici kao i vlastiti koordinatni prostor ikone.
Notes (EN)
Symbols inside a shared sprite should NOT define width/height themselves; the consumer sets the size at the <svg>/<use> usage site so the same symbol can be reused at different sizes.
Bilješke (HR)
Symboli unutar dijeljenog spritea ne bi smjeli sami definirati width/height; potrošač postavlja veličinu na mjestu uporabe (<svg>/<use>) kako bi se isti symbol mogao ponovno koristiti u različitim veličinama.
Exceptions / Tradeoffs (EN)
If a design system deliberately standardizes all icons to a single token size and never needs viewBox-accurate scaling, a utility class may be acceptable — but be explicit about that decision.
Iznimke / Tradeoffi (HR)
Ako dizajn sustav namjerno standardizira sve ikone na jednu veličinu tokena i nikad ne treba skaliranje točno prema viewBoxu, utility klasa može biti prihvatljiva — ali budi eksplicitan oko te odluke.