Nuxt module for vue-svgicon

Downloads in past


621.2.75 years ago6 years agoMinified + gzip package size for nuxt-svgicon in KB


nuxt-svgicon module
npm version
Nuxt module for integration vue-svgicon In short - nuxt module to create svg icon components. At build or starting dev it will generate icons.
All svg icons will be inlined in html, when You use SSR or generate :)
I have modified vue-svgicon builder for better support sub-directories.
It works only in nuxt 2


npm i nuxt-svgicon
# or
yarn add nuxt-svgicon


In nuxt.config.js add module:
  modules: [
    // simple usage
    // or
    // with options
    ['nuxt-svgicon', { /* svgicon options */ }]


Same as in vue-svgicon, but with some additions :) I use assets/svg as root path for svg, because it's recommended by nuxt community to use assets directory

Default config

  sourcePath: 'assets/svg',
  targetPath: 'assets/svg/bundle',
  subDir: 'assets/svg',
  ext: 'js',
  es6: false,
  tpl: '',
  idSP: '_',
  svgo: null, // use default vue-svgicon config
  renameStyles: false,
  tagName: 'svgicon',
  usePolyfill: true


Root dir for generating namespaces. May to be the same as sourcePath for start namespacing from root. For example if subDir: 'assets' and sourcePath: 'assets/svg', all svg icon names will start with svg/ namespace (example svg/icon_name).


If true will automatically add innersvg-polyfill for supporting IE and old browsers.


By default I have disabled renaming of svg styles fill and stroke. Because in some svg it doesn't work properly. If true, than You can use currentColor feature for coloring icons.