@purposeinplay/feral-icons 0.1.0

package/README.md

@@ -0,0 +1,431 @@
+# @purposeinplay/feral-icons
+
+Custom React icon library with full tree-shaking support and TypeScript autocomplete.
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- 🎯 **Name-based API** - `<FeralIcon name="camera" />` - simple and clean
+- 🌲 **Tree-shakable** - Only imports what you use
+- 📦 **Tiny bundle** - ~0.3KB per icon gzipped
+- 🔷 **TypeScript** - Full type safety with icon name autocomplete
+- ⚡ **Fast** - Optimized SVGs with SVGO
+- 🎨 **Customizable** - Control size, color, and all SVG props
+- 🔧 **Easy to extend** - Add new icons by dropping SVG files
+
+## Installation
+
+```bash
+npm install @purposeinplay/feral-icons
+# or
+yarn add @purposeinplay/feral-icons
+# or
+pnpm add @purposeinplay/feral-icons
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { FeralIcon } from "@purposeinplay/feral-icons";
+
+function App() {
+  return (
+    <>
+      <FeralIcon name="arrow-left" size={24} />
+      <FeralIcon name="camera" fill="red" />
+      <FeralIcon name="user" className="text-blue-500" fill="#3B82F6" />
+    </>
+  );
+}
+```
+
+### With Dynamic Names
+
+```tsx
+import { FeralIcon, type IconName } from "@purposeinplay/feral-icons";
+
+function IconDisplay({ iconName }: { iconName: IconName }) {
+  return <FeralIcon name={iconName} size={24} />;
+}
+
+// Usage
+<IconDisplay iconName="camera" />;
+```
+
+### With Tailwind CSS
+
+Icons work seamlessly with Tailwind CSS color utilities:
+
+```tsx
+// Using Tailwind text color classes (recommended)
+<FeralIcon name="camera" className="text-blue-600" />
+<FeralIcon name="user" className="text-red-500 hover:text-red-700" />
+
+// Using Tailwind colors with fill prop
+<FeralIcon name="arrow-left" fill="rgb(59 130 246)" />
+
+// Responsive colors
+<FeralIcon name="camera" className="text-blue-500 md:text-purple-500" />
+```
+
+**Pro tip:** Since icons default to `fill="currentColor"`, you can control their color with Tailwind's `text-*` utility classes!
+
+## Props
+
+The `FeralIcon` component accepts these props:
+
+- `name: IconName` - **Required**. The icon name (e.g., `"camera"`, `"user"`, `"arrow-left"`)
+- `size?: number | string` - Icon size (default: 24)
+- `fill?: string` - Fill color (default: 'currentColor')
+- `className?: string` - Additional CSS classes
+- All standard SVG attributes (`onClick`, `onMouseEnter`, etc.)
+
+## Available Icons
+
+- `arrow-left` - Navigation arrow pointing left
+- `camera` - Camera icon
+- `user` - User profile icon
+
+All icon names are available as the `IconName` type for TypeScript autocomplete.
+
+## Tree-Shaking
+
+This library is fully tree-shakable. Only imported icons are included in your bundle.
+
+**Example bundle impact:**
+
+- Importing all icons: ~2KB gzipped
+- Importing single icon: ~0.3KB gzipped
+
+## Local Development & Testing
+
+### Test Locally with npm link
+
+```bash
+# In the @purposeinplay/feral-icons directory
+npm link
+
+# In your app directory
+npm link @purposeinplay/feral-icons
+```
+
+### Use in Your App
+
+```tsx
+import { FeralIcon } from "@purposeinplay/feral-icons";
+
+function MyComponent() {
+  return <FeralIcon name="arrow-left" size={32} fill="#3B82F6" />;
+}
+```
+
+## Adding New Icons
+
+### Quick Start
+
+1. **Add your SVG file** to the `svgs/` directory
+
+   ```bash
+   # Example: Add a new icon called "heart"
+   cp ~/Downloads/heart.svg svgs/heart.svg
+   ```
+
+2. **Build the library**
+
+   ```bash
+   npm run build
+   ```
+
+3. **Use your new icon**
+   ```tsx
+   <FeralIcon name="heart" size={24} />
+   ```
+
+That's it! The build process automatically:
+
+- ✅ Optimizes the SVG
+- ✅ Generates a React component (`Heart.tsx`)
+- ✅ Adds it to the icon registry
+- ✅ Updates TypeScript types for autocomplete
+
+### SVG Requirements
+
+Your SVG files should follow these guidelines:
+
+**Required:**
+
+- ✅ 24x24 viewBox (e.g., `viewBox="0 0 24 24"`)
+- ✅ Path-based design with filled paths (not strokes)
+- ✅ Kebab-case naming (e.g., `arrow-left.svg`, `user-circle.svg`)
+
+**Recommended:**
+
+- ✅ Use `fill="currentColor"` or no fill attribute (will inherit from parent)
+- ✅ Remove any `stroke` attributes (optimizer will strip them anyway)
+- ✅ Remove unnecessary attributes like `id`, `class`, `data-*`
+
+**Example SVG:**
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
+</svg>
+```
+
+### Icon Naming Convention
+
+SVG filenames are converted to icon names:
+
+- `arrow-left.svg` → `name="arrow-left"`
+- `user-circle.svg` → `name="user-circle"`
+- `chevron-down.svg` → `name="chevron-down"`
+
+Component names are PascalCase internally:
+
+- `arrow-left.svg` → `ArrowLeft` component
+- `user-circle.svg` → `UserCircle` component
+
+## Development Scripts
+
+### Main Commands
+
+```bash
+# Full build (clean + generate + compile)
+npm run build
+
+# Clean generated files (icons, registry, index)
+npm run clean
+
+# Generate components from SVGs (without building)
+npm run generate
+
+# Build and watch for changes
+npm run dev
+```
+
+### Development Workflow
+
+**Adding/updating icons:**
+
+```bash
+# 1. Add SVG to svgs/ directory
+cp new-icon.svg svgs/
+
+# 2. Full rebuild
+npm run build
+
+# 3. Icons are now available!
+```
+
+**During development:**
+
+```bash
+# Watch mode - rebuilds on changes
+npm run dev
+
+# In another terminal, run the demo
+cd demo
+npm run dev
+```
+
+### Testing Changes Locally
+
+```bash
+# In the icon library directory
+npm link
+
+# In your app directory
+npm link @purposeinplay/feral-icons
+
+# Make changes, rebuild, and test
+npm run build
+```
+
+## How It Works
+
+### Architecture Overview
+
+```
+User Code                Internal System              SVG Files
+─────────                ────────────────             ─────────
+
+<FeralIcon              →  iconRegistry               svgs/
+  name="camera"            {                           ├── arrow-left.svg
+  size={24}                 'camera': Camera,         ├── camera.svg
+/>                          'user': User,             └── user.svg
+                            ...                             ↓
+                          }                           [Build Process]
+                             ↓                              ↓
+                         Camera component            Generated Components
+                         renders with props          ├── ArrowLeft.tsx
+                                                     ├── Camera.tsx
+                                                     └── User.tsx
+```
+
+### Build Process
+
+When you run `npm run build`, here's what happens:
+
+1. **Clean** - Removes old generated files
+2. **Generate** - For each SVG in `svgs/`:
+   - Optimizes SVG with SVGO (removes strokes, dimensions, etc.)
+   - Extracts SVG path content
+   - Generates React component file
+   - Adds to icon registry
+   - Updates TypeScript types
+3. **Compile** - TypeScript generates `.d.ts` files
+4. **Bundle** - Vite creates ESM output with tree-shaking
+
+### File Structure
+
+```
+feral-icon-pack/
+├── svgs/                    # Source SVG files (you add here)
+│   ├── arrow-left.svg
+│   ├── camera.svg
+│   └── user.svg
+├── src/
+│   ├── icons/              # Generated (gitignored)
+│   │   ├── ArrowLeft.tsx
+│   │   ├── Camera.tsx
+│   │   └── User.tsx
+│   ├── shared/
+│   │   ├── Icon.tsx        # Base SVG wrapper
+│   │   └── types.ts        # Internal types
+│   ├── iconRegistry.ts     # Generated (gitignored)
+│   ├── FeralIcon.tsx       # Public component
+│   └── index.ts            # Generated (gitignored)
+├── dist/                   # Build output (gitignored)
+│   ├── index.js
+│   ├── index.d.ts
+│   ├── FeralIcon.js
+│   └── ...
+└── scripts/
+    ├── generate.ts         # SVG → React converter
+    └── optimize.ts         # SVGO configuration
+```
+
+### Package Exports
+
+Only these are exported publicly:
+
+```typescript
+// From @purposeinplay/feral-icons
+export { FeralIcon } from "./FeralIcon";
+export type { FeralIconProps, IconName } from "./FeralIcon";
+```
+
+Everything else (individual icon components, base Icon, internal types) stays internal for the registry system.
+
+## TypeScript Support
+
+This library is written in TypeScript and includes full type definitions.
+
+```tsx
+import { FeralIcon, type FeralIconProps, type IconName } from "@purposeinplay/feral-icons";
+
+// Type for icon props
+const CustomIconWrapper: React.FC<FeralIconProps> = (props) => {
+  return <FeralIcon {...props} />;
+};
+
+// Type for icon names (with autocomplete)
+const iconName: IconName = "camera"; // TypeScript will suggest: "arrow-left" | "camera" | "user"
+
+// Dynamic icon selection with type safety
+function DynamicIcon({ name }: { name: IconName }) {
+  return <FeralIcon name={name} size={24} />;
+}
+```
+
+**Available Types:**
+
+- `IconName` - Union type of all valid icon names (`"arrow-left" | "camera" | "user"`)
+- `FeralIconProps` - Props interface for the FeralIcon component (`name`, `size`, `fill`, `className`, etc.)
+
+## Browser Support
+
+- Modern browsers with ES2020 support
+- React 18.0.0 or higher
+- React 19.x supported
+
+## License
+
+MIT
+
+## Contributing
+
+### Adding Icons
+
+1. **Fork and clone** this repository
+2. **Add SVG files** to `svgs/` directory
+3. **Follow SVG requirements** (24x24, fill-based, kebab-case)
+4. **Build and test**
+   ```bash
+   npm run build
+   cd demo && npm run dev
+   ```
+5. **Commit and PR**
+   ```bash
+   git add svgs/your-icon.svg
+   git commit -m "Add your-icon"
+   ```
+
+### Guidelines
+
+- One icon per file
+- Use semantic names (`chevron-down`, not `icon-1`)
+- Test in the demo app before submitting
+- Include icon source/license if applicable
+
+## Troubleshooting
+
+### Icon not showing up?
+
+1. **Check the SVG file name**
+
+   ```bash
+   ls svgs/
+   # Should see your-icon.svg
+   ```
+
+2. **Rebuild the library**
+
+   ```bash
+   npm run build
+   ```
+
+3. **Check TypeScript autocomplete**
+   ```tsx
+   <FeralIcon name="your-icon" />
+   //              ^ Should autocomplete
+   ```
+
+### TypeScript errors?
+
+If you see `Type '"my-icon"' is not assignable to type 'IconName'`:
+
+1. Make sure you rebuilt: `npm run build`
+2. Restart your TypeScript server (VS Code: `Cmd+Shift+P` → "Restart TS Server")
+3. Check that `src/iconRegistry.ts` includes your icon
+
+### Icons look wrong?
+
+- Check SVG uses `fill` not `stroke`
+- Verify 24x24 viewBox
+- Remove hardcoded colors (use `fill="currentColor"`)
+
+### Demo not updating?
+
+```bash
+# Rebuild the library
+npm run build
+
+# Reinstall in demo
+cd demo
+npm install
+npm run dev
+```

package/dist/FeralIcon.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { iconRegistry } from "./iconRegistry.js";
+const FeralIcon = forwardRef(
+  ({ name, ...props }, ref) => {
+    const IconComponent = iconRegistry[name];
+    if (!IconComponent) {
+      console.warn(`[FeralIcon] Icon "${name}" not found in registry`);
+      return null;
+    }
+    return /* @__PURE__ */ jsx(IconComponent, { ref, ...props });
+  }
+);
+FeralIcon.displayName = "FeralIcon";
+export {
+  FeralIcon
+};
+//# sourceMappingURL=FeralIcon.js.map

package/dist/FeralIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeralIcon.js","sources":["../src/FeralIcon.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { iconRegistry, type IconName } from './iconRegistry';\nimport type { IconProps } from './shared/types';\n\nexport interface FeralIconProps extends IconProps {\n  name: IconName;\n}\n\nexport type { IconName };\n\nexport const FeralIcon = forwardRef<SVGSVGElement, FeralIconProps>(\n  ({ name, ...props }, ref) => {\n    const IconComponent = iconRegistry[name];\n\n    if (!IconComponent) {\n      console.warn(`[FeralIcon] Icon \"${name}\" not found in registry`);\n      return null;\n    }\n\n    return <IconComponent ref={ref} {...props} />;\n  }\n);\n\nFeralIcon.displayName = 'FeralIcon';\n\n"],"names":[],"mappings":";;;AAUO,MAAM,YAAY;AAAA,EACvB,CAAC,EAAE,MAAM,GAAG,MAAA,GAAS,QAAQ;AAC3B,UAAM,gBAAgB,aAAa,IAAI;AAEvC,QAAI,CAAC,eAAe;AAClB,cAAQ,KAAK,qBAAqB,IAAI,yBAAyB;AAC/D,aAAO;AAAA,IACT;AAEA,WAAO,oBAAC,eAAA,EAAc,KAAW,GAAG,MAAA,CAAO;AAAA,EAC7C;AACF;AAEA,UAAU,cAAc;"}

