Description

Handy, performant and optimised toolkit to work with SVG icons written specifically for Nuxt framework.

Official "Nuxt Icon" module provides a direct access to tons of icons to choose from.
My module focuses on creating personal, lightweight, fast and dependency-free icon set for sites.

Basically, the module adds three components:

1. <MyIcon name="..." /> — renders any .svg file icon under assets/icons (by default) directory. It also bundles all icons into single icon set file and prefetches it. Also name prop has type guard and accepts only names of existing icons.
2. <MyInlineIcon name="..." svg="..." /> — allows to insert SVG icon at runtime and inlines it's svg.
3. <MyRuntimeIcon name="..." svg="..." /> — does almost the same as inlining icon BUT stores the SVG symbols for all runtime icons in global <svg> tag that is persistent between page changes and also fully supports SSR. This allows not to duplicate SVG each time the runtime icon is used.

See it in action in demo page or play with the module in live playground in browser.

For more info please see module's GitHub repository page.

I am not an expert in Nuxt and I believe some things inside module can be done easier so I am open to any suggestions from Nuxt contributors and devs.

Repository

https://github.com/Gwynerva/nuxt-my-icons

npm

https://www.npmjs.com/package/nuxt-my-icons

Nuxt Compatibility

Nuxt 3