1000+ Pixel-perfect svg [unicons](https://github.com/iconscout/unicons) for your next project as Vue components
## Supporting
Vue Unicons is open source project and completely free to use.
If you like the project, you can donate to support the development via the following methods:
[](https://www.patreon.com/antonreshetov)
[](https://paypal.me/antonreshetov)
[](https://blockchain.com/btc/payment_request?address=1GnNU7UGrXyKx5Zd3uDfhCLL716AYBJwAJ&amount=0.00010450&message=Contribution%20to%20massCode)
## Demo
[https://antonreshetov.github.io/vue-unicons](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.
```js
npm i vue-unicons
```
### Download
You can download latest version from the Github: [Download](https://github.com/antonreshetov/vue-unicons)
## 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`
**Vue 3**
```js
import { createApp } from 'vue'
import App from './App.vue'
import Unicon from 'vue-unicons'
import { uniLayerGroupMonochrome, uniCarWash } from 'vue-unicons/dist/icons'
Unicon.add([uniLayerGroupMonochrome, uniCarWash])
createApp(App).use(Unicon).mount('#app')
```
**Vue 2**
```js
import Vue from 'vue'
import App from './App.vue'
import Unicon from 'vue-unicons/dist/vue-unicons-vue2.umd'
import { uniLayerGroupMonochrome, uniCarWash } from 'vue-unicons/dist/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`
```html
```
### Config
You can configure the icons globally. Simply specify the required parameters during installation.
```js
...
createApp(App)
.use(Unicon, {
fill: 'deeppink',
height: 32,
width: 32
})
.mount('#app')
```
## Add custom icons
No icons you need? No problem, you can add custom svg icons.
`custom-icons.js`
```js
// Always use a prefix to avoid coincidence with existing icons.
export const myCustomIcon = {
name: 'my-custom-icon',
style: 'line',
path: '
```
[See example](https://codesandbox.io/s/vue-template-t8y1l)
## Nuxt
Installation in Nuxt is almost the same, except that you need to create a separate file in the `plugins` folder:
`plugins/vue-unicons.js`
```js
import Vue from 'vue'
import Unicon from 'vue-unicons/dist/vue-unicons-vue2.umd'
import { uniLayerGroupMonochrome, uniCarWash } from 'vue-unicons/dist/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.
```js
...
plugins: [
{ src: '~/plugins/vue-unicons', mode: 'client' }
]
...
```
```html
```
## Props
| 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 | - |
| `hover-fill` | Fill color on hover| `string` | HEX or color name | - |
| `icon-style` | Icon style | `string` | line / monochrome | line |
## Events
| Name | Description | Payload |
| ------- | ------------------------------- | ------- |
| `click` | Triggered when icon was clicked | - |
## License
Vue Unicons licensed under MIT.
[Unicons](https://github.com/iconscout/unicons) licensed under Apache 2.0