Renovamen
Oh, 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 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 | 147 |
| Bootstrap Icons | bi |
MIT | 1522 |
| 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 | 10337 |
| Octicons | oi |
MIT | 250 |
| 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 | 2159 |
| VSCode Icons (Colorful) | vi |
CC BY-SA 4.0 | 1098 |
| 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-iconsFor Vue 2, you'll also need @vue/composition-api:
yarn add @vue/composition-api -DOr if you are using Nuxt 2, you'll need @nuxtjs/composition-api instead:
yarn add @nuxtjs/composition-api -Dthen 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.