package/dist/iconRegistry.js

@@ -0,0 +1,12 @@
+import { ArrowLeft } from "./icons/ArrowLeft.js";
+import { Camera } from "./icons/Camera.js";
+import { User } from "./icons/User.js";
+const iconRegistry = {
+  "arrow-left": ArrowLeft,
+  "camera": Camera,
+  "user": User
+};
+export {
+  iconRegistry
+};
+//# sourceMappingURL=iconRegistry.js.map

package/dist/iconRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconRegistry.js","sources":["../src/iconRegistry.ts"],"sourcesContent":["// Auto-generated file. Do not edit manually.\nimport { ArrowLeft } from './icons/ArrowLeft';\nimport { Camera } from './icons/Camera';\nimport { User } from './icons/User';\nimport type { IconComponent } from './shared/types';\n\nexport const iconRegistry: Record<string, IconComponent> = {\n  'arrow-left': ArrowLeft,\n  'camera': Camera,\n  'user': User,\n};\n\nexport type IconName = 'arrow-left' | 'camera' | 'user';\n"],"names":[],"mappings":";;;AAMO,MAAM,eAA8C;AAAA,EACzD,cAAc;AAAA,EACd,UAAU;AAAA,EACV,QAAQ;AACV;"}

package/dist/icons/ArrowLeft.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Icon } from "../shared/Icon.js";
+const ArrowLeft = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(Icon, { ref, ...props, children: /* @__PURE__ */ jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z" }) });
+  }
+);
+ArrowLeft.displayName = "ArrowLeft";
+export {
+  ArrowLeft
+};
+//# sourceMappingURL=ArrowLeft.js.map

