Follow

Optimizing Icons on Mana

homu
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.

message-circleStart a discussion
Loginto leave a comment...

1
Followers
3
Posts
4
Entries
Site Banner
Mana HQ
Updates from the Mana core team
Contributors
Join