nuxt-svgicon

1.2.7 • Public • Published

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.

Readme

Keywords

Package Sidebar

Install

npm i nuxt-svgicon

Weekly Downloads

154

Version

1.2.7

License

MIT

Unpacked Size

13.9 kB

Total Files

11

Last publish

Collaborators

  • dschewchenko