package/dist/icons/ArrowLeft.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowLeft.js","sources":["../../src/icons/ArrowLeft.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Icon } from '../shared/Icon';\nimport type { IconProps } from '../shared/types';\n\nexport const ArrowLeft = forwardRef<SVGSVGElement, IconProps>(\n  (props, ref) => {\n    return (\n      <Icon ref={ref} {...props}>\n        <path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z\"/>\n      </Icon>\n    );\n  }\n);\n\nArrowLeft.displayName = 'ArrowLeft';\n"],"names":[],"mappings":";;;AAIO,MAAM,YAAY;AAAA,EACvB,CAAC,OAAO,QAAQ;AACd,WACE,oBAAC,QAAK,KAAW,GAAG,OAClB,UAAA,oBAAC,QAAA,EAAK,GAAE,4DAAA,CAA2D,EAAA,CACrE;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;"}

package/dist/icons/Camera.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Icon } from "../shared/Icon.js";
+const Camera = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxs(Icon, { ref, ...props, children: [
+      /* @__PURE__ */ jsx("path", { d: "M12 15.2c1.77 0 3.2-1.43 3.2-3.2S13.77 8.8 12 8.8 8.8 10.23 8.8 12s1.43 3.2 3.2 3.2" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 2 7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5" })
+    ] });
+  }
+);
+Camera.displayName = "Camera";
+export {
+  Camera
+};
+//# sourceMappingURL=Camera.js.map

