Package Exports

oh-vue-icons

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (oh-vue-icons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Oh, Vue icons!

A Vue component for including inline SVG icons from different icon packs in easily. Now the following icon packs are supported:

fa - Font Awesome
ri - Remix Icon
ai - academicons

Some of the icons are resized for better and more consistent user experience.

See the demo here.

It is based on Justineo/vue-awesome, so check out that repo for more information.

Installation

`yarn` / `npm`

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

CDN

Add the following code to your HTML file:

<link href="https://cdn.jsdelivr.net/npm/oh-vue-icons@0.1.2/dist/oh-vue-icons.js" rel="stylesheet">

Download Manually

Download dist/oh-vue-icons.js and include it in your HTML file.

Usage

Import

Import oh-vue-icons in your Vue project:

import Vue from 'vue'

/* Import icons */

// only import the icons you use to reduce bundle size
import 'oh-vue-icons/icons/fa/flag'

// or import a certain icon pack, for example, Font Awesome
import 'oh-vue-icons/icons/fa'

// or import all icons if you don't care about bundle size
import 'oh-vue-icons/icons'

/* Register component */

import VueIcon from 'oh-vue-icons/components/Icon'

// globally (in your main.js file)
Vue.component('v-icon', VueIcon)

// or locally (in your component file)
export default {
  components: {
    'v-icon': VueIcon
  }
}

Use

Then you can display icons on your page:

<!-- basic -->
<v-icon name="fa/beer" />

<!-- with options -->
<v-icon name="fa/sync" scale="2" spin />
<v-icon name="ri/playstation-fill" flip="horizontal" />
<v-icon name="ai/google-scholar" label="Google Scholar" />

<!-- stacked icons -->
<v-icon label="No Photos">
  <v-icon name="fa/camera" />
  <v-icon name="fa/ban" scale="2" class="alert" />
</v-icon>

The icons are organized as follows:

Icons from Font Awesome, Remix Icon and academicons are located in icons/fa, icons/ri, icons/ai directory and the prefixes of their name prop values are fa, ri and ai.
For Font Awesome icons, icons from regular and brands are located in icons/fa/regular and icons/fa/brands directory, which have name prop values like fa/regular/flag or fa/brands/reddit. Icons from solid pack are located in icons/fa directory and have name prop values like fa/beer.

Development

Install dependencies:

yarn install
# or
npm install

Re-generate SVGs under assets/svg and files under src/icons automatically:

yarn icons

Run demo:

yarn dev

License

MIT

oh-vue-icons