Press "Enter" to skip to content

1000+ Pixel Perfect SVG Icons For Vue Components | Unicons

1000+ SVG pixels are perfect for your next project as Vue components. Vue Unicons is an open-source project and completely free to use.

vue js svg icon, vue svg loader, vue inline svg, svg icon library, svg sprite download, how to use svg icons in html, button with svg icon and text, svg sprite example

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-unicons@next

# NPM
$ npm i vue-unicons@next

1. Import icons as components in your application.

import { createApp } from 'vue'
import Unicon from 'vue-unicons'
import { uniAbacus, uniAccessibleIconAlt, uniAdjustCircle } from 'vue-unicons/src/icons'
Unicon.add([uniAbacus, uniAccessibleIconAlt, uniAdjustCircle])
createApp(App).use(Unicon).mount('#app')

2. Add these icons to your app.

<unicon name="abacus" fill="royalblue" />
<unicon name="accessible-icon" fill="deeppink" icon-style="monochrome" />

3. Virtual props to customize icons.

name: {
  type: String,
  default: ''
},
iconStyle: {
  type: String,
  default: 'line'
},
width: {
  type: [String, Number],
  default: 24
},
height: {
  type: [String, Number],
  default: 24
},
fill: {
  type: String,
  default: 'inherit'
},
hoverFill: {
  type: String,
  default: null
},
viewBox: {
  type: String,
  default: '0 0 24 24'
}

Props

NameDescriptionTypeAccepted valuesDefault value
nameIcon namestring
widthWidth of iconstring
heightHeight of iconstring
fillFill color of iconstringHEX or color name
hover-fillFill color on hoverstringHEX or color name
icon-styleIcon stylestringline / monochromeline

Events

NameDescriptionPayload
clickTriggered when icon was clicked

1000+ Pixel Perfect SVG Icons For Vue 2/3, vue unicons Plugin/Github, include svg sprite in html


See Demo And Download

Official Website(antonreshetov): Click Here

This superior jQuery/javascript plugin is developed by antonreshetov. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.