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.

Installation

1# yarn
2$ yarn add --dev nuxt-symbol-icons
3
4# npm 
5$ npm i nuxt-symbol-icons -D
6
7# pnpm
8$ pnpm add --dev nuxt-symbol-icons

Usage

1. Configure your nuxt.config.js

1// nuxt.config.js
2
3module.exports = {
4  // ...
5  buildModules: ['nuxt-symbol-icons'],
6  nuxtSymbolIcons: {
7    // ...
8  }
9}

2. Put your SVG icon into ~/assets/icons/svg/ folder.

3. then, you can use <svg-icon name="icon-name" /> in projects. The <svg-icon /> component powered by vue-symbol-icon

Options

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.

CHANGE LOG

see CHANGE LOG