package/dist/icons/Camera.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Camera.js","sources":["../../src/icons/Camera.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Icon } from '../shared/Icon';\nimport type { IconProps } from '../shared/types';\n\nexport const Camera = forwardRef<SVGSVGElement, IconProps>(\n  (props, ref) => {\n    return (\n      <Icon ref={ref} {...props}>\n        <path d=\"M12 15.2c1.77 0 3.2-1.43 3.2-3.2S13.77 8.8 12 8.8 8.8 10.23 8.8 12s1.43 3.2 3.2 3.2\"/><path d=\"M9 2 7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5\"/>\n      </Icon>\n    );\n  }\n);\n\nCamera.displayName = 'Camera';\n"],"names":[],"mappings":";;;AAIO,MAAM,SAAS;AAAA,EACpB,CAAC,OAAO,QAAQ;AACd,WACE,qBAAC,MAAA,EAAK,KAAW,GAAG,OAClB,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,GAAE,sFAAA,CAAqF;AAAA,MAAE,oBAAC,QAAA,EAAK,GAAE,yJAAA,CAAwJ;AAAA,IAAA,GACjQ;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;"}

package/dist/icons/User.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Icon } from "../shared/Icon.js";
+const User = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(Icon, { ref, ...props, children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4" }) });
+  }
+);
+User.displayName = "User";
+export {
+  User
+};
+//# sourceMappingURL=User.js.map

