@iconmu/react 0.0.2 → 0.0.4

package/README.md

@@ -1,6 +1,6 @@
 # @iconmu/react
 
-React component for Iconmu icon library.
+React component for the Iconmu icon library. This package provides a simple, flexible way to use Iconmu icons in your React applications with full TypeScript support.
 
 ## Installation
 
@@ -10,30 +10,212 @@ npm install @iconmu/react @iconmu/base-line
 bun add @iconmu/react @iconmu/base-line
 ```
 
-## Usage
+**Note:** You need both packages:
+- `@iconmu/react` - The React component that renders icons
+- `@iconmu/base-line` - The icon data package
 
-### Basic Usage
+## Quick Start
+
+Import the `Iconmu` component and an icon, then use it in your JSX:
 
 ```tsx
 import { Iconmu } from "@iconmu/react";
-import * as Line from "@iconmu/base-line";
+import { HomeIcon } from "@iconmu/base-line";
 
 function App() {
-  return <Iconmu icon={Line.ArrowBigUp} size={24} color="blue" />;
+  return <Iconmu icon={HomeIcon} size={24} />;
 }
 ```
 
-### With Different Styles
+**Important:** All icon names end with "Icon" (e.g., `HomeIcon`, `ActivityIcon`) to prevent naming conflicts with your own components.
+
+## Usage Patterns
+
+### Pattern 1: Named Import (Recommended)
+
+Import individual icons for optimal tree-shaking. Only the icons you import will be included in your bundle.
+
 ```tsx
 import { Iconmu } from "@iconmu/react";
-import { ArrowBigUp } from "@iconmu/base-solid";
+import { HomeIcon, ActivityIcon, SettingsIcon, UserIcon } from "@iconmu/base-line";
 
