1000+ Pixel-perfect svg unicons for your next project as Vue components
https://antonreshetov.github.io/vue-unicons
A simple way to add the necessary icons and install them.
Installing with npm is recommended and it works seamlessly with webpack.
npm i vue-unicons
You can download latest version from the Github: Download
To use in your project:
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>
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>
Installation in Nuxt is almost the same, except that you need to create a separate file in the plugins
folder:
plugins/vue-unicons.js
import Vue from 'vue'
import Unicon from 'vue-unicons'
import { uniLayerGroupMonochrome, uniCarWash } from 'vue-unicons/src/icons'
Unicon.add([uniLayerGroupMonochrome, uniCarWash])
Vue.use(Unicon)
Then we add the file path inside the plugins key in nuxt.config.js
, and set mode: 'client'
to make vue-unicons work only in a browser.
...
plugins: [
{ src: '~/plugins/vue-unicons', mode: 'client' }
]
...
Name | Description | Type | Accepted values | Default value |
---|---|---|---|---|
name |
Icon name | string |
- | - |
width |
Width of icon | string |
- | - |
height |
Height of icon | string |
- | - |
fill |
Fill color of icon | string |
HEX or color name | - |
icon-style |
Icon style | string |
line / monochrome | line |
Name | Description | Payload |
---|---|---|
click |
Triggered when icon was clicked | - |
Author: antonreshetov
Live Demo: https://antonreshetov.github.io/vue-unicons/
GitHub: https://github.com/antonreshetov/vue-unicons
#vuejs #javascript #vue-js