nuxt-svgicon

Nuxt module for vue-svgicon

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
nuxt-svgicon
631.2.74 years ago4 years agoMinified + gzip package size for nuxt-svgicon in KB

Readme

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

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.