yisibell
vue-symbol-icon
A Vue SVG Symbol icon component for using SVG sprites icons. Easy to customize SVG icon 's color and size!!!
TIPS:
vue-symbol-iconneeds to be used in conjunction withsvg-sprite-loader. So, please pre-install svg-sprite-loader and config it. Or use SVG symbols generated by other way.
For Vue 3, Pls use v3.x.
yarn add vue-symbol-icon@next.
Features
- Using to display SVG symbols as icons.
- Ability to manipulate SVG icons. e.g. using
font-sizeandcolor. - Support Iconfont SVG symbol icons.
Installation
# pnpm
$ pnpm add vue-symbol-icon
# yarn
$ yarn add vue-symbol-icon
# npm
$ npm i vue-symbol-iconUsage
<template>
<svg-icon icon-class="svg-symbol-name" font-size="36px" color="red" />
<!-- In v1.2.0 and above -->
<svg-icon name="svg-symbol-name" font-size="36px" color="red" />
</template>In v2.x, you can use vue-symbol-icon as a global component via vue plugin:
import Vue from 'vue'
import SvgIcon from 'vue-symbol-icon'
Vue.use(SvgIcon)Or, Local registration:
import { SvgIcon } from 'vue-symbol-icon'
export default {
components: {
SvgIcon
}
}Plugin options
| Key | Type | Default value | Description |
|---|---|---|---|
globalComponentName (Added in v2.1.0) |
string |
SvgIcon |
Define the global component name. |
symbolIdPrefix (Added in v2.1.0) |
string |
icon- |
Set SVG symbol id prefix in global. |
Component properties
| Prop name | Default value | Description | Type | Added in |
|---|---|---|---|---|
name |
undefined |
SVG symbol name which is SVG filename in the SVG folder. | string |
v1.2.0 |
symbolIdPrefix |
undefined |
SVG symbol id prefix. | string |
v1.2.0 |
iconClass |
undefined |
alias of name |
string |
v1.1.0 |
className |
undefined |
Add Extra class name to SVG Element | string |
v1.1.0 |
color |
undefined |
Define SVG color | string |
v1.1.0 |
fontSize |
undefined |
Define SVG size | string/number |
v1.1.0 |
size |
undefined |
Alias of fontSize |
string/number |
v2.2.0 |
width |
undefined |
Alias of fontSize |
string/number |
v2.2.0 |
:warning: TIPS, name and symbolIdPrefix form the Symbol id. Global plugin configuration has lower priority than component properties.
<template>
<svg-icon symbol-id-prefix="icon-" name="symbol-name" />
</template>It's look like:
<svg><use href="#icon-symbol-name" /></svg>How to config svg-sprite-loader ?
In Vue CLI
- First, you need config
webpackwithchainWebpack:
// vue.config.js
const path = require('path')
function resolve(dir) {
return path.resolve(__dirname, dir)
}
module.exports = {
// ...
chainWebpack(config) {
// Change the configuration of url-loader so that it does not process svg files used as icons in the specified folder
config.module
.rule("svg")
.exclude.add(resolve("src/icons/svg"))
.end();
// Add svg-sprite-loader to process svg files in the specified folder
config.module
.rule("icons")
.test(/\.svg$/)
.include.add(resolve("src/icons/svg"))
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]"
})
.end();
}
}Then, place your
.svgicon files in thesrc/icons/svgfolder.Defines the entry point for batch importing
.svgmodules:
// src/icons/index.js
import Vue from 'vue'
import SvgIcon from 'vue-symbol-icon' // svg component
// 1. register globally
// In vue-symbol-icon 1.x
// Vue.component('SvgIcon', SvgIcon)
// In vue-symbol-icon 2.x
Vue.use(SvgIcon)
// 2. require svg files
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().forEach(requireContext)
requireAll(req)- Finally, these
.svgfiles are centrally imported in the project entry filemain.js.
import Vue from 'vue'
import '@/icons'
new Vue({
// ...
})In Nuxt2
Please use nuxt-symbol-icons module. more details see it's docs.