A Vue component for including inline SVG icons from the awesome Heroicons collection.
- Tree-shakable, which allows you to only import the used icons
- Includes outlined and solid icons
yarn add @d2pro/vue-heroicons
# or
npm install @d2pro/vue-heroicons
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.
// 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);
import VueHeroicon from "@d2pro/vue-heroicons/components/icon";
export default {
components: {
"h-icon": VueHeroicon
}
};
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).
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 |
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.
Contributions are welcomed, learn how to contribute here.
This project is inspired by and based on Oh Vue Icons! from Xiaohan Zou (@Renovamen).
This project is MIT licensed. Icons are taken from Heroicons, so check the license of that project accordingly.