vue-icon-packs

Vue SVG icon components.

Including icons from:
Hero Icons, Remix Icon, Octicons, Ionic Icons, Box Icons, Tabler Icons, Iconoir

Example usage:

// Import
import { ArrowRight } from 'vue-icon-packs/oc';

// and go
<ArrowRight />;

Install

$ yarn add vue-icon-packs

# or with npm
$ npm i vue-icon-packs

Usage

Search all icons here (Also includes useage instructions.)

search-vue-icon-packs.vercel.app

Import

Each icon pack is exported from its own subdirectory.
Use named imports:

import { ArrowRight } from 'vue-icon-packs/oc';
import { LocationSharp, Add } from 'vue-icon-packs/io';

Component tag

Pascal and kebop style supported:

<!-- pascal case -->
<ArrowRight />

<!-- kebob -->
<arrow-right />

Style

Components inherit size from the parent, as well as stroke and fill colors (where applicable).

So you can style directly, or have it inherit.

<!-- Red fill (inherited)-->
<span style="color: red">
  <ArrowUpFill />
</span>

<!-- Red stroke (applied directly)-->
<ArrowRightLine style="color: red" />

<!-- A big icon -->
<h1 style="font-size:12rem">
  <LeftArrow />
</h1>

Usage notes

Name Collisions

Icon names are equalized within each pack, but not between packs. In the case of name collisions, just alias the component on import:

import { Server } from 'vue-icon-packs/oc';

// Use `as` syntax to alias component name
import { Server as Server2 } from 'vue-icon-packs/ti';

Packs Info

Name	Site	License
Hero Icons	site	license
Remix Icon	site	license
Octicons	site	license
Ionic Icons	site	license
Box Icons	site	license
Tabler Icons	site	license
Iconoir	site	license