JSPM

1000+ Pixel-perfect svg unicons for your next project as Vue components

Demo

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

Developed with love for developers

A simple way to add the necessary icons and install them.

Install

NPM

Installing with npm is recommended and it works seamlessly with webpack.

npm i vue-unicons

Download

You can download latest version from the Github: Download

Quick start

Global

To use in your project:

1. Import vue-unicons
2. Grab the icons you want and add then into Unicon library
3. Install Unicon into Vue

main.js

import Vue from 'vue'
import App from './App.vue'
import Unicon from 'vue-unicons'
import { uniLayerGroupMonochrome, uniCarWash } from 'vue-unicons/src/icons'

Unicon.add([uniLayerGroupMonochrome, uniCarWash])
Vue.use(Unicon)

new Vue({
  render: h => h(App)
}).$mount('#app')

App.vue

Use the name of icon without the uni prefix, icon style and in the kebab-case : uniCarWash -> car-wash uniLayerGroupMonochrome -> layer-group

<template>
  <div>
    <unicon name="car-wash" fill="limegreen"></unicon>
    <unicon name="layer-group" fill="royalblue" icon-style="monochrome></unicon>
  </div>
</template>

Add custom icons

No icons you need? No problem, you can add custom svg icons.

custom-icons.js

// Always use a prefix to avoid coincidence with existing icons.
export const myCustomIcon = {
  name: 'my-custom-icon',
  path: '<path d="M16.327 10.775a.312.312 0 0...</path>' // Copy everything inside the svg tag of the icon you want and past there
}

For correct positioning of svg icon please make sure that the icon to be added has viewBox="0 0 X X"

main.js

import Vue from 'vue'
import App from './App.vue'
import Unicon from 'vue-unicons'
import { uniConstructor, uniCarWash } from 'vue-unicons/src/icons'
import { myCustomIcon } from './custom-icons'

Unicon.add([uniConstructor, uniCarWash, myCustomIcon])
Vue.use(Unicon)

new Vue({
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div>
    <unicon name="constructor" fill="royalblue"></unicon>
    <unicon name="car-wash" fill="limegreen"></unicon>
    <unicon name="my-custom-icon" fill="royalblue" />
  </div>
</template>

See example

Props

Events

License

Vue Unicons licensed under MIT.

Unicons licensed under Apache 2.0