Oh, Vue Icons!

English | 中文说明

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.