npm package: @phyoofficial/phyo-icon-library
Description: A comprehensive React icon library with beautiful SVG icons
Author: Abhishek
Latest version: 1.0.8

# 🎨 Phyo Icon Library

<div align="center">

[![npm version](https://img.shields.io/npm/v/@phyoofficial/phyo-icon-library.svg)](https://www.npmjs.com/package/@phyoofficial/phyo-icon-library)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
[![React](https://img.shields.io/badge/React-16.8%2B-blue.svg)](https://reactjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)

**A comprehensive React icon library with 3,136 beautiful, high-quality SVG icons**

Perfect for React, Next.js, Vite, and modern web applications

[Installation](#-installation) • [Usage](#-usage) • [Icons](#-available-icons) • [Examples](#-examples) • [Documentation](#-documentation)

</div>

---

## ✨ Features

- 🎯 **3,136 Icons** - Comprehensive collection across 19 categories
- 📦 **Tree-shakeable** - Only bundle the icons you actually use
- 🎨 **Fully Customizable** - Control size, color, stroke, and all SVG properties
- 💪 **TypeScript Support** - Complete type definitions with IntelliSense
- ⚡ **Lightweight** - Optimized with React.memo for performance
- 🔧 **Framework Ready** - Works with React, Next.js 13+ (App Router), Vite, CRA
- 🌐 **SSR Compatible** - Full server-side rendering support
- 📱 **Responsive** - Perfect for mobile, tablet, and desktop
- 🎭 **"use client"** - Next.js App Router ready out of the box
- 🚀 **Zero Config** - Import and use, no setup required

---

## 📦 Installation

```bash
npm install @phyoofficial/phyo-icon-library
```

<details>
<summary>Other package managers</summary>

```bash
# Yarn
yarn add @phyoofficial/phyo-icon-library

# PNPM
pnpm add @phyoofficial/phyo-icon-library

# Bun
bun add @phyoofficial/phyo-icon-library
```

</details>

---

## 🚀 Quick Start

### Basic Usage

```jsx
import React from 'react';
import { ArrowDownBoxFill, HeartFill, StarFill } from '@phyoofficial/phyo-icon-library';

function App() {
  return (
    <div>
      <ArrowDownBoxFill width={24} height={24} />
      <HeartFill width={24} height={24} fill="red" />
      <StarFill width={24} height={24} color="blue" />
    </div>
  );
}

export default App;
```

### With TypeScript

```tsx
import React from 'react';
import { ArrowDownBoxFill, IconProps } from '@phyoofficial/phyo-icon-library';

const MyComponent: React.FC = () => {
  const iconProps: IconProps = {
    width: 24,
    height: 24,
    className: 'my-icon',
    fill: 'currentColor'
  };
  
  return <ArrowDownBoxFill {...iconProps} />;
};

export default MyComponent;
```

### Next.js 13+ App Router

```tsx
// app/page.tsx (Server Component - works out of the box!)
import { ArrowDownBoxFill, HeartFill } from '@phyoofficial/phyo-icon-library';

export default function Home() {
  return (
    <div className="p-8">
      <h1>Welcome</h1>
      <ArrowDownBoxFill className="w-6 h-6" />
      <HeartFill className="w-6 h-6 text-red-500" />
    </div>
  );
}
```

```tsx
// app/components/ClientButton.tsx (Client Component)
'use client';

import { HeartFill } from '@phyoofficial/phyo-icon-library';
import { useState } from 'react';

export default function LikeButton() {
  const [liked, setLiked] = useState(false);
  
  return (
    <button onClick={() => setLiked(!liked)}>
      <HeartFill 
        className="w-6 h-6"
        fill={liked ? 'red' : 'gray'}
      />
    </button>
  );
}
```

---

## 🎨 Customization

### Size

```jsx
// Using width and height
<ArrowDownBoxFill width={16} height={16} />
<ArrowDownBoxFill width={24} height={24} />
<ArrowDownBoxFill width={32} height={32} />
<ArrowDownBoxFill width={48} height={48} />

// Using className (with Tailwind)
<ArrowDownBoxFill className="w-4 h-4" />
<ArrowDownBoxFill className="w-6 h-6" />
<ArrowDownBoxFill className="w-8 h-8" />
<ArrowDownBoxFill className="w-12 h-12" />
```

### Color

```jsx
// Using fill prop
<HeartFill fill="red" />
<HeartFill fill="#3B82F6" />
<HeartFill fill="rgb(59, 130, 246)" />

// Using color prop
<StarFill color="gold" />

// Using currentColor (inherits text color)
<div className="text-blue-500">
  <HeartFill fill="currentColor" />
</div>

// Using Tailwind classes
<HeartFill className="text-red-500" fill="currentColor" />
```

### Advanced Styling

```jsx
// Inline styles
<ArrowDownBoxFill 
  style={{ 
    width: 24, 
    height: 24, 
    color: 'blue',
    cursor: 'pointer',
    transition: 'all 0.3s'
  }} 
/>

// CSS classes
<ArrowDownBoxFill className="icon-button hover:scale-110 transition-transform" />

// All SVG props are supported
<ArrowDownBoxFill
  width={24}
  height={24}
  fill="currentColor"
  stroke="black"
  strokeWidth={2}
  opacity={0.8}
  onClick={() => console.log('Clicked!')}
  onMouseEnter={() => console.log('Hover')}
/>
```

---

## 📚 Available Icons

The library includes **3,136 icons** organized into **19 categories**:

| Category | Icon Count | Examples |
|----------|----------:|----------|
| **Arrows** | 178 | ArrowDownBoxFill, ArrowUpCircleLine, ArrowLeftRightFill |
| **Buildings** | 62 | HomeFill, BuildingLine, HospitalFill |
| **Business** | 210 | BriefcaseFill, PieChartLine, BarChartFill |
| **Communication** | 92 | MailFill, PhoneLine, MessageCircleFill |
| **Design** | 232 | PencilFill, BrushLine, PaletteFill |
| **Development** | 62 | CodeBoxFill, TerminalLine, BugFill |
| **Device** | 172 | ComputerFill, PhoneLine, TabletFill |
| **Document** | 238 | FileFill, FolderLine, FileTextFill |
| **Editor** | 149 | BoldFill, ItalicLine, UnderlineFill |
| **Finance** | 172 | CoinFill, WalletLine, BankCardFill |
| **Food** | 32 | CakeFill, CoffeeLine, RestaurantFill |
| **Health & Medical** | 83 | HeartPulseFill, MedicineBottleLine, StethoscopeFill |
| **Logos** | 278 | FacebookFill, TwitterLine, GithubFill |
| **Map** | 170 | MapPinFill, CompassLine, RoadMapFill |
| **Media** | 292 | PlayCircleFill, PauseLine, VolumeUpFill |
| **Others** | 156 | LeafFill, FlowerLine, RocketFill |
| **System** | 348 | SettingsFill, SearchLine, CheckboxCircleFill |
| **User & Faces** | 128 | UserFill, UserGroupLine, AccountCircleFill |
| **Weather** | 82 | SunFill, MoonLine, CloudyFill |

### Icon Naming Convention

All icons follow a consistent naming pattern:

- **PascalCase**: `ArrowDownBoxFill`, `HeartFill`, `UserLine`
- **Suffix**: 
  - `-Fill`: Filled/solid version (e.g., `HeartFill`)
  - `-Line`: Outlined/line version (e.g., `HeartLine`)

### Finding Icons

**Browse All Icons:**
Run the icon browser app included in this repository:

```bash
# Clone the repo
git clone https://github.com/phyoofficial/phyo-icon-library.git
cd phyo-icon-library

# Install dependencies
npm install

# Start the browser
npm run dev
```

This will open a searchable icon browser where you can:
- 🔍 Search icons by name
- 📁 Browse by category
- 👁️ Preview icons
- 📋 Copy icon names

---

## 💡 Examples

### Navigation Menu

```jsx
import { 
  HomeFill, 
  UserFill, 
  SettingsFill, 
  MailFill 
} from '@phyoofficial/phyo-icon-library';

function Navigation() {
  return (
    <nav className="flex gap-4">
      <a href="/">
        <HomeFill className="w-6 h-6 text-blue-500" />
        Home
      </a>
      <a href="/profile">
        <UserFill className="w-6 h-6 text-blue-500" />
        Profile
      </a>
      <a href="/messages">
        <MailFill className="w-6 h-6 text-blue-500" />
        Messages
      </a>
      <a href="/settings">
        <SettingsFill className="w-6 h-6 text-blue-500" />
        Settings
      </a>
    </nav>
  );
}
```

### Button with Icon

```jsx
import { SearchLine, AddCircleFill, DeleteBinFill } from '@phyoofficial/phyo-icon-library';

function Buttons() {
  return (
    <div className="flex gap-2">
      <button className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded">
        <SearchLine className="w-5 h-5" />
        Search
      </button>
      
      <button className="flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded">
        <AddCircleFill className="w-5 h-5" />
        Add New
      </button>
      
      <button className="flex items-center gap-2 px-4 py-2 bg-red-500 text-white rounded">
        <DeleteBinFill className="w-5 h-5" />
        Delete
      </button>
    </div>
  );
}
```

### Interactive Icon

```jsx
import { HeartFill, HeartLine } from '@phyoofficial/phyo-icon-library';
import { useState } from 'react';

function LikeButton() {
  const [liked, setLiked] = useState(false);
  
  return (
    <button 
      onClick={() => setLiked(!liked)}
      className="p-2 hover:bg-gray-100 rounded-full transition"
    >
      {liked ? (
        <HeartFill className="w-6 h-6 text-red-500" />
      ) : (
        <HeartLine className="w-6 h-6 text-gray-400" />
      )}
    </button>
  );
}
```

### Loading State

```jsx
import { LoaderFill } from '@phyoofficial/phyo-icon-library';

function Loading() {
  return (
    <div className="flex items-center gap-2">
      <LoaderFill 
        className="w-5 h-5 animate-spin text-blue-500" 
      />
      <span>Loading...</span>
    </div>
  );
}
```

### Icon Grid

```jsx
import { 
  FacebookFill, 
  TwitterFill, 
  InstagramFill, 
  LinkedinFill,
  GithubFill,
  YoutubeFill 
} from '@phyoofficial/phyo-icon-library';

function SocialLinks() {
  return (
    <div className="flex gap-4">
      <a href="#" className="hover:scale-110 transition">
        <FacebookFill className="w-8 h-8 text-blue-600" />
      </a>
      <a href="#" className="hover:scale-110 transition">
        <TwitterFill className="w-8 h-8 text-sky-500" />
      </a>
      <a href="#" className="hover:scale-110 transition">
        <InstagramFill className="w-8 h-8 text-pink-500" />
      </a>
      <a href="#" className="hover:scale-110 transition">
        <LinkedinFill className="w-8 h-8 text-blue-700" />
      </a>
      <a href="#" className="hover:scale-110 transition">
        <GithubFill className="w-8 h-8 text-gray-800" />
      </a>
      <a href="#" className="hover:scale-110 transition">
        <YoutubeFill className="w-8 h-8 text-red-600" />
      </a>
    </div>
  );
}
```

---

## 🛠️ Development Setup

### Running the Icon Browser Locally

This repository includes a Vite + React app for browsing all icons:

```bash
# Clone the repository
git clone https://github.com/phyoofficial/phyo-icon-library.git
cd phyo-icon-library

# Install dependencies
npm install

# Start the development server
npm run dev
```

Open `http://localhost:5173` to browse all 3,136 icons with search functionality.

### Project Structure

```
phyo-icon-library/
├── icons/                    # Source SVG files
│   └── icons/               # Organized by category
│       ├── Arrows/
│       ├── Buildings/
│       ├── Business/
│       └── ...
├── lib/                     # Generated React components (JSX)
│   ├── index.js            # Main export file
│   ├── index.d.ts          # TypeScript definitions
│   └── [Category]/         # Component files by category
├── dist/                    # Bundled output (published to npm)
│   ├── index.js            # CommonJS bundle
│   ├── index.esm.js        # ES Module bundle
│   └── index.d.ts          # TypeScript definitions
├── src/                     # Icon browser app
│   ├── App.jsx             # Main app component
│   ├── IconGrid.jsx        # Icon display grid
│   └── main.jsx            # Entry point
├── scripts/                 # Build scripts
│   ├── generate-components.js  # Generates React components from SVGs
│   └── copy-icons.js           # Copies icons for browser app
├── package.json
├── rollup.config.js        # Bundler configuration
├── vite.config.js          # Vite configuration
└── README.md               # This file
```

### Build Scripts

```bash
# Generate React components from SVG files
npm run generate

# Bundle library with Rollup
npm run bundle

# Build complete library for publishing
npm run build:lib

# Run icon browser app
npm run dev

# Build icon browser app
npm run build
```

---

## 🔧 Framework Support

### ✅ React (Vite, CRA)

```jsx
import { HeartFill } from '@phyoofficial/phyo-icon-library';

function App() {
  return <HeartFill className="w-6 h-6" />;
}
```

### ✅ Next.js 13+ App Router (Server Components)

```tsx
// app/page.tsx - Works in Server Components!
import { ArrowDownBoxFill } from '@phyoofficial/phyo-icon-library';

export default function Page() {
  return <ArrowDownBoxFill className="w-6 h-6" />;
}
```

### ✅ Next.js 13+ App Router (Client Components)

```tsx
'use client';

import { HeartFill } from '@phyoofficial/phyo-icon-library';

export default function ClientComponent() {
  return <HeartFill className="w-6 h-6" />;
}
```

### ✅ Next.js 12 Pages Router

```tsx
// pages/index.tsx
import { StarFill } from '@phyoofficial/phyo-icon-library';

export default function Home() {
  return <StarFill className="w-6 h-6" />;
}
```

### ✅ Remix

```tsx
import { MusicFill } from '@phyoofficial/phyo-icon-library';

export default function Index() {
  return <MusicFill className="w-6 h-6" />;
}
```

### ✅ TypeScript

Full TypeScript support with IntelliSense:

```tsx
import { HeartFill, IconProps } from '@phyoofficial/phyo-icon-library';

const MyIcon: React.FC<IconProps> = (props) => {
  return <HeartFill {...props} />;
};
```

---

## 📖 API Reference

### IconProps

All icon components accept standard SVG props:

```typescript
import { SVGProps } from 'react';

type IconProps = SVGProps<SVGSVGElement>;
```

Common props:

| Prop | Type | Description |
|------|------|-------------|
| `width` | `number \| string` | Icon width |
| `height` | `number \| string` | Icon height |
| `fill` | `string` | Fill color |
| `stroke` | `string` | Stroke color |
| `strokeWidth` | `number \| string` | Stroke width |
| `className` | `string` | CSS class names |
| `style` | `CSSProperties` | Inline styles |
| `onClick` | `MouseEventHandler` | Click handler |
| `onMouseEnter` | `MouseEventHandler` | Mouse enter handler |
| `onMouseLeave` | `MouseEventHandler` | Mouse leave handler |
| ... | | All other SVG attributes |

---

## ❓ FAQ

<details>
<summary><strong>Q: How do I find the icon I need?</strong></summary>

**A:** Run the icon browser:
```bash
npm run dev
```
This opens a searchable interface with all 3,136 icons.
</details>

<details>
<summary><strong>Q: Does this work with Next.js 13+ App Router?</strong></summary>

**A:** Yes! The library includes `"use client"` directive and works in both Server and Client Components.
</details>

<details>
<summary><strong>Q: Will this increase my bundle size?</strong></summary>

**A:** No! The library is tree-shakeable. Only the icons you import will be included in your bundle. Each icon is ~1-2KB.
</details>

<details>
<summary><strong>Q: Can I use this with TypeScript?</strong></summary>

**A:** Absolutely! Full TypeScript definitions are included with IntelliSense support.
</details>

<details>
<summary><strong>Q: How do I change icon color?</strong></summary>

**A:** Use the `fill` prop or `className` with `fill="currentColor"`:
```jsx
<HeartFill fill="red" />
<HeartFill className="text-red-500" fill="currentColor" />
```
</details>

<details>
<summary><strong>Q: Can I animate the icons?</strong></summary>

**A:** Yes! Use CSS animations or libraries like Framer Motion:
```jsx
<LoaderFill className="animate-spin" />
```
</details>

<details>
<summary><strong>Q: Is Server-Side Rendering (SSR) supported?</strong></summary>

**A:** Yes! The library works perfectly with SSR in Next.js, Remix, and other frameworks.
</details>

---

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

---

## 📄 License

MIT License - see the [LICENSE](LICENSE) file for details.

---

## 🙏 Credits

This library is built on top of the amazing [Remix Icon](https://remixicon.com/) project.

---

## 📞 Support

- 📧 Email: abhishek@thepyromedia.com
- 🐛 Issues: [GitHub Issues](https://github.com/phyoofficial/phyo-icon-library/issues)
- 💬 Discussions: [GitHub Discussions](https://github.com/phyoofficial/phyo-icon-library/discussions)

---

## 🌟 Show Your Support

If you find this library helpful, please consider:
- ⭐ Starring the repository
- 🐦 Sharing on Twitter
- 📝 Writing a blog post
- 💖 Sponsoring the project

---

<div align="center">

**Made with ❤️ by [Phyo Official](https://github.com/phyoofficial)**

[⬆ Back to Top](#-phyo-icon-library)

</div>