Vue2 Component for svg icon, On demand import

Table of Contents

• Features
• Install and basic usage
  • Props
• Contributing
• License

Features

• No dependencies
• On demand import your svg icon
• free style and class

Install and basic usage

$ npm install --save @xpf0000/vuesvgicon

Register the component

import Vue from 'vue'
import VueSvgIcons from '@xpf0000/vuesvgicon'
Vue.use(VueSvgIcons, 'Icons')

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>

Props

name

Type: String Required: true

Used to set which svg icon to use

<Icons name="registName">

content

Type: [String, Promise] Required: true

use raw svg file

<Icons :content="import('@/svg/C_fangda.svg')"></Icons>

flip

Type: String Required: false validator: v | h | vh

Used to set flip svg icon

<Icons name="registName" flip="v">

spin

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

background-image

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

Contributing

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

License

The MIT License (MIT). Please see License File for more information.