👨‍🏫 The Mastering Nuxt 3 course is now completed!

Discover the course

Use your own automatically imported SVG icons.

v3.1.0 by gitFoxCodegitFoxCode

Typescript, reactive use of icons

v3.0.0 by gitFoxCodegitFoxCode

nuxt-icons v3.0.0

Complete module redesign. I focused on nuxt-icon.vue component, from now on it simply uses import.meta.glob.

  • No SVG properties are removed, component styles should override them by CSS
  • The module runs on the latest version of Nuxt 3.0.0 stable
  • Icons are loaded only when used

Breaking changes

  • Instead of fill from now filled is used (in order not to mix in the names of attributes that already exist)
  • No longer using the syntax <nuxt-icon name="NestedIcon" but <nuxt-icon name="nested/icon"> for:
📁icons └📁nested ⠀⠀└ icon.svg └ another-icon.svg

The changes are big, so if there are any errors, please create issues!

v2.0.1 by gitFoxCodegitFoxCode

As of now:

  • The module does not use the plugin.
  • It supports HMR.
  • You can add nested icons in subfolders