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-icon needs to be used in conjunction with svg-sprite-loader . So, please pre-install svg-sprite-loader and config it. Or use SVG symbols generated by other way.
The current version requires Vue 3.
Features
- Using to display SVG symbols as icons.
- Ability to manipulate SVG icons. e.g. using
font-size and color.
- Support Iconfont SVG symbol icons.
| Version | Support Vue Version | Docs |
|---|
v2 | v2 | 2.x |
v3 | v3 | main |
Installation
# pnpm
$ pnpm add vue-symbol-icon@next
# yarn
$ yarn add vue-symbol-icon@next
# npm
$ npm i vue-symbol-icon@next
Usage
<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 and above, 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
webpack with chainWebpack:
// 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 .svg icon files in the src/icons/svg folder.
-
Defines the entry point for batch importing .svg modules:
// src/icons/index.js
import SvgIcon from 'vue-symbol-icon' // svg component
// 2. require svg files
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().forEach(requireContext)
requireAll(req)
export const installIcons = (app) => {
app.use(SvgIcon)
}
- Finally, these
.svg files are centrally imported in the project entry file main.js.
import { createApp } from 'vue'
import App from './App.vue'
import { installIcons } from '@/icons'
const app = createApp(App)
installIcons(app)
app.mount('#app')
In Nuxt2
Please use nuxt-symbol-icons module. more details see it's docs.
CHANGE LOG
CHANGE LOG.
