Overview

This project generates Chakra UI custom Icon components from Ion Icons (v5) svgs. It provides a convenient way to use Ion Icons with Chakra UI and offers features such as compatibility with Chakra style props, support for Chakra dark/light color modes, typescript integration, tree-shaking, and a preconfigured setup with TSDX.

Features

• Works with Chakra style props: The generated custom Icon components can utilize Chakra UI style props for easy customization.
• Works with Chakra dark/light color modes: The icons are compatible with Chakra UI’s dark and light color modes, allowing for seamless integration with the theme.
• Built-in TypeScript support: The project is implemented in TypeScript and provides type definitions for improved developer productivity and code quality.
• Treeshakable: The Icon components are tree-shakable, meaning that only the necessary parts of the code will be bundled in the final build, resulting in smaller file sizes.
• Bootstrapped with TSDX: The project is bootstrapped with TSDX, a zero-config TypeScript development setup, providing a streamlined development experience.

Installation

To use this project, follow these steps:

1. Install the package from NPM:

   npm install ion-icons-chakra
   

2. Drop the latest Ion Icons svgs into the /ionicons directory of your project.
3. Run the script to generate the custom Icon components:

   npm run generate-icons
   

4. The generated Icon components will be output as .tsx files in the same directory as the input svgs.

Summary

The ion-icons-chakra project provides a seamless integration between Ion Icons and Chakra UI. It offers a range of features, such as compatibility with Chakra style props and color modes, TypeScript support, and treeshakability. By following a few simple steps, developers can generate custom Icon components from Ion Icons svgs and easily incorporate them into their Chakra UI projects.