html/icon-from-set

Dlaczego

An icon set that the build generates from one folder of SVG files (a sprite, icon classes or an icon component) keeps every icon the same size, colour (currentColor) and accessible pattern, and picks up a changed or added SVG on the next build. A hand-written <img src="/icons/close.svg"> next to it bypasses all of that: it cannot take the text colour, loads one request per icon, breaks when the folder, the base path or the hashed sprite name changes, and is easy to leave without the right alt.

Poprawka

Use the project's own set (the icon-sprite helper in .frontend-skills/profile.json, or the component or classes the file already uses): its component (<Icon name="close" />, <SvgIcon name="close" />, <mat-icon svgIcon="close">, <Icon name="close" /> from astro-icon), its classes (<i class="icon icon-close" aria-hidden="true"></i>), or a <use href="#icon-close"> of the generated sprite. Add a new icon by dropping its SVG into the source folder (for example src/icons/) and rebuilding; never copy it into public/ and link it. Decorative icons get aria-hidden="true"; an icon-only button gets an accessible name on the button.

Projects whose profile records the icon-classes helper are covered by html/project-icons instead.

Przykłady

<!-- bad -->
<button type="button" aria-label="Close"><img src="/icons/close.svg" alt=""></button>
<!-- good -->
<button type="button" aria-label="Close"><Icon name="close" /></button>

Źródła

• MDN, the SVG use element (referencing a symbol)
• MDN, the SVG symbol element
• vite-plugin-svg-icons, README (sprite from a folder of SVG files)
• unplugin-icons, README (custom collections from a folder)
• Angular Material, Icon (registering SVG icons)

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain html/icon-from-set