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 native SVG/HTML attribute syntax in raw asset files, not JSX names
Raw .svg/.html files must use real SVG/HTML attribute names (kebab-case, e.g. stroke-width, stroke-linecap), not JSX camelCase that only the React compiler understands.
Bad example
| 1 | <!-- sprite.svg: copied straight out of JSX --> |
| 2 | <symbol id="logout" viewBox="0 0 20 20"> |
| 3 | <path d="M6 10h13" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" /> |
| 4 | </symbol> |
Explanation (EN)
strokeWidth / strokeLinecap are JSX prop names that React translates to real SVG attributes at compile time. In a plain .svg file there is no such translation, so these attributes are simply ignored and the icon renders wrong.
Objašnjenje (HR)
strokeWidth / strokeLinecap su nazivi JSX propsa koje React pri kompajliranju prevodi u prave SVG atribute. U običnoj .svg datoteci tog prijevoda nema, pa se ti atributi jednostavno ignoriraju i ikona se prikaže pogrešno.
Good example
| 1 | <!-- sprite.svg: native SVG attribute names --> |
| 2 | <symbol id="logout" viewBox="0 0 20 20"> |
| 3 | <path d="M6 10h13" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" /> |
| 4 | </symbol> |
Explanation (EN)
Kebab-case attribute names are the real SVG spelling, so the renderer applies them and the icon looks as intended outside of React.
Objašnjenje (HR)
Nazivi atributa u kebab-case obliku su pravi SVG zapis, pa ih renderer primjenjuje i ikona izgleda kako je zamišljeno izvan Reacta.
Notes (EN)
These mistakes recur when copy-pasting JSX into assets; a small custom lint/CI check for known JSX-only attribute names (strokeWidth, className, htmlFor, etc.) in raw .svg/.html catches them early.
Bilješke (HR)
Ove greške se ponavljaju pri kopiranju JSX-a u assete; mala vlastita lint/CI provjera za poznate isključivo-JSX nazive atributa (strokeWidth, className, htmlFor itd.) u sirovim .svg/.html datotekama hvata ih rano.