Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

1000+ Pixel-perfect svg icons for your next project as Vue components
https://github.com/antonreshetov/vue-unicons

icon-pack icons iconset svg svg-icons vue vue-components vue-icons

Last synced: 19 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/antonreshetov/vue-unicons
Owner: antonreshetov
License: mit
Created: 2019-02-05T18:28:12.000Z (almost 6 years ago)
Default Branch: master
Last Pushed: 2021-11-24T02:12:10.000Z (almost 3 years ago)
Last Synced: 2024-10-09T17:28:11.381Z (about 1 month ago)
Topics: icon-pack, icons, iconset, svg, svg-icons, vue, vue-components, vue-icons
Language: Vue
Homepage: https://antonreshetov.github.io/vue-unicons/
Size: 23.1 MB
Stars: 998
Watchers: 16
Forks: 54
Open Issues: 18
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-starred - antonreshetov/vue-unicons - 1000+ Pixel-perfect svg icons for your next project as Vue components (vue)

README

        


  

  

  

  

  





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:



[![Donate via Patreon](https://img.shields.io/badge/donate-patreon-orange.svg?style=popout&logo=patreon)](https://www.patreon.com/antonreshetov)

[![Donate via PayPal](https://img.shields.io/badge/donate-paypal-blue.svg?style=popout&logo=paypal)](https://paypal.me/antonreshetov)

[![Donate via Bitcoin](https://img.shields.io/badge/donate-bitcoin-ff9900.svg?style=popout&logo=bitcoin&logoColor=CCC)](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