# @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.

## Features

- **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

You can install the package using npm or yarn:

```bash
npm install @npm-questionpro/wick-ui-icon
# or
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/Globals CSS/Main
   ts/tsx/js/jsx:

   ```html
   <link rel="stylesheet" href="@npm-questionpro/wick-ui-icon/dist/wu-icon.css" />
   ```

   ```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-`, 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.
  - 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.
- `material-design-icons/`: Clone and update the Material Design icons repository using the provided scripts.

## Scripts

### Build the font

To generate the icon font and CSS file from the SVG icons, run:

```bash
npm run build
```

### Release

To release a new version, use the following commands:

- Patch release:

  ```bash
  npm run release:patch
  ```

- Minor release:

  ```bash
  npm run release:minor
  ```

- Major release:
  ```bash
  npm run release:major
  ```

### Material Icons

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:

  ```bash
  npm run mat:clone
  ```

- Update Material Design Icons and rebuild:
  ```bash
  npm run mat:update
  ```

## Development

### Requirements

- Node.js (v18 or later)
- pnpm (for managing dependencies)

### 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.

### Cleaning Up Unnecessary Files

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.