@npm-questionpro/wick-ui-icon 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +108 -0
- package/dist/wu-icon.css +2329 -0
- package/dist/wu-icon.eot +0 -0
- package/dist/wu-icon.svg +6939 -0
- package/dist/wu-icon.ttf +0 -0
- package/dist/wu-icon.woff +0 -0
- package/dist/wu-icon.woff2 +0 -0
- package/package.json +42 -0
package/README.md
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
````markdown
|
|
2
|
+
# @npm-questionpro/wick-ui-icon
|
|
3
|
+
|
|
4
|
+
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.
|
|
5
|
+
|
|
6
|
+
## Features
|
|
7
|
+
|
|
8
|
+
- **Material Icons**: Includes icons from Google's Material Design Icons.
|
|
9
|
+
- **Custom Icons**: Allows you to include custom SVG icons by placing them in the appropriate folders.
|
|
10
|
+
- **Web Font**: The icons are bundled as a web font for easy inclusion in web projects.
|
|
11
|
+
- **CSS Integration**: The package generates a CSS file to easily style and use the icons.
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
You can install the package using npm or yarn:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @npm-questionpro/wick-ui-icon
|
|
19
|
+
# or
|
|
20
|
+
pnpm add @npm-questionpro/wick-ui-icon
|
|
21
|
+
# or
|
|
22
|
+
yarn add @npm-questionpro/wick-ui-icon
|
|
23
|
+
```
|
|
24
|
+
````
|
|
25
|
+
|
|
26
|
+
## Usage
|
|
27
|
+
|
|
28
|
+
1. **CSS Integration**: To use the icons in your project, include the `wu-icon.css` file in your HTML:
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<link rel="stylesheet" href="path-to-wick-ui-icon/dist/wu-icon.css" />
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
2. **Font Classes**: After including the CSS file, you can use the icons by adding the corresponding class to an element. For example:
|
|
35
|
+
|
|
36
|
+
```jsx
|
|
37
|
+
<i className="wm-home"></i>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
The class names follow the format `wc-{icon-name}`. Material icons will be prefixed with `wm-`, and custom icons with `wc-`.
|
|
41
|
+
|
|
42
|
+
## Directory Structure
|
|
43
|
+
|
|
44
|
+
- `svg/`: Place your custom SVG icons in this folder. The folder structure will determine the icon name prefix.
|
|
45
|
+
- `dist/`: Contains the generated font and CSS file.
|
|
46
|
+
- `.temp-svg/`: Temporary folder used for processing the SVG files.
|
|
47
|
+
- `material-design-icons/`: Clone and update the Material Design icons repository using the provided scripts.
|
|
48
|
+
|
|
49
|
+
## Scripts
|
|
50
|
+
|
|
51
|
+
### Build the font
|
|
52
|
+
|
|
53
|
+
To generate the icon font and CSS file from the SVG icons, run:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
npm run build
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Release
|
|
60
|
+
|
|
61
|
+
To release a new version, use the following commands:
|
|
62
|
+
|
|
63
|
+
- Patch release:
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
npm run release:patch
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
- Minor release:
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
npm run release:minor
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
- Major release:
|
|
76
|
+
```bash
|
|
77
|
+
npm run release:major
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Material Icons
|
|
81
|
+
|
|
82
|
+
You can clone or update the Material Design icons using the following scripts:
|
|
83
|
+
|
|
84
|
+
- Clone Material Design Icons. This will take a lot of time, so it's recommended to do it only once:
|
|
85
|
+
|
|
86
|
+
```bash
|
|
87
|
+
npm run mat:clone
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
- Update Material Design Icons and rebuild:
|
|
91
|
+
```bash
|
|
92
|
+
npm run mat:update
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## Development
|
|
96
|
+
|
|
97
|
+
### Requirements
|
|
98
|
+
|
|
99
|
+
- Node.js (v18 or later)
|
|
100
|
+
- pnpm (for managing dependencies)
|
|
101
|
+
|
|
102
|
+
### Local Development
|
|
103
|
+
|
|
104
|
+
To develop locally, you can modify the SVG icons in the `svg/` directory and run the build command to regenerate the font and CSS.
|
|
105
|
+
|
|
106
|
+
### Cleaning Up Unnecessary Files
|
|
107
|
+
|
|
108
|
+
During the build process, unnecessary files (like LESS, SCSS, and HTML files) will be removed to ensure a clean output.
|