npm package: @nandorojo/heroicons
Description: ```ts import { HeroOutline } from '@nandorojo/heroicons'
Latest version: 0.3.0

# 🫡 React Native Hero Icons

```ts
import { HeroOutline } from '@nandorojo/heroicons'

export const Icon = () => <HeroOutline.AcademicCap />
```

## Overview

- 😎 Free, beautiful icons
- 🔥 Customizable with `react-native-svg` props
- 🌲 Tree-shaken components
- 🤖 TypeScript support
- 📈 JS-only (+ works with Expo)

## About HeroIcons

<a href="https://heroicons.com/" target="_blank">
</a>

[Heroicons](https://heroicons.com/) is an awesome icon set made by the creators of [Tailwind CSS
](https://tailwindcss.com). This library exports React Native components for each of its free icons, since their repo only supports React and Vue.

## Example

See the [example snack 🍔](https://snack.expo.dev/@beatgig/hero-icons).

## Inspiration

This is a fork of my similar `iconic` icon set for React Native: https://github.com/nandorojo/react-native-iconic

## Installation

```sh
yarn add @nandorojo/heroicons react-native-svg
```

## Usage

There are 2 ways to import the icons:

### Import the Icons

**1. Single import**

```tsx
import { HeroOutline, HeroSolid, HeroSolid20 } from '@nandorojo/heroicons'

export const Icon = () => <HeroOutline.AcademicCap />
```

**2. Tree-shaken import**

Alternatively, you could import the icons individually.

While method 1 _should_ tree shake since it's configured to use ESM with tree shaking optimizations, this import method is a safer bet if you're concerned about tree shaking.

```tsx
import { AcademicCap } from '@nandorojo/heroicons/24/outline'

export const Icon = () => <AcademicCap />
```

The import paths are `20/solid`, `24/solid`, & `24/outline`.

You can also `import * as HeroOutline`:

```tsx
import * as HeroOutline from '@nandorojo/heroicons/24/outline'

export const Icon = () => <HeroOutline.AcademicCap />
```

For a full directory of components, see the [Hero Icons](https://heroicons.com) website.

### Custom color

```tsx
<AcademicCap color="black" />
```

### Custom size

```tsx
<AcademicCap height={30} width={30} />
```

## Props

Each icon component accepts all the props from `react-native-svg`'s `Svg` component. Reference [their docs](https://github.com/react-native-svg/react-native-svg#svg).

## How it works

This library uses `react-native-svg`. The components are generated by `svgr`. I downloaded all the free icons from [heroicons](https://heroicons.com) and [ran a script](https://github.com/nandorojo/react-native-heroicons/blob/master/generate/index.ts) to codegen the files from there.

## Contributing

Since Heroicons updates their icons somewhat frequently, you may want to import the new ones. These are the steps to update this library with new icons:

1. Fork this repo
2. Download the full folder of free icons from [heroicons.com](https://heroicons.com)'s GitHub repository
3. Replace the `generate/hero/optimized` folder with the the `optimized` folder from their repository
4. Run `yarn install` and `yarn prepare`
5. Commit your changes, and open a PR!

## Why

There weren't any answers on [this discussion](https://github.com/tailwindlabs/heroicons/discussions/627) so I decided to make it myself.

PS after building this, I found this [similar library](https://github.com/ecklf/react-native-heroicons) too.