Vue2 Component for svg icon, On demand import
$ npm install --save @xpf0000/vuesvgicon
Register the component and import css
import Vue from 'vue'
import '@xpf0000/vuesvgicon/dist/VueSvgIcons.css'
import VueSvgIcons from '@xpf0000/vuesvgicon'
Vue.component('Icons', VueSvgIcons)
Or in some env, can’t use the umd module,like uni-app, so import like this
import Vue from 'vue'
import VueSvgIcons from '@xpf0000/vuesvgicon/src/components/vue-svg-icons'
Vue.component('Icons', VueSvgIcons)
Add svg icon like text.js, you can use any svg code where you can found, like https://www.iconfont.cn/
import Icon from '@xpf0000/vuesvgicon'
Icon.register({
'text': {
'width': 300,
'height': 150,
'raw': `<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<text x="10" y="100">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>`
}
})
or use raw svg file, use the content prop like:
<template>
<Icons :content="import('@/svg/C_fangda.svg')"></Icons>
</template>
You may now use the component in your markup
<template>
<div>
<Icons name="text"></Icons>
<Icons path="svg/C_fangda.svg"></Icons>
</div>
</template>
<script>
import './text.js'
export default {
data: function () {},
methods: {}
}
</script>
Type: String
Required: true
Used to set which svg icon to use
<Icons name="registName">
Type: [String
, Promise
]
Required: true
use raw svg file
<Icons :content="import('@/svg/C_fangda.svg')"></Icons>
Type: String
Required: false
validator: v | h | vh
Used to set flip svg icon
<Icons name="registName" flip="v">
Type: Boolean
Required: false
Default: false
Used to set a rotate animation to icon, but the best way is to add one yourself
<Icons name="registName" :spin="true">
Type: Boolean
Required: false
Default: false
in some env, svg tag is not support, but css background-image is support, use this to fix
<Icons name="registName" :background-image="true" :spin="true">
Any contribution to the code or any part of the documentation and any idea and/or suggestion are very welcome.
# serve with hot reload at localhost:8080
npm run serve
# distribution build-bundle
npm run build-bundle
Author: xpf0000
Source Code: https://github.com/xpf0000/vuesvgicon
#vue #vuejs #javascript