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

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

Download Details:

Author: antonreshetov

Live Demo: https://antonreshetov.github.io/vue-unicons/

Download Link: https://github.com/antonreshetov/vue-unicons-next/archive/master.zip

Official Website: https://github.com/antonreshetov/vue-unicons-next

Install & Download:

# Yarn
$ yarn add [email protected]

# NPM
$ npm i [email protected]

You Might Be Interested In:

Tags:

Add Comment