ksw-vue-icon 2.0.0 → 2.0.2
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 +78 -15
- package/package.json +1 -1
- package/packages/index.es.js +3649 -44
package/README.md
CHANGED
|
@@ -1,29 +1,92 @@
|
|
|
1
|
-
#
|
|
1
|
+
# ksw-vue-icon
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## 介绍
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
图标自动化是一个可以帮助你将 SVG 转换为 VUE 组件代码，并上传至 NPM 以便开发直接使用命令行安装和更新。设计师可以通过此插件快速交付图标文件，它能省去很多不必要的中间环节，从而达到让设计师轻轻一点就更新，开发一条命令就下载的效果，整个过程中两人都不用离开座位多说一句话。
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
### NPM包
|
|
8
|
+
请访问 https://www.npmjs.com/package/ksw-vue-icon
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
### ICON 展示页面
|
|
10
11
|
|
|
11
|
-
|
|
12
|
+
请访问 [KSW-vue-icon](https://sengoku-f.github.io/KSW-vue-icon/)
|
|
12
13
|
|
|
13
|
-
|
|
14
|
+
- 复制Vue图标组件
|
|
15
|
+
- 查看ICON
|
|
14
16
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
+
## 入门
|
|
18
|
+
|
|
19
|
+
### 安装 NPM 包
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
npm install ksw-vue-icon --save
|
|
23
|
+
yarn add ksw-vue-icon
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### 引用
|
|
27
|
+
|
|
28
|
+
```
|
|
29
|
+
import { IconHome } from 'ksw-vue-icon'
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### 用法
|
|
33
|
+
|
|
34
|
+
```
|
|
35
|
+
<IconImage :size="36" color="#009C22" />
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## 展示页配置
|
|
39
|
+
|
|
40
|
+
### 安装依赖
|
|
41
|
+
```
|
|
42
|
+
yarn install
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### 编译和热重新加载用于开发
|
|
46
|
+
```
|
|
47
|
+
yarn dev
|
|
17
48
|
```
|
|
18
49
|
|
|
19
|
-
###
|
|
50
|
+
### 编译和缩小以供生产
|
|
51
|
+
```
|
|
52
|
+
yarn build
|
|
20
53
|
|
|
21
|
-
```sh
|
|
22
|
-
npm run dev
|
|
23
54
|
```
|
|
24
55
|
|
|
25
|
-
###
|
|
56
|
+
### 编译 NPM 包
|
|
57
|
+
```
|
|
58
|
+
yarn build-packages
|
|
59
|
+
|
|
60
|
+
```
|
|
26
61
|
|
|
27
|
-
|
|
28
|
-
npm run build
|
|
62
|
+
### Lints and fixes files
|
|
29
63
|
```
|
|
64
|
+
yarn lint
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## 部署方法
|
|
68
|
+
|
|
69
|
+
1. 将 `svg` 图标放入 `src/svg` 文件夹中
|
|
70
|
+
|
|
71
|
+
2. 更改 `package.json` 中的 `version`
|
|
72
|
+
|
|
73
|
+
3. 推送到 `github` 仓库
|
|
74
|
+
|
|
75
|
+
## 图标规范
|
|
76
|
+
|
|
77
|
+
确保图标基础尺寸是 `24×24`
|
|
78
|
+
|
|
79
|
+
如果是彩色图标可以在命名中包含 `color` 例如 `social-color`
|
|
80
|
+
|
|
81
|
+
图标命名请使用英文（不可以含 `/`）和 `-`，例如 `dewu-logo-original`
|
|
82
|
+
|
|
83
|
+
图标一般有描边 `stroke` 和填充 `fill` 两种样式，一个图标只能采用一种形式，不可以混合，默认 `fill`。想要转为 `fill` 样式，你可以使用 `Outline Stroke（Shift+Command+O）` 将图标转换为填充形状。
|
|
84
|
+
|
|
85
|
+
通过图标命名我们对 `svg` 处理成单色（去掉原始颜色设置 `fill="currentColor"`）、彩色（保留原始颜色）。
|
|
86
|
+
|
|
87
|
+
## 属性
|
|
88
|
+
| 属性名称 | 介绍 | 类型 | 默认值 | 注释 |
|
|
89
|
+
| ---------- | --- | --- | --- | --- |
|
|
90
|
+
| size | 图标的大小，宽高相同 | number | string | '1em' |
|
|
91
|
+
| spin | 给图标加旋转效果 | boolean | false |
|
|
92
|
+
| color | 图标的颜色，默认为当前颜色 | string | string[]| 'currentColor' |
|