ikun-icon 1.0.2 → 1.0.3
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 +13 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -39,8 +39,7 @@ npm install ikun-icon --save-dev
|
|
|
39
39
|
"generatorConfig": {
|
|
40
40
|
"componentOutputDir": "./iconfont",
|
|
41
41
|
"iconfontCssOutputDir": "./styles",
|
|
42
|
-
"iconfontCssUrl": "https://at.alicdn.com/t/font_xxxxxxxx_xxxxxx.css"
|
|
43
|
-
"customTemplateDir": false
|
|
42
|
+
"iconfontCssUrl": "https://at.alicdn.com/t/font_xxxxxxxx_xxxxxx.css"
|
|
44
43
|
},
|
|
45
44
|
"componentConfig": {
|
|
46
45
|
"componentName": "icon",
|
|
@@ -57,6 +56,14 @@ npm install ikun-icon --save-dev
|
|
|
57
56
|
}
|
|
58
57
|
```
|
|
59
58
|
|
|
59
|
+
### 2. 配置阿里矢量图标库
|
|
60
|
+
|
|
61
|
+
1. 登录 [阿里巴巴矢量图标库](https://www.iconfont.cn/)
|
|
62
|
+
2. 创建新的项目或选择已有的项目
|
|
63
|
+
3. 点击项目设置，勾选Base64、WOFF2、TIF
|
|
64
|
+
4. 选择 `Font Class`选项，点击复制css链接
|
|
65
|
+
5. 将在线 CSS 地址配置到 `iconfont.json` 中的 `iconfontCssUrl` 字段
|
|
66
|
+
|
|
60
67
|
### 3. 配置详解
|
|
61
68
|
|
|
62
69
|
#### generatorConfig (生成器配置)
|
|
@@ -66,7 +73,6 @@ npm install ikun-icon --save-dev
|
|
|
66
73
|
| `componentOutputDir` | `string` | 是 | - | 组件输出目录路径 |
|
|
67
74
|
| `iconfontCssOutputDir` | `string` | 是 | - | iconfont CSS 文件输出目录路径 |
|
|
68
75
|
| `iconfontCssUrl` | `string` | 是 | - | 阿里巴巴矢量图标库生成的在线 CSS 地址 |
|
|
69
|
-
| `customTemplateDir` | `string \| false` | 否 | `false` | 自定义模板目录路径，如果不需要自定义模板则设为 `false` |
|
|
70
76
|
|
|
71
77
|
#### componentConfig (组件配置)
|
|
72
78
|
|
|
@@ -126,6 +132,10 @@ async function generateIcons() {
|
|
|
126
132
|
|
|
127
133
|
generateIcons();
|
|
128
134
|
```
|
|
135
|
+
### 5. 引入生产的样式文件
|
|
136
|
+
|
|
137
|
+
- **微信小程序**：在 `app.wxss` 或需要使用图标的页面的 `wxss` 文件中引入 `iconfont.css`。
|
|
138
|
+
- **支付宝小程序**：在 `app.acss` 或需要使用图标的页面的 `acss` 文件中引入 `iconfont.acss`。
|
|
129
139
|
|
|
130
140
|
## 配置选项
|
|
131
141
|
|
|
@@ -134,7 +144,6 @@ generateIcons();
|
|
|
134
144
|
| 配置项 | 类型 | 描述 | 默认值 |
|
|
135
145
|
| --- | --- | --- | --- |
|
|
136
146
|
| `componentOutputDir` | `string` | 组件输出目录 | 必填 |
|
|
137
|
-
| `customTemplateDir` | `string | false` | 自定义模板目录 | 可选 |
|
|
138
147
|
| `iconfontCssOutputDir` | `string` | 图标字体 CSS 输出目录 | 必填 |
|
|
139
148
|
| `iconfontCssUrl` | `string` | 图标字体 CSS URL | 必填 |
|
|
140
149
|
|