package/dist/icons/User.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"User.js","sources":["../../src/icons/User.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Icon } from '../shared/Icon';\nimport type { IconProps } from '../shared/types';\n\nexport const User = forwardRef<SVGSVGElement, IconProps>(\n  (props, ref) => {\n    return (\n      <Icon ref={ref} {...props}>\n        <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4\"/>\n      </Icon>\n    );\n  }\n);\n\nUser.displayName = 'User';\n"],"names":[],"mappings":";;;AAIO,MAAM,OAAO;AAAA,EAClB,CAAC,OAAO,QAAQ;AACd,WACE,oBAAC,QAAK,KAAW,GAAG,OAClB,UAAA,oBAAC,QAAA,EAAK,GAAE,8GAAA,CAA6G,EAAA,CACvH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;"}

package/dist/index.js

@@ -0,0 +1,5 @@
+import { FeralIcon } from "./FeralIcon.js";
+export {
+  FeralIcon
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/shared/Icon.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const Icon = forwardRef(
+  ({ size = 24, fill = "currentColor", className = "", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill,
+        className,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Icon.displayName = "Icon";
+export {
+  Icon
+};
+//# sourceMappingURL=Icon.js.map

package/dist/shared/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../src/shared/Icon.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { IconProps } from \"./types\";\n\nconst Icon = forwardRef<\n  SVGSVGElement,\n  IconProps & { children: React.ReactNode }\n>(\n  (\n    { size = 24, fill = \"currentColor\", className = \"\", children, ...props },\n    ref\n  ) => {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        height={size}\n        viewBox=\"0 0 24 24\"\n        fill={fill}\n        className={className}\n        {...props}\n      >\n        {children}\n      </svg>\n    );\n  }\n);\n\nIcon.displayName = \"Icon\";\n\nexport { Icon };\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAAA,EAIX,CACE,EAAE,OAAO,IAAI,OAAO,gBAAgB,YAAY,IAAI,UAAU,GAAG,MAAA,GACjE,QACG;AACH,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,OAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,KAAK,cAAc;"}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@purposeinplay/feral-icons",
+  "version": "0.1.0",
+  "description": "Custom React icon library with tree-shaking support",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./icons/*": {
+      "types": "./dist/icons/*.d.ts",
+      "import": "./dist/icons/*.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rimraf dist src/icons src/index.ts",
+    "generate": "tsx scripts/generate.ts",
+    "build:lib": "tsc && vite build",
+    "build": "npm run clean && npm run generate && npm run build:lib",
+    "dev": "npm run generate && vite build --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "icons",
+    "svg",
+    "components"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/purposeinplay/feral-icon-pack.git"
+  },
+  "bugs": {
+    "url": "https://github.com/purposeinplay/feral-icon-pack/issues"
+  },
+  "homepage": "https://github.com/purposeinplay/feral-icon-pack#readme",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "knip": "^5.67.1",
+    "rimraf": "^6.1.0",
+    "svgo": "^4.0.0",
+    "tsx": "^4.20.6",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.0"
+  }
+}