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. for Vue 2, pls use 2.x.

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.x	v2	v2
v3.x	v3	v3

Installation

# pnpm
$ pnpm add vue-symbol-icon

# yarn
$ yarn add vue-symbol-icon

# npm
$ npm i vue-symbol-icon

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

⚠️ 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

1. 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();
  }
}

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

3. 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)
}

4. 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.