🧩 DDK Icons

A modern, quirky, and scalable icon library for React, built with consistency and developer control in mind. Includes fully dynamic rendering, soft geometry, and full prop support for fill, stroke, and interaction.

🚀 Features

• ✅ Dynamic icon rendering via name (<DynamicIcon name="..." />)
• 🎨 Prop-driven fill, stroke, and toggle between filled/outlined
• 🧱 Modular icons — use individually or all via dynamic map
• 🌀 Quirky and soft visual language — clean for apps, design systems, and branding

📦 Installation

npm install ddk_icons

📚 Usage

🔹 Named Imports

import { HomeIcon, GroupIcon } from 'ddk_icons';

<HomeIcon className="w-6 h-6" fill="#002b5b" />
<GroupIcon filled={false} stroke="#294872" />

🔹 Dynamic Icon (by name)

import { DynamicIcon } from 'ddk_icons';

<DynamicIcon name="HomeIcon" fill="#002b5b" />
<DynamicIcon name="GroupIcon" filled={false} stroke="#999" />

🔧 Icon Props

| Prop | Type | Default | Description | | ----------- | --------- | ---------- | --------------------------------------------------- | | name | string | required | Icon name (used in DynamicIcon) | | className | string | '' | CSS utility classes (e.g., Tailwind) | | filled | boolean | true | Fill toggle: true for filled, false for outline | | fill | string | #002b5b | Fill color | | stroke | string | 'none' | Stroke/border color (used when filled={false}) | | ...props | any | | All other props passed to the <svg> element |

🎨 Included Icons

| Icon Name | Description | | ---------------- | ------------------------------------ | | HomeIcon | Soft modern house with center line | | GroupIcon | 3-person layout with center emphasis | | HomeIconQuirky | Abstract, quirky logo-style home |

➡️ More icons can be dynamically generated via the iconMap.js script.

⚙️ Developer Guide

🔁 Update icon map before publish

To sync all icon components with the dynamic map, run:

node generate-icon-map.js

This regenerates iconMap.js for use in DynamicIcon.

🧪 Test local changes

You can run npm link or npm pack to test your library in a local project before publishing.

🛠 Example Tile Component

export const Tile = ({ title, iconName }) => (
  <div className="flex items-center space-x-2 p-2 hover:bg-gray-100 rounded-lg">
    <span>{title}</span>
    <DynamicIcon
      name={iconName}
      className="w-6 h-6"
      fill="#002b5b"
      stroke="#ffffff"
      filled
    />
  </div>
);

📤 Publishing

npm version patch     # or minor/major
npm publish --access public

(Optional) Add this to package.json to always regenerate the map before publishing:

"scripts": {
  "prepublishOnly": "node generate-icon-map.js"
}

📁 Folder Structure

ddk_icons/
├── icons/
│   ├── HomeIcon.js
│   ├── GroupIcon.js
│   └── HomeIconQuirky.js
├── DynamicIcon.js
├── iconMap.js               # auto-generated
├── generate-icon-map.js     # generates iconMap.js
├── index.js                 # main export
└── README.md

🧠 TODO / Coming Soon

• [ ] Add more icons (settings, profile, arrow, etc.)
• [ ] Add TypeScript types
• [ ] Optional outline variants
• [ ] Category folders (e.g., /outline, /solid)
• [ ] Icon playground preview app

💙 License

MIT — free to use in commercial and personal projects.