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

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

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

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

Usage

1. Configure your nuxt.config.js

// nuxt.config.js

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

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