The Death of Icon Fonts Component Based SVG Icon Systems
summary
Argues icon fonts fail in weird ways — real-world emoji overrides and browser extensions plus Opera Mini and font-blockers break icons — so replace them with SVG component systems. Shows a working webpack pipeline using svgo + custom webpack loader (Cheerio) that inlines optimized SVGs, lets React/Angular import by slug, loads only needed icons, supports multicolor and CSS animation, and uses aria-hidden for decorative icons while allowing accessible labels when needed.
AI-written summary · about
chapters (14)
- 0:00Introduction and audience poll
- 1:55What are icon fonts
- 4:30Problems with icon fonts
- 9:40Proxy browsers and extensions
- 10:22Getting SVG files ready
- 13:36SVG sprite best practices
- 15:03Why SVG is better than icon fonts
- 17:55Styling and animating SVGs
- 21:33Accessibility with SVGs
- 23:42Basic SVG components in React/Angular
- 25:11Webpack loader setup for SVGs
- 29:12Demo of dynamic icon component
- 31:22Summary and final thoughts
- 33:41Q&A session
