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).
Use currentColor for reusable icon fills/strokes
Define reusable SVG icons with fill/stroke="currentColor" so color is inherited from CSS, instead of baking in a hardcoded hex value.
Bad example
| 1 | <symbol id="logout" viewBox="0 0 20 20" stroke="#CA2B3D"> |
| 2 | <path d="M6.25 10H19.4" /> |
| 3 | </symbol> |
Explanation (EN)
The stroke color is hardcoded into the asset, so the same icon can never adapt to a different context (hover, dark mode, a second brand color) without editing the SVG or maintaining a duplicate.
Objašnjenje (HR)
Boja linije je čvrsto upisana u sam asset, pa se ista ikona nikad ne može prilagoditi drugom kontekstu (hover, tamni način rada, druga brend boja) bez uređivanja SVG-a ili održavanja duplikata.
Good example
| 1 | <symbol id="logout" viewBox="0 0 20 20" stroke="currentColor"> |
| 2 | <path d="M6.25 10H19.4" /> |
| 3 | </symbol> |
| 4 |
|
| 5 | /* consumer controls the color via CSS */ |
| 6 | .icon-danger { color: #CA2B3D; } |
Explanation (EN)
With currentColor the icon inherits whatever color the surrounding element sets, so one asset serves every context and theming lives in CSS where it belongs.
Objašnjenje (HR)
Uz currentColor ikona nasljeđuje boju koju postavi okolni element, pa jedan asset pokriva svaki kontekst, a tematiziranje živi u CSS-u gdje i pripada.
Notes (EN)
If you keep hardcoded colors temporarily to avoid touching styling in the same PR, treat that as a known follow-up rather than the end state.
Bilješke (HR)
Ako privremeno zadržiš čvrsto upisane boje da u istom PR-u ne diraš stilove, tretiraj to kao poznati naknadni zadatak, a ne kao konačno stanje.