-function App() {
+function Navigation() {
+  return (
+    <nav>
+      <a href="/"><Iconmu icon={HomeIcon} size={20} /> Home</a>
+      <a href="/activity"><Iconmu icon={ActivityIcon} size={20} /> Activity</a>
+      <a href="/settings"><Iconmu icon={SettingsIcon} size={20} /> Settings</a>
+      <a href="/profile"><Iconmu icon={UserIcon} size={20} /> Profile</a>
+    </nav>
+  );
+}
+```
+
+**Benefits:**
+- Only imported icons are bundled
+- Clear dependencies in your code
+- IDE autocomplete works best
+
+### Pattern 2: Namespace Import
+
+Import all icons from a package as a namespace. Useful when you need many icons or want dynamic access.
+
+```tsx
+import { Iconmu } from "@iconmu/react";
+import * as Icons from "@iconmu/base-line";
+
+function IconGallery() {
+  return (
+    <div>
+      <Iconmu icon={Icons.HomeIcon} size={24} />
+      <Iconmu icon={Icons.ActivityIcon} size={24} />
+      <Iconmu icon={Icons.ArrowBigUpIcon} size={24} />
+    </div>
+  );
+}
+```
+
+**Benefits:**
+- Access any icon without additional imports
+- Good for icon pickers or dynamic UIs
+
+**Trade-off:** May include unused icons in bundle (depending on your bundler)
+
+### Pattern 3: Dynamic Icon Access
+
+Access icons dynamically using the namespace and string names:
+
+```tsx
+import { Iconmu } from "@iconmu/react";
+import * as LineIcons from "@iconmu/base-line";
+
+type IconName = "HomeIcon" | "ActivityIcon" | "SettingsIcon";
+
+function DynamicIcon({ name, size = 24 }: { name: IconName; size?: number }) {
+  const icon = LineIcons[name];
+  return <Iconmu icon={icon} size={size} />;
+}
+
+// Usage
+<DynamicIcon name="HomeIcon" size={32} />
+<DynamicIcon name="ActivityIcon" />
+```
+
+**Use cases:**
+- Icon configuration from CMS/database
+- User-customizable UI elements
+- Component libraries with icon props
+
+### Pattern 4: Using Different Icon Styles
+
+Iconmu provides 4 visual styles. Install and use multiple styles in the same project:
+
+```bash
+npm install @iconmu/base-line @iconmu/base-solid @iconmu/sharp-line @iconmu/sharp-solid
+```
+
+```tsx
+import { Iconmu } from "@iconmu/react";
+import { HomeIcon as HomeBaseLine } from "@iconmu/base-line";
+import { HomeIcon as HomeBaseSolid } from "@iconmu/base-solid";
+import { HomeIcon as HomeSharpLine } from "@iconmu/sharp-line";
+import { HomeIcon as HomeSharpSolid } from "@iconmu/sharp-solid";
+
+function StyleComparison() {
+  return (
+    <div className="flex gap-4 p-4">
+      <div className="text-center">
+        <Iconmu icon={HomeBaseLine} size={32} className="fill-neutral-950" />
+        <p className="text-xs mt-1">Base Line</p>
+      </div>
+      <div className="text-center">
+        <Iconmu icon={HomeBaseSolid} size={32} className="fill-neutral-950" />
+        <p className="text-xs mt-1">Base Solid</p>
+      </div>
+      <div className="text-center">
+        <Iconmu icon={HomeSharpLine} size={32} className="fill-neutral-950" />
+        <p className="text-xs mt-1">Sharp Line</p>
+      </div>
+      <div className="text-center">
+        <Iconmu icon={HomeSharpSolid} size={32} className="fill-neutral-950" />
+        <p className="text-xs mt-1">Sharp Solid</p>
+      </div>
+    </div>
+  );
+}
+```
+
+### Pattern 5: Conditional Rendering
+
+Use icons conditionally based on state:
+
+```tsx
+import { Iconmu } from "@iconmu/react";
+import { EyeOnIcon, EyeOffIcon } from "@iconmu/base-line";
+
+function PasswordInput() {
+  const [showPassword, setShowPassword] = useState(false);
+  
+  return (
+    <div className="relative">
+      <input type={showPassword ? "text" : "password"} />
+      <button onClick={() => setShowPassword(!showPassword)}>
+        <Iconmu 
+          icon={showPassword ? EyeOnIcon : EyeOffIcon} 
+          size={20} 
+        />
+      </button>
+    </div>
+  );
+}
+```
+
+### Pattern 6: With Custom Colors
+
+Apply colors using the `color` prop or Tailwind classes:
+
+```tsx
+import { Iconmu } from "@iconmu/react";
+import { HeartIcon, StarIcon } from "@iconmu/base-line";
+
+function Rating() {
   return (
-    <Iconmu
-      icon={ArrowBigUp}
-      size={48}
-    />
+    <div className="flex gap-2">
+      {/* Using color prop */}
+      <Iconmu icon={HeartIcon} size={24} color="#EF4444" />
+      
+      {/* Using Tailwind classes */}
+      <Iconmu icon={StarIcon} size={24} className="text-yellow-400 fill-yellow-400" />
+      <Iconmu icon={StarIcon} size={24} className="text-yellow-400 fill-yellow-400" />
+      <Iconmu icon={StarIcon} size={24} className="text-gray-300" />
+    </div>
   );
 }
 ```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `icon` | `{ content: string, viewBox: string }` | required | Icon object from icon packages |
+| `size` | `number` | `24` | Icon size in pixels (width and height) |
+| `color` | `string` | `"currentColor"` | Icon color (CSS color value) |
+| `className` | `string` | `""` | Additional CSS classes |
+
+## Icon Packages
+
+Available icon style packages:
+
+- `@iconmu/base-line` - Base line style icons
+- `@iconmu/base-solid` - Base solid style icons
+- `@iconmu/sharp-line` - Sharp line style icons
+- `@iconmu/sharp-solid` - Sharp solid style icons
+
+## Peer Dependencies
+
+- `react` >=16.8.0
+- `react-dom` >=16.8.0
+
+## License
+
+MIT

package/dist/components/Iconmu.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-type IconType = {
+export type IconType = {
     content: string;
     viewBox?: string;
 };

package/dist/components/Iconmu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Iconmu.d.ts","sourceRoot":"","sources":["../../src/components/Iconmu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,QAAQ,GAAG;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;AAElC,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,IAAI,EACJ,KAAsB,EACtB,SAAc,EACd,GAAG,KAAK,EACT,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAmBhC;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Iconmu.d.ts","sourceRoot":"","sources":["../../src/components/Iconmu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,QAAQ,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;AAElC,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,IAAI,EACJ,KAAsB,EACtB,SAAc,EACd,GAAG,KAAK,EACT,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAmBhC;AAED,eAAe,MAAM,CAAC"}

package/dist/index.d.ts

@@ -13,3 +13,4 @@ type IconProps = {
 declare function Iconmu({ icon, size, color, className, ...props }: IconProps): JSX.Element | null;
 
 export { Iconmu };
+export type { IconType };

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iconmu/react",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "React component for Iconmu icon library",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",