vue-hero-icons

For Vue3, install the official package @heroicons/vue

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

Demo: https://vue-hero-icons.netlify.com/

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'

See all icons and usage here: https://vue-hero-icons.netlify.com

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.

Inspiration

• vue-feather-icons

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Credits

heroicons © Refactoring UI, Released under the MIT License.

Author

vue-hero-icons © matschik, Released under the MIT License.

GitHub @matschik · Twitter @matschik_