Package Exports

vue-svgicon
vue-svgicon/dist/polyfill

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-svgicon) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-svgicon

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

Inspiration

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

demo

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

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

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.

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

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

your 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 * as 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

<!-- App.vue -->
<template>
  <div id="app">
    <p>
      <svgicon name="vue" width="200" height="200" color="#42b983 #35495e"></svgicon>
    </p>
  </div>
</template>

<script>
import 'icons/vue'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  }
}
</script>

You can import all icons at once

import 'icons'

Options

tagName

Custom component tag name. Default is svgicon

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

<svgicon name="vue"></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 version="1.1" viewBox="0 0 4 7" class="vue-svg-icon vue-svg-fill vue-svg-up">
<!-- svg code -->
</svg>

defaultWidth / defaultHeight

Set default size if size props not set.

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

Props

icon / name

icon name.

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

dir

The direction of icon. Default value is right

<svgicon name="arrow" width="50" height="50" dir="left"></svgicon>
<svgicon name="arrow" width="50" height="50" dir="up"></svgicon>
<svgicon name="arrow" width="50" height="50"></svgicon>
<svgicon name="arrow" width="50" height="50" dir="down"></svgicon>

fill

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

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

You can use r-color to reverse the fill property

<!-- the first one is fill(default), the second use stroke -->
<svgicon name="clock" color="#8A99B2 r-#1C2330" width="100" height="100"></svgicon>
<!-- the first one is stoke, the second is fill -->
<svgicon name="clock" color="#8A99B2 r-#1C2330" width="100" height="100" :fill="false"></svgicon>

width / height

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

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

scale

Scale icon size, it will overwrite width/height prop

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

Color

Specify the color of icon. Default value is inherit.

<p style="color: darkorange">
    <svgicon name="arrow" width="50" height="50"></svgicon>
    <svgicon name="arrow" width="50" height="50" color="red"></svgicon>
    <svgicon name="arrow" width="50" height="50" color="green"></svgicon>
    <svgicon name="arrow" width="50" height="50" color="blue"></svgicon>
</p>

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

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

Also, you can use CSS to add colors.

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

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

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

You can't use this feature in scoped block.

Use gradient

<template>
    <svg>
       <defs>
          <linearGradient id="gradient-1" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%"  stop-color="#57f0c2"/>
              <stop offset="95%" stop-color="#147d58"/>
          </linearGradient>
          <linearGradient id="gradient-2" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%"  stop-color="#7295c2"/>
              <stop offset="95%" stop-color="#252e3d"/>
          </linearGradient>
      </defs>
    </svg>
    <svgicon name="vue" width="15rem" height="15rem" color="url(#gradient-1) url(#gradient-2)"></svgicon>
</template>

original

use original color

<icon name="colorwheel" width="100" height="100" :original="true"></icon>
<!-- overwrite original color -->
<icon name="colorwheel" width="100" height="100" :original="true" color="_ black _ black _"></icon>

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

<svgicon name="arrow" width="50" height="50"></svgicon>
<svgicon name="sora/arrow" width="50" height="50"></svgicon>
<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.

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

This polyfill is a wrapper of innersvg-polyfill.