# @vue-hero-icons/outline

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

Latest version **1.7.2** (published 2021-03-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vue-hero-icons/outline
pnpm add @vue-hero-icons/outline
yarn add @vue-hero-icons/outline
bun add @vue-hero-icons/outline
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.7.2 |
| Published | 2021-03-02 |
| First published | 2020-03-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 101 |
| Author | Mathieu SCHIMMERLING |
| Maintainers | matschik |
| Keywords | icons, vuejs |

## Links

- npm: https://www.npmjs.com/package/@vue-hero-icons/outline
- Repository: https://github.com/matschik/vue-hero-icons
- Homepage: https://vue-hero-icons.netlify.com/
- npm.io page: https://npm.io/package/@vue-hero-icons/outline

## Dependencies (1)

- [babel-helper-vue-jsx-merge-props](https://npm.io/package/babel-helper-vue-jsx-merge-props.md) ^2.0.3

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 1.7.2 (latest) — 2021-03-02
- 1.7.1 — 2021-02-27
- 1.7.0 — 2021-02-23
- 1.6.3 — 2020-08-27
- 1.6.2 — 2020-08-09
- 1.6.1 — 2020-08-07
- 1.6.0 — 2020-08-06
- 1.5.0 — 2020-07-23
- 1.4.0 — 2020-05-27
- 1.3.0 — 2020-05-20
- 1.2.0 — 2020-04-26
- 1.1.0 — 2020-04-11
- 1.0.1 — 2020-03-09
- 1.0.0 — 2020-03-09

## README

# vue-hero-icons

> A set of free MIT-licensed high-quality SVG icons, sourced from [@tailwindlabs/heroicons](https://github.com/tailwindlabs/heroicons), as Vue functional components.

<a href="https://npmjs.org/package/@vue-hero-icons/outline">
  <img src="https://img.shields.io/npm/v/@vue-hero-icons/outline.svg"
       alt="npm version">
</a>
<a href="https://github.com/matschik/vue-hero-icons/blob/master/LICENSE">
  <img src="https://img.shields.io/npm/l/@vue-hero-icons/outline.svg"
       alt="license">
</a>
<br/>
Demo: https://vue-hero-icons.netlify.com/

## Install

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

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

## Usage

```js
// 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`.

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

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

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

## Tree shaking

By using ES imports like `import { AnnotationIcon } from "@vue-hero-icons/outline"` with [webpack + minifier](https://webpack.js.org/guides/tree-shaking/#minify-the-output) or Rollup, unused exports in this module will be automatically eliminated.

<!-- To make webpack tree shaking work without using any minifier, you can use the per-file icons from [`icons`](https://unpkg.com/vue-hero-icons/icons/) directory, e.g. `import AnnotationIcon from 'vue-hero-icons/icons/AnnotationIcon'`. -->

## Inspiration

- [vue-feather-icons](https://github.com/egoist/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](https://github.com/refactoringui), Released under the [MIT](./LICENSE) License.<br>

## Author

**vue-hero-icons** © [matschik](https://github.com/matschik), Released under the [MIT](./LICENSE) License.<br>
<!-- Authored and maintained by Matschik with help from contributors ([list](https://github.com/matschik/vue-hero-icons/contributors)). -->

> GitHub [@matschik](https://github.com/matschik) · Twitter [@matschik_](https://twitter.com/matschik_)

---
_Source: https://npm.io/package/@vue-hero-icons/outline · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._