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.

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-size and color.
• Support Iconfont SVG symbol icons.

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, 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

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 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)

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

import Vue from 'vue'

import '@/icons'

new Vue({
  // ...
})

In Nuxt2

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

CHANGE LOG

CHANGE LOG.