@sj-distributor/react-iconfont-cli 2.0.3 → 2.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.
Files changed (3) hide show
  1. package/README.md +69 -34
  2. package/libs/iconfont.json +1 -1
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -1,5 +1,6 @@
1
1
  ## react-iconfont-cli
2
- 用纯JS把iconfont.cn的图标转换成React组件，不依赖字体，支持多色彩
2
+
3
+ 用纯 JS 把 iconfont.cn 的图标转换成 React 组件，不依赖字体，支持多色彩
3
4
 
4
5
  ![](https://github.com/fwh1990/react-iconfont-cli/blob/master/images/icons.png?raw=true)
5
6
 
@@ -9,10 +10,12 @@
9
10
  <br />
10
11
  2、支持渲染多色彩图标，支持自定义颜色
11
12
  <br />
12
- 3、自动化生成图标组件，支持es6和typescript两种文件格式
13
+ 3、自动化生成图标组件，支持 es6 和 typescript 两种文件格式
13
14
 
14
15
  ## Step 1
16
+
15
17
  安装插件
18
+
16
19
  ```bash
17
20
  # Yarn
18
21
  yarn add react-iconfont-cli --dev
@@ -22,64 +25,84 @@ npm install react-iconfont-cli --save-dev
22
25
  ```
23
26
 
24
27
  # Step 2
28
+
25
29
  生成配置文件
30
+
26
31
  ```bash
27
32
  npx iconfont-init
28
33
  ```
34
+
29
35
  此时项目根目录会生成一个`iconfont.json`的文件，内容如下：
36
+
30
37
  ```json
31
38
  {
32
- "symbol_url": "请参考README.md，复制官网提供的JS链接",
33
- "use_typescript": false,
34
- "save_dir": "./src/components/iconfont",
35
- "trim_icon_prefix": "icon",
36
- "unit": "px",
37
- "default_icon_size": 18
39
+ "symbol_url": "请参考README.md，复制官网提供的JS链接",
40
+ "use_typescript": false,
41
+ "save_dir": "./src/components/iconfont",
42
+ "trim_icon_prefix": "icon",
43
+ "unit": "px",
44
+ "default_icon_size": 18,
45
+ "can_import_react": true
38
46
  }
39
47
  ```
48
+
40
49
  ### 配置参数说明：
50
+
41
51
  ### symbol_url
42
- 请直接复制[iconfont](http://iconfont.cn)官网提供的项目链接。请务必看清是`.js`后缀而不是.css后缀。如果你现在还没有创建iconfont的仓库，那么可以填入这个链接去测试：`http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js`
52
+
53
+ 请直接复制[iconfont](http://iconfont.cn)官网提供的项目链接。请务必看清是`.js`后缀而不是.css 后缀。如果你现在还没有创建 iconfont 的仓库，那么可以填入这个链接去测试：`http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js`
43
54
 
44
55
  <br />
45
56
 
46
57
  ![](https://github.com/fwh1990/react-iconfont-cli/blob/master/images/symbol-url.png?raw=true)
47
58
 
48
59
  ### use_typescript
49
- 如果您的项目使用Typescript编写，请设置为true。这个选项将决定生成的图标组件是`.tsx`还是`.js`后缀。
50
60
 
51
- 当该值为false时，我们会为您的图标生成`.js`和`.d.ts`两个文件，以便您能享受到最好的开发体验。
61
+ 如果您的项目使用 Typescript 编写，请设置为 true。这个选项将决定生成的图标组件是`.tsx`还是`.js`后缀。
62
+
63
+ 当该值为 false 时，我们会为您的图标生成`.js`和`.d.ts`两个文件，以便您能享受到最好的开发体验。
52
64
 
53
65
  ### save_dir
54
- 根据iconfont图标生成的组件存放的位置。每次生成组件之前，该文件夹都会被清空。
66
+
67
+ 根据 iconfont 图标生成的组件存放的位置。每次生成组件之前，该文件夹都会被清空。
55
68
 
56
69
  ### trim_icon_prefix
70
+
57
71
  如果你的图标有通用的前缀，而你在使用的时候又不想重复去写，那么可以通过这种配置这个选项把前缀统一去掉。
58
72
 
59
73
  注意，这个选项只针对 `<Icon />` 组件有效
60
74
 
61
75
  ### unit
76
+
62
77
  图标的单位，默认是网页常用单位`px`即像素，也推荐您在手机网页中使用自适应的`rem`单位。
63
78
 
64
79
  ### default_icon_size
65
- 我们将为每个生成的图标组件加入默认的字体大小，当然，你也可以通过传入props的方式改变这个size值。
80
+
81
+ 我们将为每个生成的图标组件加入默认的字体大小，当然，你也可以通过传入 props 的方式改变这个 size 值。
82
+
83
+ ### can_import_react
84
+
85
+ 有些项目配置需要引入 `React` 才可以正常 `run` 或 `build` 项目，这里可通过这个配置控制是否导入 `React`。
66
86
 
67
87
  # Step 3
68
- 开始生成React标准组件
88
+
89
+ 开始生成 React 标准组件
90
+
69
91
  ```bash
70
92
  npx iconfont-h5
71
93
  ```
72
94
 
73
- 生成后查看您设置的保存目录中是否含有所有的图标，你可以参考[snapshots目录](https://github.com/iconfont-cli/react-iconfont-cli/tree/master/snapshots)的快照文件，以区分不同模式下的图标结构。
95
+ 生成后查看您设置的保存目录中是否含有所有的图标，你可以参考[snapshots 目录](https://github.com/iconfont-cli/react-iconfont-cli/tree/master/snapshots)的快照文件，以区分不同模式下的图标结构。
74
96
 
75
97
  # 使用
76
98
 
77
99
  现在我们提供了两种引入方式供您选择：
78
100
 
79
101
  1、使用汇总`Icon`组件：
102
+
80
103
  ```typescript jsx
81
- import React from 'react';
82
- import IconFont from '../src/iconfont';
104
+ import React from "react";
105
+ import IconFont from "../src/iconfont";
83
106
 
84
107
  export const App = () => {
85
108
  return (
@@ -91,12 +114,12 @@ export const App = () => {
91
114
  };
92
115
  ```
93
116
 
94
- 2、使用单个图标。这样可以避免没用到的图标也打包进App：
117
+ 2、使用单个图标。这样可以避免没用到的图标也打包进 App：
95
118
 
96
119
  ```typescript jsx
97
- import React from 'react';
98
- import IconAlipay from '../src/iconfont/IconAlipay';
99
- import IconWechat from '../src/iconfont/IconWechat';
120
+ import React from "react";
121
+ import IconAlipay from "../src/iconfont/IconAlipay";
122
+ import IconWechat from "../src/iconfont/IconWechat";
100
123
 
101
124
  export const App = () => {
102
125
  return (
@@ -109,57 +132,69 @@ export const App = () => {
109
132
  ```
110
133
 
111
134
  ### 图标尺寸
135
+
112
136
  根据配置`default_icon_size`，每个图标都会有一个默认的尺寸，你可以随时覆盖。
137
+
113
138
  ```typescript jsx
114
139
  <IconFont name="alipay" size={20} />
115
140
  ```
141
+
116
142
  ![](https://github.com/fwh1990/react-iconfont-cli/blob/master/images/default-color-icon.png?raw=true)
143
+
117
144
  ### 图标单色
145
+
118
146
  单色图标，如果不指定颜色值，图标将渲染原本的颜色。如果你想设置为其他的颜色，那么设置一个你想要的颜色即可。
119
147
 
120
- **注意：如果你在props传入的color是字符串而不是数组，那么即使原本是多色彩的图标，也会变成单色图标。**
148
+ **注意：如果你在 props 传入的 color 是字符串而不是数组，那么即使原本是多色彩的图标，也会变成单色图标。**
121
149
 
122
150
  ```typescript jsx
123
151
  <IconFont name="alipay" color="green" />
124
152
  ```
153
+
125
154
  ![](https://github.com/fwh1990/react-iconfont-cli/blob/master/images/one-color-icon.png?raw=true)
126
155
 
127
156
  ### 图标多色彩
157
+
128
158
  多色彩的图标，如果不指定颜色值，图标将渲染原本的多色彩。如果你想设置为其他的颜色，那么设置一组你想要的颜色即可
159
+
129
160
  ```typescript jsx
130
- <IconFont name="alipay" color={['green', 'orange']} />
161
+ <IconFont name="alipay" color={["green", "orange"]} />
131
162
  ```
132
- 颜色组的数量以及排序，需要根据当前图标的信息来确定。您需要进入图标组件中查看并得出结论。
133
163
 
164
+ 颜色组的数量以及排序，需要根据当前图标的信息来确定。您需要进入图标组件中查看并得出结论。
134
165
 
135
166
  ![](https://github.com/fwh1990/react-iconfont-cli/blob/master/images/multi-color-icon.png?raw=true)
136
167
 
137
168
  ### 与文字并排
169
+
138
170
  图标是块状的容器，如果您想与文字并排混合，请使用`flex`布局以保证文字和图标能对齐
171
+
139
172
  ```jsx harmony
140
- <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
173
+ <div style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
141
174
  <span>Hello</span>
142
175
  <IconFont name="alipay" />
143
176
  </div>
144
177
  ```
145
178
 
146
179
  # 更新图标
147
- 当您在iconfont.cn中的图标有变更时，只需更改配置`symbol_url`，然后再次执行`Step 3`即可生成最新的图标组件
180
+
181
+ 当您在 iconfont.cn 中的图标有变更时，只需更改配置`symbol_url`，然后再次执行`Step 3`即可生成最新的图标组件
182
+
148
183
  ```bash
149
184
  # 修改 symbol_url 配置后执行：
150
185
  npx iconfont-h5
151
186
  ```
152
187
 
153
188
  # 扩展
154
- |平台|库|
155
- |----|---|
156
- |小程序|[mini-program-iconfont-cli](https://github.com/iconfont-cli/mini-program-iconfont-cli)|
157
- |Taro|[taro-iconfont-cli](https://github.com/iconfont-cli/taro-iconfont-cli)|
158
- |React Native|[react-native-iconfont-cli](https://github.com/iconfont-cli/react-native-iconfont-cli)|
159
- |Flutter|[flutter-iconfont-cli](https://github.com/iconfont-cli/flutter-iconfont-cli)
160
- |Remax|[remax-iconfont-cli](https://github.com/iconfont-cli/remax-iconfont-cli)
161
189
 
190
+ | 平台 | 库 |
191
+ | ------------ | -------------------------------------------------------------------------------------- |
192
+ | 小程序 | [mini-program-iconfont-cli](https://github.com/iconfont-cli/mini-program-iconfont-cli) |
193
+ | Taro | [taro-iconfont-cli](https://github.com/iconfont-cli/taro-iconfont-cli) |
194
+ | React Native | [react-native-iconfont-cli](https://github.com/iconfont-cli/react-native-iconfont-cli) |
195
+ | Flutter | [flutter-iconfont-cli](https://github.com/iconfont-cli/flutter-iconfont-cli) |
196
+ | Remax | [remax-iconfont-cli](https://github.com/iconfont-cli/remax-iconfont-cli) |
162
197
 
163
- --------
198
+ ---
164
199
 
165
200
  欢迎使用，并给我一些反馈和建议，让这个库做的更好
package/libs/iconfont.json CHANGED
@@ -5,5 +5,5 @@
5
5
  "trim_icon_prefix": "icon",
6
6
  "unit": "px",
7
7
  "default_icon_size": 18,
8
- "can_import_react": false
8
+ "can_import_react": true
9
9
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sj-distributor/react-iconfont-cli",
3
- "version": "2.0.3",
3
+ "version": "2.1.0",
4
4
  "main": "index.js",
5
5
  "keywords": [
6
6
  "iconfont",