# 🎨 React Native Iconic

```ts
import { AnnotationDots } from '@nandorojo/iconic'

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

## Overview

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

## About Iconic

<a href="https://iconic.app" target="_blank">
<img width="1792" alt="Screen Shot 2022-07-13 at 4 44 18 PM" src="https://user-images.githubusercontent.com/13172299/178855403-47b09fd7-df60-4bf0-850e-1d59072a4f35.png">
</a>

[Iconic](https://iconic.app/) is an awesome icon set made by [@jamesm
](https://twitter.com/jamesm) and [@ormanclark](https://twitter.com/@ormanclark). It has 200+ free icons and a premium plan. This library exports React Native components for each of its free icons.

## Example

See the [example snack 🍔](https://snack.expo.dev/@nandorojo/273c1f).

## Installation

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

## Usage

Each icon is exported as its own component with an adjusted name.

For example, to use the `arrow-down` icon, import `ArrowDown`:

```tsx
import { ArrowDown } from '@nandorojo/iconic'
```

You can also `import * as Iconic`:

```tsx
import * as Iconic from '@nandorojo/iconic'

export const Icon = () => <Iconic.ArrowDown />
```

For a full directory of components, see the [Iconic](https://iconic.app/c/availability/free) website.

### Custom color

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

### Custom size

```tsx
<ArrowUp 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 [iconic.app](https://iconic.app) and [ran a script](/generate/index.ts) to codegen the files from there.

## Contributing

Since Iconic 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 [iconic.app](https://iconic.app)
3. Replace the `generate/iconic/svg` folder with the the `svg` folder you downloaded
4. Run `yarn install` and `yarn prepare`
5. Commit your changes, and open a PR!