nuxt-svgicon
v1.2.7
Published
Nuxt module for vue-svgicon
Downloads
524
Readme
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.