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
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
# bash npm run svg
It will generate icons to the specified path.
Use programming api
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 = icon
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
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 */
you can use
classPrefix
option to set the default class name. The default prefix issvg
Use plugin
// main.js // Default tag name is 'svgicon'Vue el: '#app'
Use icon in component
<!-- App.vue -->
You can import all icons at once
Options
tagName
Custom component tag name. Default is svgicon
Vue
classPrefix
your can use classPrefix
option to set the default class name. The default prefix is svg
Vue
It will be generated like this:
<!-- svg code -->
defaultWidth / defaultHeight
Set default size if size props not set.
Vue
isStroke
Use stroke style by default
Vue
isOriginalDefault
Use original color by default.
Vue
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
<!-- the first one is fill(default), the second use stroke --><!-- the first one is stoke, the second is fill -->
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.
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.
Use gradient
original
use original color
<!-- overwrite original color -->
title
SVG title
It will be generated like this:
vue icon <!-- svg code -->
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
This polyfill is a wrapper of innersvg-polyfill.