@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:

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:

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

   @import url("@npm-questionpro/wick-ui-icon/dist/wu-icon.css");

   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:

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

npm run build

Release

To release a new version, use the following commands:

• Patch release:

  npm run release:patch

• Minor release:

  npm run release:minor

• Major release:

  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:

  npm run mat:clone

• Update Material Design Icons and rebuild:

  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.
• 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:

pnpm install -D svgo svgtofont

Run:

pnpm install

4. Build the Package

pnpm build

5. Version Update

Choose the appropriate version update:

pnpm version patch   # for bug fixes
pnpm version minor   # for new features
pnpm version major   # for breaking changes

6. Push to Repository

git push

7. Generate Icons

Run the icon generation script:

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.