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

1# pnpm
2$ pnpm add vue-symbol-icon@next
3
4# yarn
5$ yarn add vue-symbol-icon@next
6
7# npm
8$ npm i vue-symbol-icon@next

Usage

1<template>
2  <svg-icon icon-class="svg-symbol-name" font-size="36px" color="red" />
3
4  <!-- In v1.2.0 and above -->
5  <svg-icon name="svg-symbol-name" font-size="36px" color="red" />
6</template>

In v2.x and above, you can use vue-symbol-icon as a global component via vue plugin:

1import Vue from 'vue'
2import SvgIcon from 'vue-symbol-icon'
3
4Vue.use(SvgIcon)

Or, Local registration:

1import { SvgIcon } from 'vue-symbol-icon'
2
3export default {
4  components: {
5    SvgIcon
6  }
7}

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.

1<template>
2  <svg-icon symbol-id-prefix="icon-" name="symbol-name" />
3</template>

It's look like:

1<svg><use href="#icon-symbol-name" /></svg>

How to config svg-sprite-loader ?

In Vue CLI

1. First, you need config webpack with chainWebpack:

1// vue.config.js
2const path = require('path')
3
4function resolve(dir) {
5  return path.resolve(__dirname, dir)
6}
7
8module.exports = {
9  // ...
10  chainWebpack(config) {
11    
12    // Change the configuration of url-loader so that it does not process svg files used as icons in the specified folder
13    config.module
14      .rule("svg")
15      .exclude.add(resolve("src/icons/svg"))
16      .end();
17
18    // Add svg-sprite-loader to process svg files in the specified folder
19    config.module
20      .rule("icons")
21      .test(/\.svg$/)
22      .include.add(resolve("src/icons/svg"))
23      .end()
24      .use("svg-sprite-loader")
25      .loader("svg-sprite-loader")
26      .options({
27        symbolId: "icon-[name]"
28      })
29      .end();
30  }
31}

2. Then, place your .svg icon files in the src/icons/svg folder.

3. Defines the entry point for batch importing .svg modules:

1// src/icons/index.js
2
3import SvgIcon from 'vue-symbol-icon' // svg component
4
5// 2. require svg files
6const req = require.context('./svg', false, /\.svg$/)
7const requireAll = requireContext => requireContext.keys().forEach(requireContext)
8requireAll(req)
9
10export const installIcons = (app) => {
11  app.use(SvgIcon)
12}

4. Finally, these .svg files are centrally imported in the project entry file main.js.

1import { createApp } from 'vue'
2import App from './App.vue'
3import { installIcons } from '@/icons'
4
5const app = createApp(App)
6
7installIcons(app)
8
9app.mount('#app')

In Nuxt2

Please use nuxt-symbol-icons module. more details see it's docs.

CHANGE LOG

CHANGE LOG.