Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
oh-vue-icons
Advanced tools
A Vue component for including inline SVG icons from different icon packs in easily. Now the following icon packs are supported:
Icon Pack | Prefix | License | Icon Numer |
---|---|---|---|
academicons | ai | SIL OFL 1.1 | 145 |
Bootstrap Icons | bi | MIT | 1201 |
Cryptocurrency Icons (Colorful) | ci | CC0 1.0 Universal | 866 |
Font Awesome 5 (Free) | fa | CC BY 4.0 | 1609 |
Flat Color Icons (Colorful) | fc | MIT & Good Boy | 329 |
Flag Icon (Colorful) | fi | MIT | 516 |
gameicons | gi | CC BY 3.0 | 3927 |
Octicons | oi | MIT | 206 |
Pokemon Icons (Colorful) | pi | CC BY 4.0 | 1453 |
Remix Icon | ri | Apache 2.0 | 2271 |
Simple Icons | si | CC0 1.0 Universal | 1512 |
Weather Icons | wi | SIL OFL 1.1 | 219 |
Search for icons and view the documentation here.
yarn add oh-vue-icons
# or
npm install oh-vue-icons
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, for example:
// main.js
import Vue from 'vue'
import App from './App.vue'
import OhVueIcon from 'oh-vue-icons/components/Icon'
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)
import OhVueIcon from 'oh-vue-icons/components/Icon'
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 | / |
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.
Install dependencies:
yarn install
Fetch icon sources:
yarn submodule
Download some of the icons packs (gameicons
):
yarn download
Re-generate files under src/icons
automatically:
yarn build
Run docs:
yarn dev
This project is inspired by and based on Justineo/vue-awesome and react-icons.
This project is MIT licensed. Icons are taken from other projects, so check the license of each accordingly.
FAQs
Include inline SVG icons from different popular icon packs in Vue 2 & 3 easily.
The npm package oh-vue-icons receives a total of 4,542 weekly downloads. As such, oh-vue-icons popularity was classified as popular.
We found that oh-vue-icons demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.