@npm-questionpro/wick-ui-icon 1.3.1 → 2.0.0-next.5

package/README.md

@@ -1,14 +1,19 @@
-````markdown
 # @npm-questionpro/wick-ui-icon
 
-An icon font library featuring Material icons and custom icons for QuestionPro. This package generates a web font from SVG icons and provides the corresponding CSS for usage in web applications.
+An icon font library featuring Material icons and custom icons for QuestionPro.
+This package generates a web font from SVG icons and provides the corresponding
+CSS for usage in web applications.
 
 ## Features
 
-- **Material Icons**: Includes icons from Google's Material Design Icons.
-- **Custom Icons**: Allows you to include custom SVG icons by placing them in the appropriate folders.
-- **Web Font**: The icons are bundled as a web font for easy inclusion in web projects.
-- **CSS Integration**: The package generates a CSS file to easily style and use the icons.
+- **Material Symbols**: Includes icons from Google's Material Design Symbols
+  (grad200 fill1 wight400 size24px).
+- **Custom Icons**: Allows you to include custom SVG icons by placing them in
+  the appropriate folders.
+- **Web Font**: The icons are bundled as a web font for easy inclusion in web
+  projects.
+- **CSS Integration**: The package generates a CSS file to easily style and use
+  the icons.
 
 ## Installation
 
@@ -21,30 +26,47 @@ pnpm add @npm-questionpro/wick-ui-icon
 # or
 yarn add @npm-questionpro/wick-ui-icon
 ```
-````
 
 ## Usage
 
-1. **CSS Integration**: To use the icons in your project, include the `wu-icon.css` file in your HTML:
+1. **CSS Integration**: To use the icons in your project, include the
+   `wu-icon.css` file in your HTML/Globals CSS/Main ts/tsx/js/jsx:
 
    ```html
-   <link rel="stylesheet" href="path-to-wick-ui-icon/dist/wu-icon.css" />
+   <link
+     rel="stylesheet"
+     href="@npm-questionpro/wick-ui-icon/dist/wu-icon.css"
+   />
    ```
 
-2. **Font Classes**: After including the CSS file, you can use the icons by adding the corresponding class to an element. For example:
+   ```css
+   @import url('@npm-questionpro/wick-ui-icon/dist/wu-icon.css');
+   ```
+
+   ```jsx
+   import '@npm-questionpro/wick-ui-icon/dist/wu-icon.css'
+   ```
+
+2. **Font Classes**: After including the CSS file, you can use the icons by
+   adding the corresponding class to an element. For example:
 
    ```jsx
    <i className="wm-home"></i>
+   <span className="wc-logo"></span>
    ```
 
-   The class names follow the format `wc-{icon-name}`. Material icons will be prefixed with `wm-`, and custom icons with `wc-`.
+   The class names follow the format `wc-{icon-name}`. Material icons will be
+   prefixed with `wm-`, custom icons with `wc-`, production icons with `wp-`.
 
 ## Directory Structure
 
-- `svg/`: Place your custom SVG icons in this folder. The folder structure will determine the icon name prefix.
+- `svg/`: Place your custom SVG icons in this folder. The folder structure will
+  determine the icon name prefix.
+  - For custom icons, upload all the svg files to icomoon and then download
+    generated svgs. Put them in `custom` folder.
 - `dist/`: Contains the generated font and CSS file.
-- `.temp-svg/`: Temporary folder used for processing the SVG files.
-- `material-design-icons/`: Clone and update the Material Design icons repository using the provided scripts.
+- `material-design-icons/`: Clone and update the Material Design icons
+  repository using the provided scripts.
 
 ## Scripts
 
@@ -81,7 +103,8 @@ To release a new version, use the following commands:
 
 You can clone or update the Material Design icons using the following scripts:
 
-- Clone Material Design Icons. This will take a lot of time, so it's recommended to do it only once:
+- Clone Material Design Icons. This will take a lot of time, so it's recommended
+  to do it only once:
 
   ```bash
   npm run mat:clone
@@ -101,8 +124,79 @@ You can clone or update the Material Design icons using the following scripts:
 
 ### Local Development
 
-To develop locally, you can modify the SVG icons in the `svg/` directory and run the build command to regenerate the font and CSS.
+To develop locally, you can modify the SVG icons in the `svg/` directory and run
+the build command to regenerate the font and CSS.
 
 ### Cleaning Up Unnecessary Files
 
-During the build process, unnecessary files (like LESS, SCSS, and HTML files) will be removed to ensure a clean output.
+During the build process, unnecessary files (like LESS, SCSS, and HTML files)
+will be removed to ensure a clean output.
+
+---
+
+# Icon Contribution Guide
+
+Follow the steps below to create and add a new icon to the project:
+
+## Steps
+
+### 1. Download SVG Icons
+
+- Open **Figma** and download the required icons in **SVG format**.
+
+### 2. Upload to Icomoon
+
+- Go to the [Icomoon App](https://icomoon.io/app/).
+- Upload the downloaded **SVG icons**.
+- Verify that the icons render correctly.
+- Download the generated package from Icomoon.
+
+### 3. Install Dependencies
+
+Make sure the required dev dependencies are installed:
+
+```bash
+pnpm install -D svgo svgtofont
+```
+
+Run:
+
+```bash
+pnpm install
+```
+
+### 4. Build the Package
+
+```bash
+pnpm build
+```
+
+### 5. Version Update
+
+Choose the appropriate version update:
+
+```bash
+pnpm version patch   # for bug fixes
+pnpm version minor   # for new features
+pnpm version major   # for breaking changes
+```
+
+### 6. Push to Repository
+
+```bash
+git push
+```
+
+### 7. Generate Icons
+
+Run the icon generation script:
+
+```bash
+node wickIcon.js
+```
+
+> ⚡ Make sure to run this command from the **wick-ui-lib** directory.
+
+---
+
+✅ Done! The new icons should now be available in the project.