Rules Hub
Code Ruleset
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP2stack specificStack: css
csssvgstylingmaintainability
Control SVG size and color via CSS, not inline in the asset
Style width, height, and color of inline SVGs through CSS classes rather than editing attributes in the SVG file.
PR: hegnar-web · org-mining-hist-2026-06Created: Jun 19, 2026
Bad example
Old codehtml
| 1 | <svg width="24" height="24" fill="#fff"><path d="..." /></svg> |
Explanation (EN)
Hardcoded inline paint can prevent the intended component theme from controlling an icon.
Objašnjenje (HR)
Good example
New codehtml
| 1 | <svg class="c-icon"><path d="..." /></svg> |
| 2 | /* CSS */ |
| 3 | .c-icon { width: 24px; height: 24px; fill: var(--icon-color); } |
Explanation (EN)
Objašnjenje (HR)
Notes (EN)
For inline SVGs intended to inherit theme or component sizing, use the existing class/currentColor contract and preserve viewBox geometry.
Exceptions / Tradeoffs (EN)
Intrinsic width/height attributes can reserve layout space and remain useful. External img SVGs do not expose their inner paths to page CSS, and multicolor artwork should retain intentional fills.