wechat-mp-controller 0.1.0 → 0.1.1
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 +0 -144
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
# taro-icon-helper
|
|
2
|
-
|
|
3
|
-
在 taro 项目中以 React 组件形式使用 svg 作为 Icon。
|
|
4
|
-
|
|
5
|
-
[](https://www.npmjs.com/package/taro-icon-helper)
|
|
6
|
-
[](https://www.npmjs.com/package/taro-icon-helper)
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
## 特性
|
|
10
|
-
<ol>
|
|
11
|
-
<li>将多个 svg 生成为直接可用的 React 组件；</li>
|
|
12
|
-
<li>通过 css 控制图标尺寸、颜色；</li>
|
|
13
|
-
<li>支持多色彩；</li>
|
|
14
|
-
<li>生成的组件带有 JSDoc 的预览效果，展示图标的类型、多色配置；</li>
|
|
15
|
-
</ol>
|
|
16
|
-
|
|
17
|
-
## 使用
|
|
18
|
-
### Step 1
|
|
19
|
-
安装
|
|
20
|
-
#### pnpm
|
|
21
|
-
```bash
|
|
22
|
-
pnpm add taro-icon-helper --save-dev
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
#### yarn
|
|
26
|
-
```bash
|
|
27
|
-
yarn add taro-icon-helper --dev
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
#### npm
|
|
31
|
-
```bash
|
|
32
|
-
npm install taro-icon-helper --save-dev
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
### Step 2
|
|
36
|
-
在项目下创建配置文件 icon-helper.json ，参考配置信息如下：
|
|
37
|
-
```json
|
|
38
|
-
{
|
|
39
|
-
"sourceDir": "./src/assets/svg",
|
|
40
|
-
"outputDir": "./src/components/icons",
|
|
41
|
-
"className": "my-icon",
|
|
42
|
-
"fontName": "my-font"
|
|
43
|
-
}
|
|
44
|
-
```
|
|
45
|
-
详见[配置参数说明](#配置参数说明)
|
|
46
|
-
|
|
47
|
-
### Step 3
|
|
48
|
-
开始生成组件
|
|
49
|
-
```bash
|
|
50
|
-
npm taro-icon-helper update
|
|
51
|
-
```
|
|
52
|
-
执行完毕后在 outputDir 中检查生成的图标
|
|
53
|
-
|
|
54
|
-
### Step 4
|
|
55
|
-
在项目中使用。例如，在 sourceDir 中存在 loading-outlined.svg、add-image-outlined.svg，则会生成出 LoadingOutlined 以及 AddImageOutlined 两个组件，使用方式如下：
|
|
56
|
-
|
|
57
|
-
```jsx harmony
|
|
58
|
-
import { AddImageOutlined, LoadingOutlined } from '@/components/icons';
|
|
59
|
-
|
|
60
|
-
export const Demo = () => {
|
|
61
|
-
return (
|
|
62
|
-
<>
|
|
63
|
-
<LoadingOutlined className='text-24 text-black' />
|
|
64
|
-
<AddImageOutlined className='text-18 text-white' />
|
|
65
|
-
{/** 假如 AddImageOutlined 支持多色 */}
|
|
66
|
-
<AddImageOutlined color={['#123456', '#654321']} className='text-12' />
|
|
67
|
-
</>
|
|
68
|
-
);
|
|
69
|
-
};
|
|
70
|
-
```
|
|
71
|
-
> 在 vscode 中，尝试将鼠标移动到组件名上，能看到图标的预览效果
|
|
72
|
-
> 
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
> 具体的使用，包括源文件位置、配置文件、生成结果等，可参考[这里](https://github.com/ArcherCube/taro-icon-helper/tree/main/demo)
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
## 配置参数说明
|
|
79
|
-
|
|
80
|
-
### sourceDir
|
|
81
|
-
必填，svg源文件的目录。
|
|
82
|
-
> svg文件需要以短横线风格命名，否则将影响生成的组件名。
|
|
83
|
-
|
|
84
|
-
### outputDir
|
|
85
|
-
必填，生成的组件的目录。
|
|
86
|
-
> 生成的组件名为svg文件名的大驼峰。
|
|
87
|
-
|
|
88
|
-
### className
|
|
89
|
-
必填，图标组件基础样式名。会同时作为图标字体样式名的前缀。
|
|
90
|
-
|
|
91
|
-
### fontName
|
|
92
|
-
必填，字体名，即 @font-face 中 font-family 的名字。
|
|
93
|
-
|
|
94
|
-
### typescript
|
|
95
|
-
boolean 类型，可选，表示是否生成为typescript。默认为true。
|
|
96
|
-
|
|
97
|
-
## CLI命令
|
|
98
|
-
### update
|
|
99
|
-
最常用的命令，即更新 svg 组件，用法为：
|
|
100
|
-
```bash
|
|
101
|
-
npm taro-icon-helper update
|
|
102
|
-
```
|
|
103
|
-
可选参数为 `--config` / `-c`，指定配置文件的路径，例如：
|
|
104
|
-
```bash
|
|
105
|
-
npm taro-icon-helper update -c ./custom-path/config-file.json
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
-------
|
|
109
|
-
|
|
110
|
-
## 支持平台
|
|
111
|
-
|
|
112
|
-
- 微信小程序
|
|
113
|
-
- 理论上其他平台也支持（未测试）
|
|
114
|
-
|
|
115
|
-
## FAQ
|
|
116
|
-
|
|
117
|
-
### 生成的代码没有进行格式化，项目配置的 eslint 报错？
|
|
118
|
-
一开始确实打算将 eslint 的修复直接加入生成过程来执行，但是考虑不是所有项目都会用到；而且即使真的需要用到，在生成组件后再进行格式化也只是加一条命令，例如，配置生成的路径为 `./src/icons`，在 package.json 中有：
|
|
119
|
-
```json
|
|
120
|
-
{
|
|
121
|
-
"scripts": {
|
|
122
|
-
"update:icon": "taro-icon-helper update"
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
```
|
|
126
|
-
则可以改写为
|
|
127
|
-
```json
|
|
128
|
-
{
|
|
129
|
-
"scripts": {
|
|
130
|
-
"update:icon": "taro-icon-helper update && eslint --fix ./src/icons --ext .ts,.tsx"
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
```
|
|
134
|
-
### 为什么要做这个库？
|
|
135
|
-
在微信小程序使用图标，往往会碰到以下几个问题：
|
|
136
|
-
<ol>
|
|
137
|
-
<li>图标颜色的设置，尤其是当项目里有主题切换之类的功能时，我们一般不太愿意直接将 hex 或者 rgb 的值直接写到图标中，因为直接写值不好维护、封装成对象又得到处导入而且跟文字颜色的设置方式不一致；</li>
|
|
138
|
-
<li>图标放到项目之后，时间一长就忘记图标长啥样了，只通过名字不好判断是不是想要的那一个；</li>
|
|
139
|
-
<li>UI 更多时候更偏向于自己去设计 icon，而产物一般是 svg；小程序要使用 svg 其实不是很方便，必须要经过一些额外处理；上传到 iconfont 等平台后使用其生成的字体图标，又直接砍掉了图标的多色能力，而且 UI 还得先把图标进行轮廓化再进行上传；</li>
|
|
140
|
-
</ol>
|
|
141
|
-
为了能在小程序项目更简单、直接地使用图标，于是有了这个库。
|
|
142
|
-
|
|
143
|
-
## 写在最后
|
|
144
|
-
欢迎提出其他疑问或建议，一起优化这个工具。
|