vue-svgicon

A tool to create svg icon components. (vue 2.x) 中文

> Try next version: 4.x

Inspiration

https://github.com/Justineo/vue-awesome

demo

https://mmf-fe.github.io/vue-svgicon/v3/

Some issues

• Work on IE and old browser

Usage

Generate icon

Install

# install global
npm install vue-svgicon -g
# install for project
npm install vue-svgicon --save

Command

# generate svg icon components
vsvg -s /path/to/svg/source -t /path/for/generated/components

Use as npm scripts

{
    "scripts": {
        "svg": "vsvg -s ./static/svg/src -t ./src/icons"
    }
}

# bash
npm run svg

It will generate icons to the specified path.

Use programming api

import build from 'vue-svgicon/dist/lib/build'
build({
    sourcePath: '';
    targetPath: '';
    ext?: 'js';
    es6?: false;
    tpl?: '';
    idSP?: '_';
    svgo?: 'Configuration file path' || {/* svgo config object */}
})

Custom icon content format

# specify template path
vsvg -s /path/to/svg/source -t /path/for/generated/components --tpl /path/for/icon-template

Default template is:

var icon = require('vue-svgicon')
icon.register({
  '${name}': {
    width: ${width},
    height: ${height},
    viewBox: ${viewBox},
    data: `${data}`
  }
})

Custom icon file extension

vsvg -s /path/to/svg/source -t /path/for/generated/components --ext ts

Suport ES6 modules

vsvg -s /path/to/svg/source -t /path/for/generated/components --ext ts --es6

Custom svgo

vsvg -s /path/to/svg/source -t /path/for/generated/components --svgo svgo.js

Default svgo config

Use generated icon

First of all, your should write some css code for vue-svgicon in global scope. Recommended code is below:

/* recommended css code for vue-svgicon */
.svg-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    color: inherit;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
}

.svg-fill {
    fill: currentColor;
    stroke: none;
}

.svg-up {
    /* default */
    transform: rotate(0deg);
}

.svg-right {
    transform: rotate(90deg);
}

.svg-down {
    transform: rotate(180deg);
}

.svg-left {
    transform: rotate(-90deg);
}

> you can use classPrefix option to set the default class name. The default prefix is svg

Use plugin

// main.js
import Vue from 'vue'
import App from './App.vue'
import SvgIcon from 'vue-svgicon'

// Default tag name is 'svgicon'
Vue.use(SvgIcon, {
    tagName: 'svgicon'
})

new Vue({
    el: '#app',
    render: h => h(App)
})

Use icon in component

<template>
    <div id="app">
        <p>
            
        </p>
    </div>
</template>

You can import all icons at once

import 'icons'

Options

tagName

Custom component tag name. Default is svgicon

Vue.use(svgicon, {
    tagName: 'svgicon'
})

classPrefix

your can use classPrefix option to set the default class name. The default prefix is svg

Vue.use(svgicon, {
    classPrefix: 'vue-svg'
})

It will be generated like this:

<svg class="vue-svg-icon vue-svg-fill vue-svg-up" viewBox="0 0 4 7" version="1.1">
    
</svg>

defaultWidth / defaultHeight

Set default size if size props not set.

Vue.use(svgicon, {
    defaultWidth: '1em',
    defaultHeight: '1em'
})

isStroke

Use stroke style by default

Vue.use(svgicon, {
    isStroke: true
})

isOriginalDefault

Use original color by default.

Vue.use(svgicon, {
    isOriginalDefault: false
})

Props

icon / name

icon name.

dir

The direction of icon.

fill

Whether to fill the path/shape. Default value is true

You can use r-color to reverse the fill property

width / height

Specify the size of icon. Default value is 16px / 16px. Default unit is px

scale

Scale icon size, it will overwrite width/height prop

color

Specify the color of icon. Default value is inherit.

<p style="color: darkorange">
    
    
    
    
</p>

If the icon is mutil path/shape, you can use mutil color. It is defined in the order of path/shape.

Also, you can use CSS to add colors.

.vue-icon path[pid='0'] {
    fill: #42b983;
}

.vue-icon path[pid='1'] {
    fill: #35495e;
}

Use gradient

<template>
    <svg>
        <defs>
            <linearGradient y2="1" x2="0" y1="0" x1="0" id="gradient-1">
                <stop stop-color="#57f0c2" offset="5%"></stop>
                <stop stop-color="#147d58" offset="95%"></stop>
            </linearGradient>
            <linearGradient y2="1" x2="0" y1="0" x1="0" id="gradient-2">
                <stop stop-color="#7295c2" offset="5%"></stop>
                <stop stop-color="#252e3d" offset="95%"></stop>
            </linearGradient>
        </defs>
    </svg>
    
</template>

original

use original color

title

SVG title

It will be generated like this:

<svg class="vue-svg-icon vue-svg-fill" viewBox="0 0 256 221" version="1.1">
    <title>vue icon</title>
    
</svg>

Multiple directory (Namespace)

You can use multiple directory to discriminate the icons which has the same name.

├── arrow.svg
├── sora
│   ├── arrow.svg
│   └── fit
│       └── arrow.svg

Work on IE and old browser

This component doesn't work on IE because IE don't support innerHTML in SVGElement. You can use innersvg-polyfill to make it work. You can also use the polyfill provided by this component.

// in main.js first line
import 'vue-svgicon/dist/polyfill'

This polyfill is a wrapper of innersvg-polyfill.