English | 中文说明
A Vue component for including inline SVG icons from different popular icon packs easily.
- Works for both Vue 2
- Supports tree-shaking: only import the icons you want
- 30000+ icons from 21 popular icon packs, see here
Now the following 21 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 |
Element Plus Icons | el |
MIT | 294 |
Search for icons and view the documentation here.
yarn add oh-vue-2-icons
# or
npm install oh-vue-2-icons
Import oh-vue-2-icons
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 { 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')
import OhVueIcon from 'oh-vue-2-icons'
export default {
components: {
'v-icon': OhVueIcon
}
}
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.
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.
- This project is inspired by and based on vue-awesome and react-icons
This project is MIT licensed. Icons are taken from other projects, so check the license of each accordingly.