oh-vue-2-icons
v1.6.0
Published
Include inline SVG icons from different popular icon packs in Vue 2.
Downloads
26
Maintainers
Readme
Oh, Vue Icons!
English | 中文说明
A Vue component for including inline SVG icons from different popular icon packs easily.
Features
- Works for both Vue 2
- Supports tree-shaking: only import the icons you want
- 30000+ icons from 21 popular icon packs, see here
Supported Icon Packs
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 |
Documentation
Search for icons and view the documentation here.
Installation
yarn add oh-vue-2-icons
# or
npm install oh-vue-2-icons
Import
Global Import
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.
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-2-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.
Acknowledgements
- This project is inspired by and based on vue-awesome and react-icons
License
This project is MIT licensed. Icons are taken from other projects, so check the license of each accordingly.