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

1# install global
2npm install vue-svgicon -g
3# install for project
4npm install vue-svgicon --save

Command

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

Use as npm scripts

1{
2    "scripts": {
3        "svg": "vsvg -s ./static/svg/src -t ./src/icons"
4    }
5}

1# bash
2npm run svg

It will generate icons to the specified path.

Use programming api

1import build from 'vue-svgicon/dist/lib/build'
2build({
3    sourcePath: '';
4    targetPath: '';
5    ext?: 'js';
6    es6?: false;
7    tpl?: '';
8    idSP?: '_';
9    svgo?: 'Configuration file path' || {/* svgo config object */}
10})

Custom icon content format

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

Default template is:

1var icon = require('vue-svgicon')
2icon.register({
3  '${name}': {
4    width: ${width},
5    height: ${height},
6    viewBox: ${viewBox},
7    data: `${data}`
8  }
9})

Custom icon file extension

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

Suport ES6 modules

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

Custom svgo

1vsvg -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:

1/* recommended css code for vue-svgicon */
2.svg-icon {
3    display: inline-block;
4    width: 16px;
5    height: 16px;
6    color: inherit;
7    vertical-align: middle;
8    fill: none;
9    stroke: currentColor;
10}
11
12.svg-fill {
13    fill: currentColor;
14    stroke: none;
15}
16
17.svg-up {
18    /* default */
19    transform: rotate(0deg);
20}
21
22.svg-right {
23    transform: rotate(90deg);
24}
25
26.svg-down {
27    transform: rotate(180deg);
28}
29
30.svg-left {
31    transform: rotate(-90deg);
32}

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

Use plugin

1// main.js
2import Vue from 'vue'
3import App from './App.vue'
4import SvgIcon from 'vue-svgicon'
5
6// Default tag name is 'svgicon'
7Vue.use(SvgIcon, {
8    tagName: 'svgicon'
9})
10
11new Vue({
12    el: '#app',
13    render: h => h(App)
14})

Use icon in component

1<!-- App.vue -->
2<template>
3    <div id="app">
4        <p>
5            <svgicon
6                name="vue"
7                width="200"
8                height="200"
9                color="#42b983 #35495e"
10            ></svgicon>
11        </p>
12    </div>
13</template>
14
15<script>
16    import 'icons/vue'
17
18    export default {
19        name: 'app',
20        data() {
21            return {
22                msg: 'Welcome to Your Vue.js App'
23            }
24        }
25    }
26</script>

You can import all icons at once

1import 'icons'

Options

tagName

Custom component tag name. Default is svgicon

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

1<svgicon name="vue"></svgicon>

classPrefix

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

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

It will be generated like this:

1<svg
2    version="1.1"
3    viewBox="0 0 4 7"
4    class="vue-svg-icon vue-svg-fill vue-svg-up"
5>
6    <!-- svg code -->
7</svg>

defaultWidth / defaultHeight

Set default size if size props not set.

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

isStroke

Use stroke style by default

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

isOriginalDefault

Use original color by default.

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

Props

icon / name

icon name.

1<svgicon icon="vue"></svgicon> <svgicon name="vue"></svgicon>

dir

The direction of icon.

1<svgicon name="arrow" width="50" height="50" dir="left"></svgicon>
2<svgicon name="arrow" width="50" height="50" dir="up"></svgicon>
3<svgicon name="arrow" width="50" height="50" dir="right"></svgicon>
4<svgicon name="arrow" width="50" height="50" dir="down"></svgicon>

fill

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

1<svgicon name="arrow" width="50" height="50"></svgicon>
2<svgicon name="arrow" width="50" height="50" :fill="false"></svgicon>

You can use r-color to reverse the fill property

1<!-- the first one is fill(default), the second use stroke -->
2<svgicon
3    name="clock"
4    color="#8A99B2 r-#1C2330"
5    width="100"
6    height="100"
7></svgicon>
8<!-- the first one is stoke, the second is fill -->
9<svgicon
10    name="clock"
11    color="#8A99B2 r-#1C2330"
12    width="100"
13    height="100"
14    :fill="false"
15></svgicon>

width / height

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

1<svgicon name="arrow" width="50" height="50"></svgicon>
2<svgicon name="arrow" width="10em" height="10em"></svgicon>

scale

Scale icon size, it will overwrite width/height prop

1<svgicon name="arrow" scale="10"></svgicon>
2<svgicon name="arrow" scale="10" width="10em" height="10em"></svgicon>

color

Specify the color of icon. Default value is inherit.

1<p style="color: darkorange">
2    <svgicon name="arrow" width="50" height="50"></svgicon>
3    <svgicon name="arrow" width="50" height="50" color="red"></svgicon>
4    <svgicon name="arrow" width="50" height="50" color="green"></svgicon>
5    <svgicon name="arrow" width="50" height="50" color="blue"></svgicon>
6</p>

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

1<svgicon name="vue" width="100" height="100" color="#42b983 #35495e"></svgicon>

Also, you can use CSS to add colors.

1<svgicon class="vue-icon" name="vue" width="100" height="100"></svgicon>

1.vue-icon path[pid='0'] {
2    fill: #42b983;
3}
4
5.vue-icon path[pid='1'] {
6    fill: #35495e;
7}

Use gradient

1<template>
2    <svg>
3        <defs>
4            <linearGradient id="gradient-1" x1="0" y1="0" x2="0" y2="1">
5                <stop offset="5%" stop-color="#57f0c2" />
6                <stop offset="95%" stop-color="#147d58" />
7            </linearGradient>
8            <linearGradient id="gradient-2" x1="0" y1="0" x2="0" y2="1">
9                <stop offset="5%" stop-color="#7295c2" />
10                <stop offset="95%" stop-color="#252e3d" />
11            </linearGradient>
12        </defs>
13    </svg>
14    <svgicon
15        name="vue"
16        width="15rem"
17        height="15rem"
18        color="url(#gradient-1) url(#gradient-2)"
19    ></svgicon>
20</template>

original

use original color

1<icon name="colorwheel" width="100" height="100" :original="true"></icon>
2<!-- overwrite original color -->
3<icon
4    name="colorwheel"
5    width="100"
6    height="100"
7    :original="true"
8    color="_ black _ black _"
9></icon>

title

SVG title

1<icon name="vue" title="vue icon"></icon>

It will be generated like this:

1<svg version="1.1" viewBox="0 0 256 221" class="vue-svg-icon vue-svg-fill">
2    <title>vue icon</title>
3    <!-- svg code -->
4</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

1<svgicon name="arrow" width="50" height="50"></svgicon>
2<svgicon name="sora/arrow" width="50" height="50"></svgicon>
3<svgicon name="sora/fit/arrow" width="50" height="50"></svgicon>

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.

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

This polyfill is a wrapper of innersvg-polyfill.