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/

Usage

Generate icon

Install

# install global
npm install vue-svgicon -g

install for project
npm install vue-svgicon --save-dev</code></pre> 
  
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
 
  
Use generated icon
 
  
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)
})</code></pre> 
  
Use icon in component
 
  
<!-- App.vue -->
<template>
  <div id="app">
    <p>
      <svgicon icon="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></code></pre> 
  
You can import all icons at once
 
  
import 'icons'
 
  
Props
 
  
icon
 
  
icon name
 
  
<svgicon icon="vue"></svgicon>
 
  
dir
 
  
The direction of icon. Default value is right
 
  
<svgicon icon="arrow" width="50" height="50" dir="left"></svgicon>
<svgicon icon="arrow" width="50" height="50" dir="up"></svgicon>
<svgicon icon="arrow" width="50" height="50"></svgicon>
<svgicon icon="arrow" width="50" height="50" dir="down"></svgicon>
 
  
fill
 
  
Whether to fill the path/shape. Default value is true
 
  
<svgicon icon="arrow" width="50" height="50"></svgicon>
<svgicon icon="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 icon="clock" color="#8A99B2 r-#1C2330" width="100" height="100"></svgicon>
<!-- the first one is stoke, the second is fill -->
<svgicon icon="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 icon="arrow" width="50" height="50"></svgicon>
<svgicon icon="arrow" width="10em" height="10em"></svgicon>
 
  
Color
 
  
Specify the color of icon. Default value is inherit .
 
  
<p style="color: darkorange">
    <svgicon icon="arrow" width="50" height="50"></svgicon>
    <svgicon icon="arrow" width="50" height="50" color="red"></svgicon>
    <svgicon icon="arrow" width="50" height="50" color="green"></svgicon>
    <svgicon icon="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 icon="vue" width="100" height="100" color="#42b983 #35495e"></svgicon>
 
  
Also, you can use css to add colors.
 
  
<svgicon class="vue-icon" icon="vue" width="100" height="100"></svgicon>
 
  
.vue-icon path[pid="0"] {
    fill: #42b983
}

.vue-icon path[pid="1"] {
    fill: #35495e
}</code></pre> 
  
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 icon="vue" width="15rem" height="15rem" color="url(#gradient-1) url(#gradient-2)"></svgicon>
</template>