feat(react-kivex): implement React wrapper with automated SVG generation

[Joseph4sure]

Overview

This PR implements react-kivex – a fully automated SVG-to-React icon generation system for the Kivex project.

Features

🎨 Automated Icon Generation

• SVG → React Component – Drop any .svg file into /icons, and a fully typed React component is generated automatically
• Smart file watching – npm run watch automatically regenerates components when SVGs are added, updated, or removed
• Orphan cleanup – Removed SVGs are automatically deleted from the component library

🧩 Developer Experience

• Diff-based writing – Only writes to disk when content changes, keeping Git diffs clean and builds fast
• Watch mode – npm run watch for instant regeneration during development
• Force flag – npm run generate -- --force to regenerate everything

📦 Package Architecture

• Shared IconBase – Centralized component that handles size, color, strokeWidth, and ref forwarding
• TypeScript support – Full type definitions including IconProps for consumers
• Clean exports – All icons are exported from src/index.ts automatically
• Build pipeline – Configured with tsup for ESM and CJS output

🧪 Development Tools

• Playground – Included for local testing and development
• Watch mode – npm run watch for instant regeneration

Technical Implementation

• Uses @svgr/core + @svgr/plugin-jsx for SVG to JSX transformation
• Custom template system (IconTemplate.ts) ensures consistent component structure
• chokidar for file watching with debounced regeneration
• fast-glob for efficient SVG file discovery
• fs-extra for file operations

🎨 Icon Component Props

Every icon (including Share) accepts the following props:

Prop	Type	Default	Description
size	number	24	Sets both width and height in pixels
color	string	'currentColor'	Sets the stroke/fill color
strokeWidth	number	2	Controls stroke width of paths
className	string	''	CSS class for styling
style	CSSProperties	undefined	Inline styles
onClick, onMouseEnter, etc.	(e) => void	undefined	Event handlers
aria-, data-	string	undefined	Accessibility/data attributes
ref	Ref	undefined	Forwarded to the element

All icons also forward any additional SVG attributes to the underlying <svg> element.

Example Usage

import { Home, Dashboard, User } from 'react-kivex';

function App() {
  return (
    <div>
      {/* Basic usage */}
      <Home />
      <Dashboard />
      <User />

      {/* With custom props */}
      <Home
        size={32}
        color="#ff6b6b"
        strokeWidth={1.5}
        className="icon-share"
        onClick={() => console.log('Shared!')}
      />

      {/* Different icons */}
      <User size={24} color="blue" />
      <Dashboard size={28} color="green" strokeWidth={2.5} />
    </div>
  );
}


## 📦 Installation & Usage

### For end users (once published)

```bash
npm install react-kivex
# or
pnpm add react-kivex
# or
yarn add react-kivex

Then import and use:

import { Share, Home, Dashboard } from 'react-kivex';

function App() {
  return (
    <div>
      <Share size={32} color="#ff6b6b" strokeWidth={1.5} />
      <Home size={24} color="blue" />
    </div>
  );
}

For local development (within this monorepo)

# From the package root
cd packages/react-kivex

# Install dependencies
npm install

# Generate icons from SVG source
npm run generate

# Start watch mode (auto‑regenerate on changes)
npm run watch

# Build the package (for publishing)
npm run build

Testing with the playground

cd playground
npm install
npm run dev

[MotionMind2007]

Thanks for this amazing contribution! Your icon generator script is really powerful and clean.

I've locally patched a few minor issues regarding Windows path formatting and SVG rendering, and everything is now working flawlessly in the playground.

Merging this now to add it to the repository and publish on npm. Appreciate your great work! 🚀🔥

[Joseph4sure]

The pleasure is all mine. ✌️

…

On Sun, Jul 5, 2026 at 4:29 PM MD. SAIFUL ALOM SIAM < ***@***.***> wrote: *MotionMind2007* left a comment (MotionMind2007/Kivex#1) <#1 (comment)> Thanks for this amazing contribution! Your icon generator script is really powerful and clean. I've locally patched a few minor issues regarding Windows path formatting and SVG rendering, and everything is now working flawlessly in the playground. Merging this now to add it to the repository and publish on npm. Appreciate your great work! 🚀🔥 — Reply to this email directly, view it on GitHub <#1?email_source=notifications&email_token=ANLPYMUGTVTM3F7EHMV2QTL5DJX6VA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTIOBYGY2TMMZVHA2KM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2KYZTPN52GK4S7MNWGSY3L#issuecomment-4886563584>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANLPYMXZLUYHNKPRIDPCF4L5DJX6VAVCNFSNUABGKJSXA33TNF2G64TZHMYTENBWGEZTEMBYGM5US43TOVSTWNBYGA4TQNRYGE4THILWAI> . Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS <https://github.com/notifications/mobile/ios/ANLPYMXSYXLNU62JOWCK2DT5DJX6VA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTIOBYGY2TMMZVHA2KM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2KUZTPN52GK4S7NFXXG> and Android <https://github.com/notifications/mobile/android/ANLPYMW7OUMHEXCQSHRSSPT5DJX6VA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTIOBYGY2TMMZVHA2KM4TFMFZW63VGMF2XI2DPOKSWK5TFNZ2K4ZTPN52GK4S7MFXGI4TPNFSA>. Download it today! You are receiving this because you authored the thread.Message ID: ***@***.***>