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


`

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

$3

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

`bash
npm run build
`

$3

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
`

$3

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

$3

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

$3

To develop locally, you can modify the SVG icons in the svg/ directory and run the build command to regenerate the font and CSS.

$3

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

$3

- Open Figma and download the required icons in SVG format.

$3

- Go to the Icomoon App.
- Upload the downloaded SVG icons.
- Verify that the icons render correctly.
- Download the generated package from Icomoon.

$3

Make sure the required dev dependencies are installed:

`bash
pnpm install -D svgo svgtofont
`

Run:

`bash
pnpm install
`

$3

`bash
pnpm build
`

$3

Choose the appropriate version update:

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

$3

`bash
git push
`

$3

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.