Socket
Socket
Sign inDemoInstall

oh-vue-icons

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

oh-vue-icons

Include inline SVG icons from different popular icon packs in Vue easily.


Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created
Source

Oh, Vue Icons!

npm downloads license

English | 中文说明

A Vue component for including inline SVG icons from different popular icon packs easily.

 

Features

  • Tree-shakable, which allows you to only import the used icons
  • Supports Vue 2 and Vue 3
  • Supports 20000+ icons from 19 popular icon packs, see here

 

Supported Icon Packs

Now the following 19 icon packs are supported:

Icon PackPrefixLicenseIcon Numer
academiconsaiSIL OFL 1.1145
Bootstrap IconsbiMIT1325
CoreUI Icons Free (Colorful)coCC BY 4.0 License1583
Cryptocurrency Icons (Colorful)ciCC0 1.0 Universal892
Font Awesome 5 FreefaCC BY 4.01609
Flat Color Icons (Colorful)fcMIT / Good Boy329
Flag Icon (Colorful)fiMIT516
gameiconsgiCC BY 3.03927
HeroiconshiMIT452
IoniconsioMIT1332
Line AwesomelaMIT1544
OcticonsoiMIT209
Pokemon Icons (Colorful)piCC BY 4.01453
PrimeIconsprMIT202
PixelarticonspxMIT460
Remix IconriApache 2.02271
Simple IconssiCC0 1.0 Universal1872
VSCode Icons (Colorful)viCC BY-SA 4.01068
Weather IconswiSIL OFL 1.1219

 

Documentation

Search for icons and view the documentation here.

 

Installation

yarn add oh-vue-icons
# or
npm install oh-vue-icons

 

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.

Vue 2
// main.js
import Vue from "vue";
import App from "./App.vue";
import OhVueIcon from "oh-vue-icons";

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);
Vue 3
// main.js
import { createApp } from "vue";
import App from "./App.vue";
import OhVueIcon from "oh-vue-icons/dist/v3/icon.es";

import { FaFlag, RiZhihuFill } from "oh-vue-icons/icons";
OhVueIcon.add(FaFlag, RiZhihuFill);

const app = createApp(App);
app.component("v-icon", OhVueIcon);
app.mount("#app");

 

Local Import

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

NameDescriptionTypeAccepted ValuesDefault value
scaleIcon sizenumber/1
animationType of animationstringwrench / ring / pulse / spin / spin-pulse / flash / float/
speedAnimation speedstringslow / fast/
hoverEnable animation only when being hoveredbooleantrue / falsefalse
flipUsed to flip iconstringvertical / horizontal / both/
fillFill color of iconstringHEX color code or color namecurrentColor
labelIcon lablestring//
titleIcon titlestring//
inverseMake icon color white?booleantrue / falsefalse

Some examples could be found in the documentation.

 

Nuxt.js

When using Nuxt.js, oh-vue-icons should be added to the transpile build option in nuxt.config.js:

export default {
  // ...
  build: {
    transpile: ["oh-vue-icons"]
  }
}

or it will not be bundled, see Nuxt's documentation for details.

 

Contributing

Contributions are welcomed, learn how to contribute here.

 

Acknowledgements

 

License

This project is MIT licensed. Icons are taken from other projects, so check the license of each accordingly.

Keywords

FAQs

Package last updated on 27 Mar 2021

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc