Vue-Svg-Icons

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': `



I love SVG I love SVG
`
  }
})

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>