open-index/open-npm huggingface dataset:
npm package: @iconicapp/iconic-react
Description: Iconic brings premium, “do wtf you want with” <a href="https://iconic.app/?utm_source=npm&utm_campaign=npm" target="_blank">pixel-perfect icons</a> right into React code, making your development process seamless. With over 1,400 icons available, you can f
Author: Chris Perzanowski
Latest version: 1.1.4

# Iconic React Package

Iconic brings premium, “do wtf you want with” <a href="https://iconic.app/?utm_source=npm&utm_campaign=npm" target="_blank">pixel-perfect icons</a> right into React code, making your development process seamless. With over 1,400 icons available, you can find exactly what you need for any project—whether it’s a sleek UI element or a fun emoji. We add new icons every week, so there’s always something fresh to work with.

## Features

- 🎨 1,400+ high-quality SVG icons
- ⚡️ Zero runtime dependencies
- 📦 Tree-shakeable
- 🎯 TypeScript support
- 🎨 Customizable size, color, and stroke width
- 🔄 Easy icon syncing
- 💼 Pro icons support with license key

## Installation

### Step 1:
```bash
# Using npm
npm install @iconicapp/iconic-react

# Using yarn
yarn add @iconicapp/iconic-react

# Using pnpm
pnpm add @iconicapp/iconic-react

```

### Step 2:

Sync to get free icons
```bash
npx iconic-react-sync
```

### Step 3:
Configure license key for pro icons

```bash
npx iconic-react configure --license-key YOUR_LICENSE_KEY
```

Note: If you don't have an Iconic Pro license key, you can get one at <a href="https://iconic.app/?utm_source=npm&utm_campaign=npm" target="_blank">iconic.app</a> or use the free icons.


### Step 4 (Optional):
If you notice that you're missing icons, run the following command to update your library


```bash
npx iconic-react-sync
```

## Quick Start

```jsx
import AcornIcon from './components/icons/AcornIcon';

function App() {
  return (
    <div>
      <AcornIcon size={24} stroke="#000000" />
      <AcornIcon size={32} stroke="#FF0000" />
    </div>
  );
}
```

## Icon Props

All icons accept the following props:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | number | 24 | Icon size in pixels |
| stroke | string | currentColor | Stroke color |
| color | string | transparent |  Color |

## Project Structure

```
/your-project
  /node_modules
    /iconic-react
  /src
    /components
      /icons
        /AcornIcon.tsx
        /HeartIcon.tsx
        /index.ts
```

## Troubleshooting

### Common Issues

1. **Icons not appearing**
   - Verify icons are in the correct directory (`src/components/icons/`)
   - Check component naming (PascalCase with optional "Icon" suffix)
   - Ensure proper imports

2. **Styling issues**
   - Verify prop types and values
   - Check CSS specificity
   - Ensure SVG viewBox is correct

## License

The Iconic React package is licensed under the MIT License. Pro icons require a valid license key.

---

Made with ❤️ by the Iconic team