- Simple: add svg images, get out an optimized svg spritesheet with an Icon component to surface these to your app.
- Separate: icons are a separate concern with regards to frontend development. By having a dedicated library for icons, you can optimize and reach for the right tools.
- Visual: too much of this is done without visual feedback. Every icon should be validated down to the pixel.
- Optimized: good icons should be fast and optimized for the web. takes many images, and makes it into one svg sprite that is delivered to the browser; and can be reused throughout the dom with minimal performance.
! this list is incomplete
- sizes should be consistent
- same viewport size
- fill='currentColor'
- fill vs stroke
- typescript/ide autocomplete
- svgs should be reused, not duplicated in the dom
- svgs should be optimized for web
- some sort of visual feedback automatically generated
- should be accessible
- no need to import SVG components in React (might even go so far as to say its a bad practice in general...)
- no need for reusing SVG icons in CSS. they can simply be Icon components targeted with normal CSS, or find an alternative styling.
- ! Icons are NOT illustrations. targetting direct svg contents/children elements is not a requirement and should have a different workflow.
- use Vite for modern features (TS, speed, etc.)
- rollup plugins are very simple, and api compatible with vite
- get list of svgs
- validate that each one of them following some rules (ie. has a viewBox, etc.)
- optimize each svg with svgo
- take all svgs and combine into a single spritesheet
- take all svgs and generate an Icon component (React) that autogens an enum of all icon names