Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kodingdotninja/chakra-icons
Transform SVGs to React Chakra UI <Icon /> ✨
https://github.com/kodingdotninja/chakra-icons
chakra-icons chakra-ui chakra-ui-react component-generator generator icons react-component react-library reactjs svg-generator typescript
Last synced: about 2 months ago
JSON representation
Transform SVGs to React Chakra UI <Icon /> ✨
- Host: GitHub
- URL: https://github.com/kodingdotninja/chakra-icons
- Owner: kodingdotninja
- License: mit
- Created: 2021-08-26T18:52:35.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-18T03:51:29.000Z (9 months ago)
- Last Synced: 2024-05-15T04:40:37.335Z (4 months ago)
- Topics: chakra-icons, chakra-ui, chakra-ui-react, component-generator, generator, icons, react-component, react-library, reactjs, svg-generator, typescript
- Language: JavaScript
- Homepage: https://chakra-icons.pages.dev
- Size: 5.13 MB
- Stars: 97
- Watchers: 3
- Forks: 10
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-chakra-ui - create-chakra-icons
- awesome - kodingdotninja/chakra-icons - Transform SVGs to React Chakra UI \<Icon /> ✨ (JavaScript)
- awesome-made-by-indonesian - Chakra-Icons - `Transform SVG to React Chakra UI <Icon />` *by [Koding Ninja](https://github.com/kodingdotninja)* (C)
- made-in-indonesia - Chakra-Icons - `Transform SVG to React Chakra UI <Icon />` *by [Koding Ninja](https://github.com/kodingdotninja)* (C)
README
## Packages
| Name | Publishable | Version |
| ---- | ----------- | ------- |
| [create-chakra-icons](https://github.com/kodingdotninja/chakra-icons/tree/main/packages/create-chakra-icons) | ✅ | [](https://www.npmjs.com/package/create-chakra-icons) |
| [@tooling/msrconfig](https://github.com/kodingdotninja/chakra-icons/tree/main/tooling/msr.conf) | ❌ | |
| [@chakra-icons/cli](https://github.com/kodingdotninja/chakra-icons/tree/main/tooling/cli) | ✅ | [](https://www.npmjs.com/package/@chakra-icons/cli) |
| [@chakra-icons/bootstrap](https://github.com/kodingdotninja/chakra-icons/tree/main/packages/@chakra-icons/bootstrap) | ✅ | [](https://www.npmjs.com/package/@chakra-icons/bootstrap) [](https://bundlephobia.com/package/@chakra-icons/bootstrap) |
| [@chakra-icons/carbon](https://github.com/kodingdotninja/chakra-icons/tree/main/packages/@chakra-icons/carbon) | ✅ | [](https://www.npmjs.com/package/@chakra-icons/carbon) [](https://bundlephobia.com/package/@chakra-icons/carbon) |
| [@chakra-icons/cryptocurrency-icons](https://github.com/kodingdotninja/chakra-icons/tree/main/packages/@chakra-icons/cryptocurrency-icons) | ✅ | [](https://www.npmjs.com/package/@chakra-icons/cryptocurrency-icons) [](https://bundlephobia.com/package/@chakra-icons/cryptocurrency-icons) |
| [@chakra-icons/feather](https://github.com/kodingdotninja/chakra-icons/tree/main/packages/@chakra-icons/feather) | ✅ | [](https://www.npmjs.com/package/@chakra-icons/feather) [](https://bundlephobia.com/package/@chakra-icons/feather) |
| [@chakra-icons/flat-icon](https://github.com/kodingdotninja/chakra-icons/tree/main/packages/@chakra-icons/flat-icon) | ✅ | [](https://www.npmjs.com/package/@chakra-icons/flat-icon) [](https://bundlephobia.com/package/@chakra-icons/flat-icon) |
| [@chakra-icons/ionicons](https://github.com/kodingdotninja/chakra-icons/tree/main/packages/@chakra-icons/ionicons) | ✅ | [](https://www.npmjs.com/package/@chakra-icons/ionicons) [](https://bundlephobia.com/package/@chakra-icons/ionicons) |
| [@chakra-icons/octicons](https://github.com/kodingdotninja/chakra-icons/tree/main/packages/@chakra-icons/octicons) | ✅ | [](https://www.npmjs.com/package/@chakra-icons/octicons) [](https://bundlephobia.com/package/@chakra-icons/octicons) |
| [@chakra-icons/simple-line-icons](https://github.com/kodingdotninja/chakra-icons/tree/main/packages/@chakra-icons/simple-line-icons) | ✅ | [](https://www.npmjs.com/package/@chakra-icons/simple-line-icons) [](https://bundlephobia.com/package/@chakra-icons/simple-line-icons) |
| [@chakra-icons/tabler-icons](https://github.com/kodingdotninja/chakra-icons/tree/main/packages/@chakra-icons/tabler-icons) | ✅ | [](https://www.npmjs.com/package/@chakra-icons/tabler-icons) [](https://bundlephobia.com/package/@chakra-icons/tabler-icons) |
| [@chakra-icons/typicons](https://github.com/kodingdotninja/chakra-icons/tree/main/packages/@chakra-icons/typicons) | ✅ | [](https://www.npmjs.com/package/@chakra-icons/typicons) [](https://bundlephobia.com/package/@chakra-icons/typicons) |
## Contributing
Feel free to create issues, feature requests, and send pull requests.
### How to add new icons
1. Clone this repository:
```bash
git clone https://github.com/kodingdotninja/chakra-icons.git
```
1. Go to the project directory:
```bash
cd chakra-icons
```
1. Install dependencies:
```bash
pnpm install
```
1. Make a new package:
```bash
pnpm plop
```
1. Follow the prompt instructions:
```console
repository url : [link repo] e.g (https://github.com/twbs/icons)
path of svg icons : [the name of folder where the svg is stored] e.g (icons)
projects name : [name new package] e.g (bootstrap)
```
1. When it's done generating a new package, the package will be located in [`./packages/@chakra-icons`](https://github.com/kodingdotninja/chakra-icons/tree/main/packages/@chakra-icons).
1. Build the new package:
```bash
pnpm build
```
1. When build is completed without issues, you can submit a [pull request](https://github.com/kodingdotninja/chakra-icons/compare).
## Maintainers
- RiN ([@r17x](https://github.com/r17x))
- Griko Nibras ([@grikomsn](https://github.com/grikomsn))
## License
[MIT License, Copyright (c) 2023 Koding Ninja](./LICENSE)