S4E Icon Library

S4E Icon Library is a customizable React icon library. Below are the steps to add, update, and publish icons in this library. https://www.npmjs.com/package/@s4e/icons

How to Use

1. Add a New SVG Icon

1. Place the new SVG file inside the src/icons folder.

2. Generate React Components

1. Run the following command to generate React components from the SVG files:

   npm run generate-icons

2. If a component already exists for the given SVG, it will be skipped.

3. Update Exports

1. Ensure that all generated components are exported in src/index.ts by running:

   npm run generate-exports

2. Existing exports will not be duplicated.

4. Build the Project

1. Compile the TypeScript files into JavaScript by running:

   npm run build

5. Update Version and Publish

1. Increment the version number and publish the package:

   npm version patch
   npm publish

Project Structure

src/
├── components/
│   ├── IconName/
│   │   └── index.tsx
├── icons/
│   ├── icon-name.svg
├── index.ts

Scripts Overview

• npm run generate-icons: Converts all SVG files in src/icons into React components.
• npm run generate-exports: Ensures all components are exported in src/index.ts.
• npm run build: Compiles TypeScript files to JavaScript.
• npm version patch: Updates the package version (patch level).
• npm publish: Publishes the package to NPM.

Additional Notes

• Ensure src/icons contains only valid SVG files.