Hi, Vue Icons!

English | 中文说明

A Vue component for including inline SVG icons from different popular icon packs easily.

Features

• Works for both Vue 2 & 3
• Supports tree-shaking: only import the icons you want
• 30000+ icons from 21 popular icon packs, see here

Supported Icon Packs

Now the following 21 icon packs are supported:

| Icon Pack | Prefix | License | Counts | | ------------------------------------------------------------- | ------ | ------------------------------------------------------------- | ---------- | | Element Plus Icons | el | MIT | 294 | | academicons | ai | SIL OFL 1.1 | 149 | | Bootstrap Icons | bi | MIT | 1668 | | CoreUI Icons Free (Colorful) | co | CC BY 4.0 License | 1575 | | Cryptocurrency Icons (Colorful) | ci | CC0 1.0 Universal | 942 | | Font Awesome 5 Free | fa | CC BY 4.0 | 1610 | | Flat Color Icons (Colorful) | fc | MIT / Good Boy | 329 | | Flag Icon (Colorful)| fi | MIT | 530 | | gameicons | gi | CC BY 3.0 | 4052 | | Heroicons | hi | MIT | 460 | | Ionicons | io | MIT | 1332 | | Line Awesome | la | MIT / Good Boy | 1544 | | Material Design icons | md | Apache 2.0 | 10537 | | Octicons | oi | MIT | 259 | | Pokemon Icons (Colorful)| pi | CC BY 4.0 | 1453 | | PrimeIcons | pr | MIT | 238 | | Pixelarticons | px | MIT | 460 | | Remix Icon | ri | Apache 2.0 | 2271 | | Simple Icons | si | CC0 1.0 Universal | 2233 | | VSCode Icons (Colorful) | vi | CC BY-SA 4.0 | 1125 | | Weather Icons | wi | SIL OFL 1.1 | 219 |

Documentation

Search for icons and view the documentation here.

Installation

yarn add hi-vue-icons
# or
npm install hi-vue-icons

For Vue 2, you'll also need @vue/composition-api:

yarn add @vue/composition-api -D

Or if you are using Nuxt 2, you'll need @nuxtjs/composition-api instead:

yarn add @nuxtjs/composition-api -D

then add @nuxtjs/composition-api/module to the buildModules option in your nuxt.config.js, see here for details.

Import

Global Import

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

Vue 3

// main.js
import { createApp } from "vue";
import App from "./App.vue";

import { HiVueIcon, addIcons } from "hi-vue-icons";
import { FaFlag, RiZhihuFill } from "hi-vue-icons/icons";

addIcons(FaFlag, RiZhihuFill);

const app = createApp(App);
app.component("v-icon", HiVueIcon);
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 Font Awesome
import * as FaIcons from "hi-vue-icons/icons/fa";

const Fa = Object.values({ ...FaIcons });
addIcons(...Fa);

Vue 2

// main.js
import Vue from "vue";
import App from "./App.vue";

import { HiVueIcon, addIcons } from "hi-vue-icons";
import { FaFlag, RiZhihuFill } from "hi-vue-icons/icons";

addIcons(FaFlag, RiZhihuFill);

Vue.component("v-icon", HiVueIcon);

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

Local Import

import HiVueIcon from "hi-vue-icons";

export default {
  components: {
    "v-icon": HiVueIcon
  }
};

Usage

The icon names should be passed using kebab-case.

<template>
  <div>
    <v-icon name="fa-flag" />
    <v-icon name="ri-zhihu-fill" />
  </div>
</template>

For Font Awesome 5 icons, icons from regular pack have name prop values like fa-regular-flag. Icons from solid and brands pack have name prop values like fa-beer and fa-github.

See the documentation for more about the usage.

Props

| Name | Description | Type | Accepted Values | Default value | | ----------- | ---------------------------------------- | --------- | ------------------------------------------------------------- | -------------- | | scale | Icon size | number | / | 1 | | animation | Type of animation | string | wrench / ring / pulse / spin / spin-pulse / flash / float | / | | 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 | / | | fill | Fill color of icon | string | HEX color code or color name | currentColor | | label | Icon lable | string | / | / | | title | Icon title | string | / | / | | inverse | Make icon color white? | boolean | true / false | false |

Some examples could be found in the documentation.

Nuxt

When using Nuxt, you need to register hi-vue-icons as a plugin following Nuxt's documentation.

It should be noted that, hi-vue-icons should be added to the build.transpile option in your nuxt.config.js (see here for details):

export default {
  // ...
  build: {
    transpile: ["hi-vue-icons"]
  }
}

To render the icon component only on client-side, you may need to wrap it in a <client-only> tag:

<template>
  <div>
    <client-only>
      <v-icon name="fa-flag" />
      <v-icon name="ri-zhihu-fill" />
    </client-only>
  </div>
</template>

Vite

When using Vite, it is suggested to exclude hi-vue-icons from pre-bundling:

// vite.config.js

export default {
  // ...
  optimizeDeps: {
    exclude: ["hi-vue-icons/icons"]
  }
}

When using Vite's Server-Side Rendering (SSR) support (VuePress, Vite SSG, etc.), hi-vue-icons should be added to the ssr.noExternal option (see here for details):

// vite.config.js

export default {
  // ...
  ssr: {
    noExternal: ["hi-vue-icons"]
  }
}

Contributing

Contributions are welcomed, see the contribution guides.

Acknowledgements

• This project is inspired by and based on vue-awesome and react-icons

License

This project is MIT licensed. Icons are taken from other projects, so check the license of each accordingly.