Oh, Vue Icons!

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 20 popular icon packs, see here

Supported Icon Packs

Now the following 20 icon packs are supported:

Icon Pack	Prefix	License	Counts
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 oh-vue-icons
# or
npm install oh-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 oh-vue-icons and install it into Vue in main.js. You can only import the icons you need to reduce the bundle size.

From v1.x, this library works for both Vue 2 & 3 within a single package.

Vue 3

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

import { OhVueIcon, addIcons } from "oh-vue-icons";
import { FaFlag, RiZhihuFill } from "oh-vue-icons/icons";

addIcons(FaFlag, RiZhihuFill);

const app = createApp(App);
app.component("v-icon", OhVueIcon);
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 "oh-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 { OhVueIcon, addIcons } from "oh-vue-icons";
import { FaFlag, RiZhihuFill } from "oh-vue-icons/icons";

addIcons(FaFlag, RiZhihuFill);

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

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

Local Import

import OhVueIcon from "oh-vue-icons";

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

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 oh-vue-icons as a plugin following Nuxt's documentation.

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

export default {
  // ...
  build: {
    transpile: ["oh-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 oh-vue-icons from pre-bundling (see #20 for details):

// vite.config.js

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

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

// vite.config.js

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

Contributing

Contributions are welcomed, see the contribution guides.

Acknowledgements

This project is inspired by and based on vue-awesome and react-icons
The website is built with Vitesse and hosted on Netlify

License

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

mikob/oh-vue-icons