@eyes22798/svg-icon

svg-icon

A lightweight component with no dependecy to allow use of custom SVG icons in your Vue.js application based on SVG sprite.

Installation

Using NPM:

npm install @eyes22798/svg-icon --save

Using Yarn:

yarn add @eyes22798/svg-icon

Requirements

• Vue.js (2.x+)
• svgxuse polyfill to support IE9-11 version
• SVG sprite file that should be available in "/assets/icons" folder (can be changed, changed in vue.config.js)

Usage

In your main.js file:

import SvgIcon from '@eyes22798/svg-icon'

Vue.use(SvgIcon)

In your vue.config.js

You can customize the component name and icon assets dir

const SvgIconConfig = require('@eyes22798/svg-icon/webpack')

module.exports = {
  chainWebpack: (config) => {
    SvgIconConfig({ config, iconPath: './src/assets/icons', name: 'svg-icon' })
  }
}

In your components:

this name is current svg file name

  <svg-icon name="file_name" className="iconClass"></svg-icon>

• name - SVG sprite symbol id value (svg file name)
• className - svg class，arrays are supported（:className=['class1', 'class2']）

Customize configuration

See Configuration Reference.