Use your own automatically imported SVG icons.

v3.2.0 by gitFoxCodegitFoxCode

Breaking changes

From now on, icons that have the 'stroke' property will be treated like icons with 'fill', this means that from now on you can use icons that have only 'stroke' which was not possible in previous versions of the project.


From now on, icons will be rendered by the server.


This version contains changes that may affect the current projects, if there was any unintended effect on you please create an issue

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:
  ⠀⠀└ 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