1000+ Pixel Perfect SVG Icons For Vue 2/3 – Unicons

Install & Download:

# Yarn
$ yarn add vue-unicons@next
# NPM
$ npm i vue-unicons@next

Description:

A Vue component that allows you to use Unicons icons as components in your Vue 3 or Vue 2 projects.

How to use it (Vue 3):

1. Import icons as components into your app.

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. Default props to customize the 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'
}

Preview:

1000+ Pixel Perfect SVG Icons For Vue 2 3 - Unicons

Changelog:

v3.3.1 (11/23/2021)

  • Bugfix

v3.3.0 (11/18/2021)

  • Update unicons to 4.0.1
  • Fix adding icons on the site

v3.2.0 (03/30/2021)

  • add ‘hover-fill’ property

v3.0.0 (03/10/2021)

  • Vue 3 support
Tags:

Add Comment