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 |