https://github.com/halilatilla/create-react-icon-package
Create your own customizable SVG-based React icon package with create-react-icon-package.
https://github.com/halilatilla/create-react-icon-package
conventional-commits github github-actions icon npm npm-package react rollup semantic-release svg svgr typescript
Last synced: 4 months ago
JSON representation
Create your own customizable SVG-based React icon package with create-react-icon-package.
- Host: GitHub
- URL: https://github.com/halilatilla/create-react-icon-package
- Owner: halilatilla
- License: mit
- Created: 2023-03-18T20:13:09.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-26T11:27:44.000Z (almost 2 years ago)
- Last Synced: 2024-11-16T15:05:58.084Z (over 1 year ago)
- Topics: conventional-commits, github, github-actions, icon, npm, npm-package, react, rollup, semantic-release, svg, svgr, typescript
- Language: JavaScript
- Homepage:
- Size: 623 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Create React Icon Package
Create your own customizable SVG-based React icon package with `create-react-icon-package`. This powerful tool simplifies the process of generating, organizing, and distributing your custom icon set for React applications.
## Table of Contents
1. [Features](#features)
2. [Prerequisites](#prerequisites)
3. [Quick Start](#quick-start)
4. [Customizing Your Icon Set](#customizing-your-icon-set)
5. [Automatic Versioning and Publishing](#automatic-versioning-and-publishing)
6. [Contributing](#contributing)
7. [License](#license)
## Features
- Easy setup and configuration
- SVG to React component conversion
- Automatic versioning with Semantic Release
- GitHub Actions integration for CI/CD
- npm publishing automation
## Prerequisites
- Basic understanding of React
- Familiarity with npm and SVG icons
- Node.js and npm installed on your system
## Quick Start
1. Clone the repository:
```
git clone https://github.com/halilatilla/create-react-icon-package.git my-icon-package
```
2. Navigate to the project folder:
```
cd my-icon-package
```
3. Install dependencies:
```
npm install
```
4. Start customizing your icon package!
## Customizing Your Icon Set
1. Place your SVG icons in the `icons` folder.
2. Run the build command to generate React components:
```
npm run build
```
3. Find your compiled components in the `dist` directory.
## Automatic Versioning and Publishing
This package uses Semantic Release and GitHub Actions for automatic versioning and publishing to npm.
### Setting up tokens
1. Create an npm account and generate an access token with "Read and Publish" permissions.
2. In your GitHub repository, go to Settings > Secrets.
3. Add the `NPM_TOKEN` secret with your npm access token.
4. The `GITHUB_TOKEN` is automatically provided by GitHub Actions.
### Publishing workflow
- Each push to the "main" branch triggers the versioning and publishing process.
- Your package will be automatically published to npm with an appropriate version number based on your commit messages.
## Contributing
We welcome contributions! Please feel free to submit issues and pull requests on the [GitHub repository](https://github.com/halilatilla/create-react-icon-package).
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.