Optimizing Icons on Mana
homu
How to generave SVG icons on Mana
SVG icons sit in this weird liminal space between code and image assets. In an ideal world, SVGs should be served to the browser like any other image, but most icon libraries like `lucide-icons` serve SVG as code with the javascript bundle.
This creates several problems:
- Higher memory and bandwidth footprint.
- Icons are not efficiency cached by the browser.
- Large dependencies increase HMR rebuild time in development.
It takes a bit more work to apply SVG Best Practices, but it cuts our rebuild time by half-second - well worth the DX win and maintain your flow state!
Adding New Icons
Run `yarn generate:icons` to start the CLI for importing icons from lucide.dev. The CLI would automatically import the SVG files and add them to the Icon component type.