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,colorpowered 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-iconsUsage
- Configure your nuxt.config.js
// 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
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