@d2pro/vue-heroicons

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.