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: react
reactsvgassetsperformance
Choose SVG components for semantic or stateful icons
Choose SVG components for semantic or stateful icons; CSS backgrounds remain valid for decorative assets.
PR: hegnar-forum-web · org-mining-hist-2026-06Created: Jun 20, 2026
Bad example
Old codescss
| 1 | .label::after { |
| 2 | content: ''; |
| 3 | background-image: url('data:image/svg+xml;...'); |
| 4 | } |
Explanation (EN)
A data URL can make an interactive or semantic icon difficult to label and style.
Objašnjenje (HR)
Good example
New codetsx
| 1 | <span className="label"> |
| 2 | {text} |
| 3 | <Icon /> |
| 4 | </span> |
Explanation (EN)
Objašnjenje (HR)
Notes (EN)
Use an inline SVG component when the icon needs component-controlled state, accessible semantics or styling of internal paths; reuse the project asset pipeline.
Exceptions / Tradeoffs (EN)
Decorative or repeated background images can be appropriate and cacheable. A React component does not automatically optimize an SVG; consider markup and asset cost.