Vue-Heroicons

This repo is a fork of vue-hicons. Use at your own discretion

Following is the original readme.

Project setup

npm i --save-dev @iwavesmedia/vue-heroicons

Why use Vue-Heroicons?

The answer to this question is very simple:

• Write less, do more
• It's easy to use and read
• More syntactic

What does this package solve for me?

If you use Heroicons you should write something like this:

<svg
    class="w-6 h-6"
    fill="currentColor"
    viewBox="0 0 20 20"
    xmlns="http://www.w3.org/2000/svg"
>
    <path
        d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"
    />
</svg>

With Vue-Heroicons you just have to write something like this:

<VueHeroicon
    name="academic_cap"
    is-filled
/>

How to import this dependency

To import the component correctly we have to use the following import in the component that we want to use

import VueHeroicon from "@iwavesmedia/vue-heroicons";

export default {
    components: {
        VueHeroicon
    }
}

Usage guide

| Prop | Type | Default | Required | | ---- | ---- | ------- | -------- | | class-icon | String | - | false | | clip-rule | String | nonzero | false | | clip-rule-path2 | String | - | false | | fill-color | String | none | false | | fill-rule | String | nonzero | false | | fill-rule-path2 | String | - | false | | is-filled | Boolean | false | false | | name | String | x | true | | size | String-Number | - | false | | stroke-color | String | #000 | false | | stroke-linecap | String | round | false | | stroke-linejoin | String | round | false | | stroke-width | Number | 2 | false | | view-box | String | 0 0 24 24 | false |

How to use filled icons?

Example:

<VueHeroicon
    name="archive"
    is-filled
/>

Supported icons

Heroicons: https://heroicons.dev/