@zc-ui/icons 1.0.0 → 1.0.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 +69 -69
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
# @zc-ui/icons
|
|
2
|
-
|
|
3
|
-
5000+ Tabler 风格的 SVG 图标,作为 Vue 3 函数式组件。
|
|
4
|
-
|
|
5
|
-
## 安装
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install @zc-ui/icons
|
|
9
|
-
# 或
|
|
10
|
-
pnpm add @zc-ui/icons
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
## 使用
|
|
14
|
-
|
|
15
|
-
### 按需引入(推荐,Tree-Shaking 友好)
|
|
16
|
-
|
|
17
|
-
```ts
|
|
18
|
-
import { ZcIconAB, ZcIconHome, ZcIconUser } from '@zc-ui/icons'
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
### 全量引入
|
|
22
|
-
|
|
23
|
-
```ts
|
|
24
|
-
import * as ZcIcons from '@zc-ui/icons'
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
### 模板中使用
|
|
28
|
-
|
|
29
|
-
```vue
|
|
30
|
-
<script setup lang="ts">
|
|
31
|
-
import { ZcIconHome } from '@zc-ui/icons'
|
|
32
|
-
</script>
|
|
33
|
-
|
|
34
|
-
<template>
|
|
35
|
-
<ZcIconHome :size="32" color="red" :spin="true" />
|
|
36
|
-
</template>
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
## Props
|
|
40
|
-
|
|
41
|
-
| Prop | Type
|
|
42
|
-
| --------------------- |
|
|
43
|
-
| `size` | `number \| string`
|
|
44
|
-
| `color` | `string`
|
|
45
|
-
| `strokeWidth` | `number \| string`
|
|
46
|
-
| `absoluteStrokeWidth` | `boolean`
|
|
47
|
-
| `spin` | `boolean`
|
|
48
|
-
| `class` | `string \| object`
|
|
49
|
-
|
|
50
|
-
## 动态查找(高级)
|
|
51
|
-
|
|
52
|
-
每个图标在加载时会调用 `registerIcon()`,将其 SVG 数据注册到全局注册表。
|
|
53
|
-
你可以按字符串名动态渲染图标,无需 import 每个组件:
|
|
54
|
-
|
|
55
|
-
```ts
|
|
56
|
-
import { getIcon, getAllIconNames } from '@zc-ui/icons'
|
|
57
|
-
|
|
58
|
-
const def = getIcon('home')
|
|
59
|
-
console.log(getAllIconNames().length) // 5000+
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
## 来源
|
|
63
|
-
|
|
64
|
-
图标自动生成自 [@tabler/icons](https://github.com/tabler/tabler-icons),
|
|
65
|
-
所有图标遵循 MIT 协议。
|
|
66
|
-
|
|
67
|
-
## License
|
|
68
|
-
|
|
69
|
-
MIT
|
|
1
|
+
# @zc-ui/icons
|
|
2
|
+
|
|
3
|
+
5000+ Tabler 风格的 SVG 图标,作为 Vue 3 函数式组件。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @zc-ui/icons
|
|
9
|
+
# 或
|
|
10
|
+
pnpm add @zc-ui/icons
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## 使用
|
|
14
|
+
|
|
15
|
+
### 按需引入(推荐,Tree-Shaking 友好)
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
import { ZcIconAB, ZcIconHome, ZcIconUser } from '@zc-ui/icons'
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### 全量引入
|
|
22
|
+
|
|
23
|
+
```ts
|
|
24
|
+
import * as ZcIcons from '@zc-ui/icons'
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### 模板中使用
|
|
28
|
+
|
|
29
|
+
```vue
|
|
30
|
+
<script setup lang="ts">
|
|
31
|
+
import { ZcIconHome } from '@zc-ui/icons'
|
|
32
|
+
</script>
|
|
33
|
+
|
|
34
|
+
<template>
|
|
35
|
+
<ZcIconHome :size="32" color="red" :spin="true" />
|
|
36
|
+
</template>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Props
|
|
40
|
+
|
|
41
|
+
| Prop | Type | Default | 说明 |
|
|
42
|
+
| --------------------- | ------------------ | ---------------- | -------------------- |
|
|
43
|
+
| `size` | `number \| string` | `24` | SVG 宽高 |
|
|
44
|
+
| `color` | `string` | `'currentColor'` | 描边颜色 |
|
|
45
|
+
| `strokeWidth` | `number \| string` | `2` | 描边宽度 |
|
|
46
|
+
| `absoluteStrokeWidth` | `boolean` | `false` | 是否使用绝对像素描边 |
|
|
47
|
+
| `spin` | `boolean` | `false` | 是否旋转动画 |
|
|
48
|
+
| `class` | `string \| object` | `''` | 额外的 CSS 类 |
|
|
49
|
+
|
|
50
|
+
## 动态查找(高级)
|
|
51
|
+
|
|
52
|
+
每个图标在加载时会调用 `registerIcon()`,将其 SVG 数据注册到全局注册表。
|
|
53
|
+
你可以按字符串名动态渲染图标,无需 import 每个组件:
|
|
54
|
+
|
|
55
|
+
```ts
|
|
56
|
+
import { getIcon, getAllIconNames } from '@zc-ui/icons'
|
|
57
|
+
|
|
58
|
+
const def = getIcon('home') // { path, viewBox, strokeWidth, fill }
|
|
59
|
+
console.log(getAllIconNames().length) // 5000+
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## 来源
|
|
63
|
+
|
|
64
|
+
图标自动生成自 [@tabler/icons](https://github.com/tabler/tabler-icons),
|
|
65
|
+
所有图标遵循 MIT 协议。
|
|
66
|
+
|
|
67
|
+
## License
|
|
68
|
+
|
|
69
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zc-ui/icons",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "ZC UI 5000+ Tabler-style SVG icons as Vue 3 components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "ZC UI Team",
|
|
7
|
-
"homepage": "https://
|
|
7
|
+
"homepage": "https://zcais.github.io/zc-ui",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
10
|
-
"url": "git+https://github.com/
|
|
10
|
+
"url": "git+https://github.com/zcais/zc-ui.git",
|
|
11
11
|
"directory": "packages/icons"
|
|
12
12
|
},
|
|
13
13
|
"bugs": {
|
|
14
|
-
"url": "https://github.com/
|
|
14
|
+
"url": "https://github.com/zcais/zc-ui/issues"
|
|
15
15
|
},
|
|
16
16
|
"keywords": [
|
|
17
17
|
"vue",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"vue": "^3.4.0"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@zc-ui/utils": "1.0.
|
|
47
|
+
"@zc-ui/utils": "1.0.1"
|
|
48
48
|
},
|
|
49
49
|
"scripts": {
|
|
50
50
|
"build": "vite build",
|