nuxt-svgicon

nuxt-svgicon module

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

Install

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

Usage

In nuxt.config.js add module:

{
  modules: [
    // simple usage
    'nuxt-svgicon',
    // or
    // with options
    ['nuxt-svgicon', { /* svgicon options */ }]
 ]
}

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
}

subDir

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

usePolyfill

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

renameStyles

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.