@phyoofficial/phyo-icon-library 1.0.4 → 1.0.6

package/README.md

@@ -1,24 +1,691 @@
-# Icon Library (Vite + React)
+# 🎨 Phyo Icon Library
 
-This is a minimal Vite + React app to browse the provided SVG icons and copy their raw SVG markup to the clipboard by clicking an icon.
+<div align="center">
 
-Quick start
+[![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/)
 
-1. Install dependencies
+**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
 ```
 
-2. Start dev server (this copies `icons/` into `public/icons` first)
+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" />;
+}
 ```
 
-Files of interest
+### ✅ 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)
 
-- `icons/` — extracted source SVGs (existing)
-- `public/icons/` — will be populated by `npm run prepare-icons`
-- `icons_summary.json` — generated summary with per-category icon lists
-- `src/` — Vite + React app
+</div>