A tool to generate SVG icon components: VUE-Svgicon (vue 2.x)

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

Inspiration

Github.com/Justineo/vu…

demo

MMF – fe. Making. IO/vue – svgicon…

Usage

Generate icon

# install global
npm install vue-svgicon -g
# install for project
npm install vue-svgicon --save-devCopy the code

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

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

# bash
npm run svgCopy the code

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)
})Copy the code

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>Copy the code

You can import all icons at once

import 'icons'Copy the code

Props

icon

icon name

<svgicon icon="vue"></svgicon>Copy the code

dir

<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>Copy the code

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>Copy the code

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>Copy the code

width / height

<svgicon icon="arrow" width="50" height="50"></svgicon>
<svgicon icon="arrow" width="10em" height="10em"></svgicon>Copy the code

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>Copy the code

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>Copy the code

Also, you can use css to add colors.

<svgicon class="vue-icon" icon="vue" width="100" height="100"></svgicon>Copy the code

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

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

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>Copy the code

Did this article help you? Welcome to join the front End learning Group wechat group: