Kholid060 / vue-heroicons

Vue component for 104 premium Heroicons-UI svg icons

Home Page:https://vue-heroicons.netlify.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

version license downloads

vue-heroicons [deprecated]

You can use vue-hero-icons instead. alt text Free 104 premium heroicons-ui SVG icons for your Vue.js project

Demo

https://vue-heroicons.netlify.com/

Installation

// NPM
npm i vue-heroicons

// Yarn
yarn add vue-heroicons

Usage

main.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

<template>
    <div id="app">
        <heroicon name="archive"></heroicon>
        <heroicon name="arrow-down" fill="green"></heroicon>
    </div>
</template>

Add custom icon

my-custom-icons.js

export const customIcon = { name: 'custom-icon', path: '<path d="M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z"/>' }

main.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

<template>
    <div id="app">
        <heroicon name="custom-icon"></heroicon>
    </div>
</template>

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

About

Vue component for 104 premium Heroicons-UI svg icons

https://vue-heroicons.netlify.com/


Languages

Language:Vue 59.8%Language:JavaScript 25.5%Language:CSS 8.6%Language:HTML 6.1%