Vue Heroicons

A Vue component for including inline SVG icons from the awesome Heroicons collection.

Features

• Tree-shakable, which allows you to only import the used icons
• Includes outlined and solid icons

Installation

yarn add @d2pro/vue-heroicons
# or
npm install @d2pro/vue-heroicons

Import

Global Import

Import @d2pro/vue-heroicons and install it into Vue in main.js. You can only import the icons you need to reduce the bundle size.

Vue 2

// main.js
import Vue from "vue";
import App from "./App.vue";
import VueHeroicons from "@d2pro/vue-heroicons/components/icon";

import { Archive, Ban, Check } from "@d2pro/vue-heroicons/icons";
VueHeroicons.add([Archive, Ban, Check]);

Vue.component("h-icon", VueHeroicons);

new Vue({
  render: h => h(App)
}).$mount("#app");

If you don't care about the bundle size and want to import a whole icon pack, you may should:

// main.js
import * as IconsOutlined from "@d2pro/vue-heroicons/icons/ho";
import * as IconsSolid from "@d2pro/vue-heroicons/icons/hs";

const ho = Object.values({ ...IconsOutlined });
const hs = Object.values({ ...IconsOutlined });

VueHeroicons.add(ho);
VueHeroicons.add(hs);

Local Import

import VueHeroicon from "@d2pro/vue-heroicons/components/icon";

export default {
  components: {
    "h-icon": VueHeroicon
  }
};

Usage

The icon names should be passed using kebab-case.

<template>
  <div>
    <v-icon name="arrow-left" />
    <v-icon name="arrow-narrow-left" solid />
  </div>
</template>

Check Heroicons project page for a complete list of all available icons (outlined and solid).

Props

| Name | Description | Type | Accepted Values | Default value | | ----------- | ---------------------------------------- | --------- | ------------------------------------------------------------- | -------------- | | name | Name of the icon (kebab-case) | string | Check Heroicons project page | | | solid | Use the 'solid' version of teh icon | boolean | true / false | false | | animation | Type of animation | string | wrench / ring / pulse / spin / spin-pulse / flash | | | speed | Animation speed | string | slow / fast | | | hover | Enable animation only when being hovered | boolean | true / false | false | | flip | Used to flip icon | string | vertical / horizontal / both | | | label | Icon label | string | | | | title | Icon title | string | | |

Nuxt.js

When using Nuxt.js for server side rendering, @d2pro/vue-heroicons should be added to the transpile build option in nuxt.config.js:

export default {
  // ...
  build: {
    transpile: ["@d2pro/vue-heroicons"]
  }
}

or it will not be bundled, see Nuxt's documentation for details.

Contributing

Contributions are welcomed, learn how to contribute here.

Acknowledgements

This project is inspired by and based on Oh Vue Icons! from Xiaohan Zou (@Renovamen).

License

This project is MIT licensed. Icons are taken from Heroicons, so check the license of that project accordingly.