html/project-icons

Why

This project builds its icons into CSS classes ({{icon-classes.tool|an icon build step}}), so one cached file serves every icon and they share size and colour rules. An <img src="…/icons/x.svg"> bypasses that build: another request per icon, an icon that does not follow the text colour, and a second way to do the same thing. The rule runs only in projects where such a build was detected.

Fix

Use the generated class: <i class="icon-<name>" aria-hidden="true"></i> and give the control a text label (visible, or aria-label on the button). A new icon is added as an SVG in the icon source folder and the build is run again.

Examples

<!-- bad -->
<button type="button"><img src="/assets/icons/close.svg" alt="Close"></button>
<!-- good -->
<button type="button" aria-label="Close"><i class="icon-close" aria-hidden="true"></i></button>

Sources

• MDN, aria-hidden
• WCAG 2.2, Understanding SC 1.1.1 Non-text Content

Read it in the terminal

npx github:dawidolko/frontend-skills explain html/project-icons