Vue-Hicons

Project setup

npm i -s vue-hicons@latest

Why use Vue-Hicons?

Okey, the answer to this question is very simple:

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

What does this package solve for me?

Okey, 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>

But, with Vue-Hicons you just have to write something like this:

<VueHicons
  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 VueHicons from "vue-hicons"

And then we must add it in components

export default {
  components: {
    VueHicons
  }
}

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:

<VueHicons
  name="archive",
  is-filled
>

Supported icons

Heroicons: https://heroicons.dev/