Create React Icon Package

Create your own customizable SVG-based React icon package with create-react-icon-package. This package allows you to easily generate a custom SVG-based React icon package tailored to your needs, streamlining the process of creating, organizing, and distributing your own icon set for use in your React applications.

Table of Contents

1. Prerequisites
2. Installation
3. Usage
4. Customizing Your Icon Set
5. Semantic Versioning and Publishing with GitHub Actions
6. Setting up NPM_TOKEN and GITHUB_TOKEN
7. Using Semantic Release for Automatic Versioning and Publishing
8. Contributing

Prerequisites

Before using this package, ensure you have:

• A basic understanding of React
• Familiarity with npm and SVG icons
• Node.js and npm installed on your system

Installation

To use create-react-icon-package as a template for your own React icon package, clone this GitHub repository to your local machine:

git clone https://github.com/halilatilla/create-react-icon-package.git my-icon-package

This command will create a new folder called my-icon-package with the necessary files and configurations.

Usage

After cloning the repository, follow these steps to set up and customize your React icon package:

Navigate to the newly created folder:

cd my-icon-package

Install the dependencies:

npm install

Now you can start customizing your React icon package.

Customizing Your Icon Set

Inside the my-icon-package folder, you'll find a folder named icons. Place your SVG icons within this folder, then run the following command to build your React icon components:

npm run build

This command will generate React components for each SVG file within the icons folder and compile them into the dist directory.

Semantic Versioning and Publishing with GitHub Actions

The generated React icon package is configured to use Semantic Release and GitHub Actions for automatic versioning and publishing to npm. To set this up, follow these steps:

1. Push your icon package to a new GitHub repository.
2. Create an npm account and obtain an npm access token.
3. Add the NPM_TOKEN and GITHUB_TOKEN as secrets to your GitHub repository.

Setting up NPM_TOKEN and GITHUB_TOKEN

1. Log in to your npm account and navigate to the access tokens page.
2. Create a new token with "Read and Publish" permissions.
3. In your GitHub repository, navigate to the "Settings" tab and then to "Secrets".
4. Add the NPM_TOKEN secret using the token you generated from npm.
5. The GITHUB_TOKEN is automatically generated by GitHub, and you don't need to set it up manually.

Using Semantic Release for Automatic Versioning and Publishing

With GitHub Actions, the GITHUB_TOKEN and NPM_TOKEN environment variables are set up to automatically version and publish your project to npm. As a result, each push to the "main" branch will initiate the process of versioning and publishing your package to npm.

Contributing

If you would like to contribute to the create-react-icon-package project, feel free to submit issues and pull requests on the GitHub repository.

License

MIT License. See the LICENSE file for more information.