A set of free MIT-licensed high-quality SVG icons as Vue functional components

by Vue.js Examples

vue-hero-icons

A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/heroicons, as Vue functional components.

View Demo View Github

Install

# Only outline icons
npm install @vue-hero-icons/outline

# Only solid icons
npm install @vue-hero-icons/solid

Usage

// Only import what you need!
import { AnnotationIcon, ArrowCircleUpIcon, ... } from '@vue-hero-icons/outline'

Sizing

By default, icons will be sized based on the font size of the parent element.

You can set a custom size using the size attribute.
For multiple based sizing, pass the desired multiple followed by an x.

<AnnotationIcon size="1.5x" class="custom-class" />

You can also set a px size directly by just passing an integer

<AnnotationIcon size="25" class="custom-class" />

Tree shaking

By using ES imports like import { AnnotationIcon } from "@vue-hero-icons/outline" with webpack + minifier or Rollup, unused exports in this module will be automatically eliminated.

GitHub