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:

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

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.