@npm-questionpro/wick-ui-icon 1.3.1 → 3.1.0
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 +16 -7
- package/dist/wu-icon.css +3758 -2316
- package/dist/wu-icon.eot +0 -0
- package/dist/wu-icon.svg +9014 -4688
- package/dist/wu-icon.ttf +0 -0
- package/dist/wu-icon.woff +0 -0
- package/dist/wu-icon.woff2 +0 -0
- package/package.json +3 -4
package/README.md
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
````markdown
|
|
2
1
|
# @npm-questionpro/wick-ui-icon
|
|
3
2
|
|
|
4
3
|
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
4
|
|
|
6
5
|
## Features
|
|
7
6
|
|
|
8
|
-
- **Material
|
|
7
|
+
- **Material Symbols**: Includes icons from Google's Material Design Symbols (grad200 fill1 wight400 size24px).
|
|
9
8
|
- **Custom Icons**: Allows you to include custom SVG icons by placing them in the appropriate folders.
|
|
10
9
|
- **Web Font**: The icons are bundled as a web font for easy inclusion in web projects.
|
|
11
10
|
- **CSS Integration**: The package generates a CSS file to easily style and use the icons.
|
|
@@ -21,29 +20,39 @@ pnpm add @npm-questionpro/wick-ui-icon
|
|
|
21
20
|
# or
|
|
22
21
|
yarn add @npm-questionpro/wick-ui-icon
|
|
23
22
|
```
|
|
24
|
-
````
|
|
25
23
|
|
|
26
24
|
## Usage
|
|
27
25
|
|
|
28
|
-
1. **CSS Integration**: To use the icons in your project, include the `wu-icon.css` file in your HTML:
|
|
26
|
+
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:
|
|
29
27
|
|
|
30
28
|
```html
|
|
31
|
-
<link
|
|
29
|
+
<link
|
|
30
|
+
rel="stylesheet"
|
|
31
|
+
href="@npm-questionpro/wick-ui-icon/dist/wu-icon.css"
|
|
32
|
+
/>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
```css
|
|
36
|
+
@import url("@npm-questionpro/wick-ui-icon/dist/wu-icon.css");
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
```jsx
|
|
40
|
+
import "@npm-questionpro/wick-ui-icon/dist/wu-icon.css";
|
|
32
41
|
```
|
|
33
42
|
|
|
34
43
|
2. **Font Classes**: After including the CSS file, you can use the icons by adding the corresponding class to an element. For example:
|
|
35
44
|
|
|
36
45
|
```jsx
|
|
37
46
|
<i className="wm-home"></i>
|
|
47
|
+
<span className="wc-logo"></span>
|
|
38
48
|
```
|
|
39
49
|
|
|
40
|
-
The class names follow the format `wc-{icon-name}`. Material icons will be prefixed with `wm-`,
|
|
50
|
+
The class names follow the format `wc-{icon-name}`. Material icons will be prefixed with `wm-`, custom icons with `wc-`, production icons with `wp-`.
|
|
41
51
|
|
|
42
52
|
## Directory Structure
|
|
43
53
|
|
|
44
54
|
- `svg/`: Place your custom SVG icons in this folder. The folder structure will determine the icon name prefix.
|
|
45
55
|
- `dist/`: Contains the generated font and CSS file.
|
|
46
|
-
- `.temp-svg/`: Temporary folder used for processing the SVG files.
|
|
47
56
|
- `material-design-icons/`: Clone and update the Material Design icons repository using the provided scripts.
|
|
48
57
|
|
|
49
58
|
## Scripts
|