feat: add kivex-react-native package with auto‑generated icons#7
Open
Joseph4sure wants to merge 2 commits into
Open
feat: add kivex-react-native package with auto‑generated icons#7Joseph4sure wants to merge 2 commits into
Joseph4sure wants to merge 2 commits into
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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 consistentIconBasecomponent that supportssize,color, andstrokeWidthprops.✨ Key Features
npm run generateto create all components from the latest SVGs.IconProps.size,color, andstrokeWidth.Home), camelCase (home), and aniconsobject for iteration.npm run watchautomatically 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
Then import and use any icon:
🔄 Generator Workflow
.svgfiles in the sharedicons/folder (at the monorepo root).npm run generateinside the package to create all components.npm run watchto automatically rebuild on SVG changes.The generator reads every SVG, extracts the inner content, and wraps it in a
forwardRefcomponent usingIconBase.🧪 Testing
playground/react-native-playground/) was updated to display the icons.🛠 Related Changes
playground/react-native-playground/– a simple grid to preview all icons (optional, but included).kivex_flutteror other packages – this PR is isolated to the React Native package.📌 Checklist
packages/iconsobject🔗 Related Issue / Discussion
Closes #(issue number) – if applicable.