@npm-questionpro/wick-ui-icon 2.0.0-next.9 → 2.1.0-rc.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.
Files changed (5) hide show
  1. package/README.md +20 -33
  2. package/dist/wu-icon.css +4091 -3641
  3. package/dist/wu-icon.woff +0 -0
  4. package/dist/wu-icon.woff2 +0 -0
  5. package/package.json +1 -4
package/README.md CHANGED
@@ -1,19 +1,14 @@
1
1
  # @npm-questionpro/wick-ui-icon
2
2
 
3
- An icon font library featuring Material icons and custom icons for QuestionPro.
4
- This package generates a web font from SVG icons and provides the corresponding
5
- CSS for usage in web applications.
3
+ An icon font library featuring Material icons and custom icons for QuestionPro. This package generates a web font from
4
+ SVG icons and provides the corresponding CSS for usage in web applications.
6
5
 
7
6
  ## Features
8
7
 
9
- - **Material Symbols**: Includes icons from Google's Material Design Symbols
10
- (grad200 fill1 wight400 size24px).
11
- - **Custom Icons**: Allows you to include custom SVG icons by placing them in
12
- the appropriate folders.
13
- - **Web Font**: The icons are bundled as a web font for easy inclusion in web
14
- projects.
15
- - **CSS Integration**: The package generates a CSS file to easily style and use
16
- the icons.
8
+ - **Material Symbols**: Includes icons from Google's Material Design Symbols (grad200 fill1 wight400 size24px).
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.
17
12
 
18
13
  ## Installation
19
14
 
@@ -29,14 +24,11 @@ yarn add @npm-questionpro/wick-ui-icon
29
24
 
30
25
  ## Usage
31
26
 
32
- 1. **CSS Integration**: To use the icons in your project, include the
33
- `wu-icon.css` file in your HTML/Globals CSS/Main ts/tsx/js/jsx:
27
+ 1. **CSS Integration**: To use the icons in your project, include the `wu-icon.css` file in your HTML/Globals CSS/Main
28
+ ts/tsx/js/jsx:
34
29
 
35
30
  ```html
36
- <link
37
- rel="stylesheet"
38
- href="@npm-questionpro/wick-ui-icon/dist/wu-icon.css"
39
- />
31
+ <link rel="stylesheet" href="@npm-questionpro/wick-ui-icon/dist/wu-icon.css" />
40
32
  ```
41
33
 
42
34
  ```css
@@ -47,26 +39,23 @@ yarn add @npm-questionpro/wick-ui-icon
47
39
  import '@npm-questionpro/wick-ui-icon/dist/wu-icon.css'
48
40
  ```
49
41
 
50
- 2. **Font Classes**: After including the CSS file, you can use the icons by
51
- adding the corresponding class to an element. For example:
42
+ 2. **Font Classes**: After including the CSS file, you can use the icons by adding the corresponding class to an
43
+ element. For example:
52
44
 
53
45
  ```jsx
54
46
  <i className="wm-home"></i>
55
47
  <span className="wc-logo"></span>
56
48
  ```
57
49
 
58
- The class names follow the format `wc-{icon-name}`. Material icons will be
59
- prefixed with `wm-`, custom icons with `wc-`, production icons with `wp-`.
50
+ The class names follow the format `wc-{icon-name}`. Material icons will be prefixed with `wm-`, custom icons with
51
+ `wc-`, production icons with `wp-`.
60
52
 
61
53
  ## Directory Structure
62
54
 
63
- - `svg/`: Place your custom SVG icons in this folder. The folder structure will
64
- determine the icon name prefix.
65
- - For custom icons, upload all the svg files to icomoon and then download
66
- generated svgs. Put them in `custom` folder.
55
+ - `svg/`: Place your custom SVG icons in this folder. The folder structure will determine the icon name prefix.
56
+ - For custom icons, upload all the svg files to icomoon and then download generated svgs. Put them in `custom` folder.
67
57
  - `dist/`: Contains the generated font and CSS file.
68
- - `material-design-icons/`: Clone and update the Material Design icons
69
- repository using the provided scripts.
58
+ - `material-design-icons/`: Clone and update the Material Design icons repository using the provided scripts.
70
59
 
71
60
  ## Scripts
72
61
 
@@ -103,8 +92,7 @@ To release a new version, use the following commands:
103
92
 
104
93
  You can clone or update the Material Design icons using the following scripts:
105
94
 
106
- - Clone Material Design Icons. This will take a lot of time, so it's recommended
107
- to do it only once:
95
+ - Clone Material Design Icons. This will take a lot of time, so it's recommended to do it only once:
108
96
 
109
97
  ```bash
110
98
  npm run mat:clone
@@ -124,13 +112,12 @@ You can clone or update the Material Design icons using the following scripts:
124
112
 
125
113
  ### Local Development
126
114
 
127
- To develop locally, you can modify the SVG icons in the `svg/` directory and run
128
- the build command to regenerate the font and CSS.
115
+ To develop locally, you can modify the SVG icons in the `svg/` directory and run the build command to regenerate the
116
+ font and CSS.
129
117
 
130
118
  ### Cleaning Up Unnecessary Files
131
119
 
132
- During the build process, unnecessary files (like LESS, SCSS, and HTML files)
133
- will be removed to ensure a clean output.
120
+ During the build process, unnecessary files (like LESS, SCSS, and HTML files) will be removed to ensure a clean output.
134
121
 
135
122
  ---
136
123