@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

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";

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.

Détail du package