Ecosyste.ms: Awesome

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

https://github.com/Kholid060/vue-heroicons

Vue component for 104 premium Heroicons-UI svg icons
https://github.com/Kholid060/vue-heroicons

icons svg-icons vue vue-components vue-icons vuejs

Last synced: about 2 months ago
JSON representation

Vue component for 104 premium Heroicons-UI svg icons

Lists

README 

        
![version](https://img.shields.io/npm/v/vue-heroicons) ![license](https://img.shields.io/npm/l/vue-heroicons) ![downloads](https://img.shields.io/npm/dw/vue-heroicons)



# vue-heroicons [deprecated]

You can use [vue-hero-icons](https://github.com/matschik/vue-hero-icons) instead.

![alt text](https://raw.githubusercontent.com/Kholid060/vue-heroicons/master/src/assets/Screenshot.png)

Free 104 premium [heroicons-ui](https://github.com/sschoger/heroicons-ui) SVG icons for your Vue.js project



## Demo

[https://vue-heroicons.netlify.com/](https://vue-heroicons.netlify.com/)



## Installation

```

// NPM

npm i vue-heroicons



// Yarn

yarn add vue-heroicons

```



## Usage

main.js

```js

import Vue from 'vue'

import HeroIcon from 'vue-heroicons'

import { archive, arrowDown } from 'vue-heroicons/src/icons'



HeroIcon.add([archive, arrowDown])

Vue.use(HeroIcon)

```

app.vue

```html



    


        

        

    



```



## Add custom icon

my-custom-icons.js

```js

export const customIcon = { name: 'custom-icon', path: '' }

```

main.js

```js

import Vue from 'vue'

import HeroIcon from 'vue-heroicons'

import { archive, arrowDown } from 'vue-heroicons/src/icons'

import { customIcon } from './my-custom-icons'



HeroIcon.add([archive, arrowDown, customIcon])

Vue.use(HeroIcon)

```

app.vue

```html



    


        

    



```



## Props



|  Name | Description  |  Type | Accepted values |

|---|---|---| --- |

|`name`  | Icon name  | `String`  | - |

|  `height` | Height of icon  | `String` | - |

| `width` | Width of icon | `String` | - |

| `fill` | Color of icon | `String` | HEX or color name |