ikun-icon 1.0.2 → 1.0.4
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 +31 -22
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -39,24 +39,31 @@ 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",
|
|
47
46
|
"componentPrefix": "wx",
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
47
|
+
"width": 48,
|
|
48
|
+
"height": 48,
|
|
49
|
+
"color": "#333333",
|
|
50
|
+
"unit": "rpx",
|
|
51
|
+
"fontSize": 48,
|
|
52
|
+
"iconFontClass": "iconfont",
|
|
54
53
|
"styleIsolation": "isolated",
|
|
55
54
|
"virtualHost": false
|
|
56
55
|
}
|
|
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
|
|
|
@@ -74,12 +80,12 @@ npm install ikun-icon --save-dev
|
|
|
74
80
|
| --- | --- | --- | --- | --- |
|
|
75
81
|
| `componentName` | `string` | 是 | - | 生成的组件名称 |
|
|
76
82
|
| `componentPrefix` | `string` | 否 | - | 组件命名前缀 |
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
+
| `width` | `number` | 否 | `48` | 默认宽度 |
|
|
84
|
+
| `height` | `number` | 否 | `48` | 默认高度 |
|
|
85
|
+
| `color` | `string` | 否 | - | 默认图标颜色 |
|
|
86
|
+
| `fontSize` | `number` | 否 | - | 默认字体大小 |
|
|
87
|
+
| `unit` | `string` | 否 | `rpx` | 默认尺寸单位 |
|
|
88
|
+
| `iconFontClass` | `string` | 否 | `iconfont` | 图标字体 CSS 类名 |
|
|
83
89
|
| `styleIsolation` | `string` | 否 | `isolated` | [微信小程序] 样式隔离选项 |
|
|
84
90
|
| `virtualHost` | `boolean` | 否 | `false` | [微信小程序] 是否开启虚拟化组件节点 |
|
|
85
91
|
| `usingComponents` | `object` | 否 | - | 自定义引用的其他组件 |
|
|
@@ -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
|
|
|
@@ -147,12 +156,12 @@ generateIcons();
|
|
|
147
156
|
| `usingComponents` | `Record<string, string>` | 组件使用的其他组件 | `{}` |
|
|
148
157
|
| `styleIsolation` | `'isolated' | 'apply-shared' | 'shared'` | 组件样式隔离 | `shared` |
|
|
149
158
|
| `virtualHost` | `boolean` | 是否虚拟化组件 | `false` |
|
|
150
|
-
| `
|
|
151
|
-
| `
|
|
152
|
-
| `
|
|
153
|
-
| `
|
|
154
|
-
| `
|
|
155
|
-
| `
|
|
159
|
+
| `width` | `number` | 容器宽度 | `48` |
|
|
160
|
+
| `height` | `number` | 容器高度 | `48` |
|
|
161
|
+
| `fontSize` | `number` | 默认图标字体大小 | `60` |
|
|
162
|
+
| `color` | `string` | 默认图标颜色 | `#000000` |
|
|
163
|
+
| `unit` | `string` | 默认单位 | `rpx` |
|
|
164
|
+
| `iconFontClass` | `string` | 图标字体类名 | `iconfont` |
|
|
156
165
|
| `customTemplateData` | `TemplateData` | 自定义模板数据 | `{}` |
|
|
157
166
|
|
|
158
167
|
## 生成的组件结构
|