Vue2 Component for svg icon, On demand import

Last update: Jul 18, 2022

Vue-Svg-Icons

Latest Version on NPM Software License npm

Vue2 Component for svg icon, On demand import

Table of Contents

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/

I love SVG I love SVG ` } })">
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>

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.

GitHub

https://github.com/xpf0000/vuesvgicon
You might also like...

⛄️ Vue Icon Set Components from Ionic Team

β›„ Vue Ionicons Vue Icon Set Components from Ionic Team Design icons sourced from the Ionicons project. πŸŽ‰ Demo https://mazipan.github.io/vue-ionicons

Dec 29, 2021

⚑️ Icon Explorer with Instant searching, powered by Iconify

⚑️ Icon Explorer with Instant searching, powered by Iconify

⚑️ Icon Explorer with Instant searching, powered by Iconify

Aug 11, 2022

A flexible icon family for Vue

A flexible icon family for Vue

phosphor-vue Phosphor is a flexible icon family for interfaces, diagrams, presentations β€” whatever, really. Explore all our icons at phosphoricons.com

Aug 9, 2022

Vue.js font awesome icon(star) rating components ✨

Vue.js font awesome icon(star) rating components ✨

Vue.js fontawesome icon rate component

Aug 4, 2022

🍺 Material Icon for Vue lovers. Coded by Bootcatch.

🍺 Material Icon for Vue lovers. Coded by Bootcatch.

Mar 31, 2020

icons-ui is a package that allows multiple icon packages to be used in multiple frontend frameworks.

icons-ui is a package that allows multiple icon packages to be used in multiple frontend frameworks.

icons-ui is a package that allows multiple icon packages to be used in multiple frontend frameworks.

Jul 12, 2021

Activity indicating (loading) icon in shape of a spinning wheel

Minimalistic activity indicator (loading icon) in shape of a spinning wheel

May 11, 2021

Vue.js component for accessing Zondicon svg icons

vue-zondicons Easily add Zondicon icons to your vue web project Installation npm install --save vue-zondicons To Use In your main.js Vue file add the

May 9, 2021

CoreUI Icons for Vue.js. Dedicated component used to implement CoreUI Icons SVG set in Vue.js.

CoreUI Icons Vue CIcon component Dedicated component used to implement CoreUI Icons SVG set in Vue.js. Features Can load icons in three ways: stored g

Jun 14, 2022
Related tags
Feather Icon web component using stencil.js for Vue, Angular & React to use icon as single icon or as a sprite

Stencil Feather Feather Icon web component using stencil.js for Vue, Angular & React to use icon as single icon or as a sprite. Feather Icons Demo Ins

May 30, 2022
Awesome SVG icon component for Vue.js, built-in with Font Awesome icons.

Vue-Awesome Awesome SVG icon component for Vue.js, with built-in Font Awesome icons. ???? δΈ­ζ–‡η‰ˆ Vue-Awesome an SVG icon component for Vue.js, with built

Aug 13, 2022
😸 Vue component for Simple Line Icons and you may choose a SVG or a Font icon just with a prop.
😸 Vue component for Simple Line Icons and you may choose a SVG or a Font icon just with a prop.

?? SVG - Simple Line Icons This is a Vue component for Simple Line Icons and you may choose a SVG or a Font icon just with a prop. By default componen

Apr 22, 2022
A Vue component for including inline SVG icons from different popular icon packs easily.

Oh, Vue Icons! English | δΈ­ζ–‡θ―΄ζ˜Ž A Vue component for including inline SVG icons from different popular icon packs easily. Features Tree-shakable, which a

Aug 10, 2022
😸 Vue component for Simple Line Icons and you may choose a SVG or a Font icon just with a prop.
😸 Vue component for Simple Line Icons and you may choose a SVG or a Font icon just with a prop.

?? SVG - Simple Line Icons This is a Vue component for Simple Line Icons and you may choose a SVG or a Font icon just with a prop. By default componen

Apr 22, 2022
Optimized Feather icon set for Vue using SVG references

?? vue-feather-icon-set Optimized Feather icon set for Vue using SVG references ?? Install npm i vue-feather-icon-set ??‍?? Usage Put the IconLayer at

Jul 17, 2022
A transitioning (color and SVG) result icon (error or success) for Vue.

Transitioning Result Icon for Vue.js A scalable result icon (SVG) that transitions the state change, that is the SVG shape change is transitioned as w

Feb 14, 2020
Animated chevron icon component for Vue

Animated chevron icon component for Vue

Nov 23, 2021
Vue.js (2.5+) functional component to display material icon

vue-material-icon Vue.js (2.5+) functional component to display material icon. Installation Using NPM: npm install vue-material-icon Usage In your ma

Dec 12, 2019
Viconly - Vue.js component wrapper for a free and nice-looking icon pack, Iconly
Viconly - Vue.js component wrapper for a free and nice-looking icon pack, Iconly

Viconly Vue.js component wrapper for a free and nice-looking icon pack, Iconly. You can see all the styles and names here Installation (add to the pro

Jul 22, 2022