Icons, Fonts & Assets

When to use this skill

• •Adding icons (SVG, Lucide, FontAwesome).
• •Loading custom fonts (Google Fonts, local WOFF2).
• •Optimizing images.

1. Icons

• •SVG: Prefer inline SVGs or Sprites over font icons for accessibility and performance.
• •React: Use libraries like lucide-react or heroicons that treeshake well.
• •Attributes: Always set aria-hidden="true" for decorative icons, or providing decent aria-label.

2. Fonts

• •Format: Use WOFF2 for local fonts.
• •Loading: Use font-display: swap; in CSS to show fallback text immediately.
• •Next.js: Use next/font to optimize Google Fonts and eliminate layout shift (CLS).

3. Images

• •Formats: Prefer WebP or AVIF over PNG/JPEG.
• •Sizing: Always specify width and height attributes (or aspect ratio) to prevent layout shifts.
• •Lazy Loading: Use loading="lazy" for below-the-fold images.