Skip to content

feat: add kivex-react-native package with auto‑generated icons#7

Open
Joseph4sure wants to merge 2 commits into
MotionMind2007:mainfrom
Joseph4sure:pr/kivex-react-native
Open

feat: add kivex-react-native package with auto‑generated icons#7
Joseph4sure wants to merge 2 commits into
MotionMind2007:mainfrom
Joseph4sure:pr/kivex-react-native

Conversation

@Joseph4sure

Copy link
Copy Markdown
Contributor

Summary

This PR adds a new package to the Kivex monorepo: kivex-react-native – an auto‑generated, type‑safe icon library for React Native.

It reads raw SVG files from the shared icons/ folder and produces dedicated React components for each icon, all wrapped in a consistent IconBase component that supports size, color, and strokeWidth props.

✨ Key Features

  • Auto‑generated – Run npm run generate to create all components from the latest SVGs.
  • Type‑safe – Every icon is a strongly‑typed React component with IconProps.
  • Consistent API – All icons accept size, color, and strokeWidth.
  • Multiple import styles – PascalCase (Home), camelCase (home), and an icons object for iteration.
  • Watcher supportnpm run watch automatically rebuilds icons when SVG sources change.

🧩 Package Structure

packages/kivex-react-native/
├── generator/
│ ├── build.ts # main generator script
│ ├── watch.ts # file watcher for auto-rebuild
│ └── IconTemplate.ts # component template
├── src/
│ ├── components/
│ │ └── IconBase.tsx # base SVG wrapper
│ ├── icons/ # auto‑generated .tsx files (do not edit)
│ ├── types/
│ │ └── IconProps.ts # shared props type
│ └── index.ts # main entry – exports all icons + aliases + icons object
├── package.json
└── README.md


---

## 📦 How to Use

Install the package in your React Native app:

```bash
npm install kivex-react-native

Then import and use any icon:

import { Home, Heart } from 'kivex-react-native';

<Home size={32} color="#3b82f6" strokeWidth={2} />

🔄 Generator Workflow

  1. Place .svg files in the shared icons/ folder (at the monorepo root).
  2. Run npm run generate inside the package to create all components.
  3. (Optional) Run npm run watch to automatically rebuild on SVG changes.

The generator reads every SVG, extracts the inner content, and wraps it in a forwardRef component using IconBase.


🧪 Testing

  • All icons were successfully generated from the existing SVG set.
  • Playground app (in playground/react-native-playground/) was updated to display the icons.
  • Components render correctly in both Expo and bare React Native environments.

🛠 Related Changes

  • Added playground/react-native-playground/ – a simple grid to preview all icons (optional, but included).
  • No changes to kivex_flutter or other packages – this PR is isolated to the React Native package.

📌 Checklist

  • Package added to packages/
  • Generator scripts working
  • All icons generated from shared SVGs
  • Exports include PascalCase, camelCase, and icons object
  • Playground updated (if applicable)

🔗 Related Issue / Discussion

Closes #(issue number) – if applicable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant