# oh-vue-icons > Include inline SVG icons from different popular icon packs in Vue 2 & 3 easily. Latest version **1.0.0-rc3** (published 2022-04-24) · MIT license · 0 weekly downloads ## Install ```sh npm install oh-vue-icons pnpm add oh-vue-icons yarn add oh-vue-icons bun add oh-vue-icons ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; large bundle. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0-rc3 | | Published | 2022-04-24 | | First published | 2020-12-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 43.8 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 254 | | Author | Renovamen | | Maintainers | renovamen | | Keywords | icons, vue, vue3, font awesome, remix icon, bootstrap icons, line awesome, octions, simple icons, heroicons, material design icons, ionicons | ## Links - npm: https://www.npmjs.com/package/oh-vue-icons - Repository: https://github.com/Renovamen/oh-vue-icons - Homepage: https://oh-vue-icons.js.org - Issues: https://github.com/Renovamen/oh-vue-icons/issues - npm.io page: https://npm.io/package/oh-vue-icons ## Dependencies (1) - [vue-demi](https://npm.io/package/vue-demi.md) ^0.12.5 ## Alternatives - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads - [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads - [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads - [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads - [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads ## Recent versions - 1.0.0-rc3 (latest) — 2022-04-24 - 1.0.0-rc2 — 2022-01-26 - 1.0.0-rc1 — 2021-10-13 - 0.4.7 — 2021-08-02 - 0.4.6 — 2021-07-24 - 0.4.5 — 2021-07-18 - 0.4.4 — 2021-07-11 - 0.4.3 — 2021-05-08 - 0.4.2 — 2021-04-14 - 0.4.1 — 2021-03-27 - 0.4.0 — 2021-03-27 - 0.3.1 — 2021-03-26 - 0.3.0 — 2021-03-24 - 0.2.2 — 2021-03-22 - 0.2.1 — 2021-03-14 - … 9 more at https://npm.io/package/oh-vue-icons/versions ## README # Oh, Vue Icons! [![npm](https://img.shields.io/npm/v/oh-vue-icons.svg?style=flat-square)](https://www.npmjs.com/package/oh-vue-icons) ![downloads](https://img.shields.io/npm/dw/oh-vue-icons.svg?style=flat-square) [![license](https://img.shields.io/badge/License-MIT-green?style=flat-square)](LICENSE) **English** | [中文说明](README-CN.md) A [Vue](https://vuejs.org/) 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)   ## Supported Icon Packs Now the following 20 icon packs are supported: | Icon Pack | Prefix | License | Counts | | ------------------------------------------------------------- | ------ | ------------------------------------------------------------- | ---------- | | [academicons](https://github.com/jpswalsh/academicons) | `ai` | [SIL OFL 1.1](http://scripts.sil.org/OFL) | 149 | | [Bootstrap Icons](https://github.com/twbs/icons) | `bi` | [MIT](https://github.com/twbs/icons/blob/main/LICENSE.md) | 1668 | | [CoreUI Icons Free](https://github.com/coreui/coreui-icons) (Colorful) | `co` | [CC BY 4.0 License](https://github.com/coreui/coreui-icons/blob/master/LICENSE) | 1575 | | [Cryptocurrency Icons](https://github.com/spothq/cryptocurrency-icons) (Colorful) | `ci` | [CC0 1.0 Universal](https://github.com/spothq/cryptocurrency-icons/blob/master/LICENSE.md) | 942 | | [Font Awesome 5 Free](https://github.com/FortAwesome/Font-Awesome) | `fa` | [CC BY 4.0](https://github.com/FortAwesome/Font-Awesome/blob/master/LICENSE.txt) | 1610 | | [Flat Color Icons](https://github.com/icons8/flat-color-icons) (Colorful) | `fc` | [MIT / Good Boy](https://github.com/icons8/flat-color-icons/blob/master/LICENSE.md) | 329 | | [Flag Icon](https://github.com/lipis/flag-icon-css) (Colorful)| `fi` | [MIT](https://github.com/lipis/flag-icon-css/blob/master/LICENSE) | 530 | | [gameicons](https://github.com/game-icons/icons) | `gi` | [CC BY 3.0](https://github.com/game-icons/icons/blob/master/license.txt) | 4052 | | [Heroicons](https://github.com/tailwindlabs/heroicons) | `hi` | [MIT](https://github.com/tailwindlabs/heroicons/blob/master/LICENSE) | 460 | | [Ionicons](https://github.com/ionic-team/ionicons) | `io` | [MIT](https://github.com/ionic-team/ionicons/blob/master/LICENSE) | 1332 | | [Line Awesome](https://github.com/icons8/line-awesome) | `la` | [MIT / Good Boy](https://github.com/icons8/line-awesome/blob/master/LICENSE.md) | 1544 | | [Material Design icons](https://github.com/google/material-design-icons) | `md` | [Apache 2.0](https://github.com/google/material-design-icons/blob/master/LICENSE) | 10537 | | [Octicons](https://github.com/primer/octicons) | `oi` | [MIT](https://github.com/primer/octicons/blob/main/LICENSE) | 259 | | [Pokemon Icons](https://github.com/TheArtificial/pokemon-icons) (Colorful)| `pi` | [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) | 1453 | | [PrimeIcons](https://github.com/primefaces/primeicons) | `pr` | [MIT](https://github.com/primefaces/primeicons/blob/master/LICENSE) | 238 | | [Pixelarticons](https://github.com/halfmage/pixelarticons) | `px` | [MIT](https://github.com/halfmage/pixelarticons/blob/master/LICENSE) | 460 | | [Remix Icon](https://github.com/Remix-Design/RemixIcon) | `ri` | [Apache 2.0](https://github.com/Remix-Design/RemixIcon/blob/master/License) | 2271 | | [Simple Icons](https://github.com/simple-icons/simple-icons) | `si` | [CC0 1.0 Universal](https://github.com/simple-icons/simple-icons/blob/develop/LICENSE.md) | 2233 | | [VSCode Icons](https://github.com/vscode-icons/vscode-icons) (Colorful) | `vi` | [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/) | 1125 | | [Weather Icons](https://github.com/erikflowers/weather-icons) | `wi` | [SIL OFL 1.1](http://scripts.sil.org/OFL) | 219 |   ## Documentation Search for icons and view the documentation [here](https://oh-vue-icons.js.org).   ## Installation ```bash yarn add oh-vue-icons # or npm install oh-vue-icons ``` For Vue 2, you'll also need `@vue/composition-api`: ```bash yarn add @vue/composition-api -D ``` Or if you are using [Nuxt 2](https://nuxtjs.org/), you'll need `@nuxtjs/composition-api` instead: ```bash yarn add @nuxtjs/composition-api -D ``` then add `@nuxtjs/composition-api/module` to the `buildModules` option in your `nuxt.config.js`, see [here](https://composition-api.nuxtjs.org/getting-started/setup) 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 ```js // 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: ```js // main.js // import Font Awesome import * as FaIcons from "oh-vue-icons/icons/fa"; const Fa = Object.values({ ...FaIcons }); addIcons(...Fa); ``` #### Vue 2 ```js // 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 ```js import OhVueIcon from "oh-vue-icons"; export default { components: { "v-icon": OhVueIcon } }; ```   ## Usage The icon names should be passed using **kebab-case**. ```html ``` For [Font Awesome 5](https://fontawesome.com/) 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](https://oh-vue-icons.js.orgdocs#basic-usage) 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](https://oh-vue-icons.js.orgdocs#examples).   ## Nuxt When using Nuxt, you need to register `oh-vue-icons` as a plugin following [Nuxt's documentation](https://nuxtjs.org/docs/directory-structure/plugins#vue-plugins). It should be noted that, `oh-vue-icons` should be added to the `build.transpile` option in your `nuxt.config.js` (see [here](https://nuxtjs.org/docs/directory-structure/plugins/#es6-plugins) for details): ```js export default { // ... build: { transpile: ["oh-vue-icons"] } } ``` To render the icon component only on client-side, you may need to wrap it in a `` tag: ```html ```   ## Vite When using [Vite](https://vitejs.dev/), it is suggested to exclude `oh-vue-icons` from pre-bundling (see [#20](https://github.com/Renovamen/oh-vue-icons/issues/20) for details): ```js // vite.config.js export default { // ... optimizeDeps: { exclude: ["oh-vue-icons/icons"] } } ``` When using Vite's [Server-Side Rendering (SSR)](https://vitejs.dev/guide/ssr.html) support ([VuePress](https://v2.vuepress.vuejs.org/), [Vite SSG](https://github.com/antfu/vite-ssg), etc.), `oh-vue-icons` should be added to the `ssr.noExternal` option (see [here](https://vitejs.dev/guide/ssr.html#ssr-externals) for details): ```js // vite.config.js export default { // ... ssr: { noExternal: ["oh-vue-icons"] } } ```   ## Contributing Contributions are welcomed, see the [contribution guides](CONTRIBUTING.md).   ## Acknowledgements - This project is inspired by and based on [vue-awesome](https://github.com/Justineo/vue-awesome) and [react-icons](https://github.com/react-icons/react-icons) - The [website](https://oh-vue-icons.js.org) is built with [Vitesse](https://github.com/antfu/vitesse) and hosted on [Netlify](https://www.netlify.com/)   ## License This project is [MIT](LICENSE) licensed. Icons are taken from [other projects](#supported-icon-packs), so check the license of each accordingly. --- _Source: https://npm.io/package/oh-vue-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._