nuxt-symbol-icons

A nuxt(2) module for using svg sprite icon.

Features

Support SVGO optimization.
Support SVG sprites powered by svg-sprite-loader
Ability to manipulate icons. e.g. using font-size , color powered by vue-symbol-icon.

# yarn
$ yarn add --dev nuxt-symbol-icons

# npm 
$ npm i nuxt-symbol-icons -D

# pnpm
$ pnpm add --dev nuxt-symbol-icons

// nuxt.config.js

module.exports = {
  // ...
  buildModules: ['nuxt-symbol-icons'],
  nuxtSymbolIcons: {
    // ...
  }
}

Put your SVG icon into ~/assets/icons/svg/ folder.
then, you can use <svg-icon name="icon-name" /> in projects. The <svg-icon /> component powered by vue-symbol-icon

Key	Type	Default value	Description
`enable`	`boolean`	`true`	Whether to enable nuxt-symbol-icons
`svgoConfig` Added in `v2.0.0`	`boolean/SvgoConfig`	`{}`	Define configuration of SVGO, if set to `false`, will disable SVGO.
`enableSvgoPresetDefaultConfig` Added in `v2.0.0`	`boolean`	`true`	Whether to add `preset-default` config for SVGO
`svgSymbolIdPrefix`	`string`	`icon-`	Define the SVG symbol id prefix.
`globalComponentName`	`string`	`SvgIcon`	Define the global component name of `vue-symbol-icon`.
`svgSpriteLoaderIncludeDir`	`string`	`assets/icons/svg`	Define the include folder for svg-sprite-loader.
`requireContextSvgDir`	`string`	`~/assets/icons/svg`	Define the SVG icons folder for Batch imports via `require.context`.
`extraSvgSpriteLoaderOptions`	`Record<string, any>`	`{}`	Configure extra options for svg-sprite-loader.
`extraPreLoaders`	`RuleSetUseItem[]`	`[]`	Use some other loaders before svg-sprite-loader processes SVG.