html/icon-from-set

Why

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.

Fix

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.

Examples

<!-- 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>

Sources

• 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)

Read it in the terminal

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