Oh, Vue Icons!

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

Features

Supports tree-shaking, which allows you to only import the used icons
Supports Vue 2 and Vue 3
Supports 30000+ icons from 20 popular icon packs, see here

Supported Icon Packs

Now the following 20 icon packs are supported:

Icon Pack	Prefix	License	Icon Numer
academicons	`ai`	SIL OFL 1.1	145
Bootstrap Icons	`bi`	MIT	1370
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	516
gameicons	`gi`	CC BY 3.0	4040
Heroicons	`hi`	MIT	460
Ionicons	`io`	MIT	1332
Line Awesome	`la`	MIT	1544
Material Design icons	`md`	Apache 2.0	9047
Octicons	`oi`	MIT	229
Pokemon Icons (Colorful)	`pi`	CC BY 4.0	1453
PrimeIcons	`pr`	MIT	202
Pixelarticons	`px`	MIT	460
Remix Icon	`ri`	Apache 2.0	2271
Simple Icons	`si`	CC0 1.0 Universal	1978
VSCode Icons (Colorful)	`vi`	CC BY-SA 4.0	1084
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

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.

Vue 2

// main.js
import Vue from "vue";
import App from "./App.vue";
import OhVueIcon from "oh-vue-icons";

import { FaFlag, RiZhihuFill } from "oh-vue-icons/icons";
OhVueIcon.add(FaFlag, RiZhihuFill);

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

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 Font Awesome
import * as FaIcons from "oh-vue-icons/icons/fa";

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

Vue 3

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import OhVueIcon from "oh-vue-icons/dist/v3/icon.es";

import { FaFlag, RiZhihuFill } from "oh-vue-icons/icons";
OhVueIcon.add(FaFlag, RiZhihuFill);

const app = createApp(App);
app.component("v-icon", OhVueIcon);
app.mount("#app");

Local Import

// Vue 2
import OhVueIcon from "oh-vue-icons";
// or Vue 3
import OhVueIcon from "oh-vue-icons/dist/v3/icon.es";

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.js

When using Nuxt.js, oh-vue-icons should be added to the transpile build option in nuxt.config.js:

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

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 vue-awesome and react-icons.
The website is hosted on Netlify.

License

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

bryansayler/oh-vue-icons