@cregis/icon 0.1.12 → 0.1.14
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 +103 -103
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +410 -4871
- package/dist/index.es.js +7833 -7688
- package/package.json +48 -48
package/README.md
CHANGED
|
@@ -1,103 +1,103 @@
|
|
|
1
|
-
# 🪶 @cregis/icon
|
|
2
|
-
|
|
3
|
-
> 一组基于 **Vue 3 + TypeScript + Vite** 构建的图标组件库。
|
|
4
|
-
> 支持全局默认样式配置（颜色、尺寸），也支持组件级别自定义。
|
|
5
|
-
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## 📦 安装
|
|
9
|
-
|
|
10
|
-
```bash
|
|
11
|
-
# 使用 npm
|
|
12
|
-
npm install @cregis/icon
|
|
13
|
-
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
---
|
|
17
|
-
|
|
18
|
-
## 🚀 快速开始
|
|
19
|
-
|
|
20
|
-
### 1️⃣ 在项目入口处进行全局配置
|
|
21
|
-
|
|
22
|
-
```ts
|
|
23
|
-
// main.ts
|
|
24
|
-
import { createApp } from "vue";
|
|
25
|
-
import App from "./App.vue";
|
|
26
|
-
import { iconConfig } from "@cregis/icon";
|
|
27
|
-
|
|
28
|
-
iconConfig.setDefault({
|
|
29
|
-
size: "32px", // 默认尺寸
|
|
30
|
-
color: "#0099FF", // 默认颜色
|
|
31
|
-
strokeWidth: 2, // 默认线宽
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
createApp(App).mount("#app");
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
> 💡 全局配置是可选的，如果未配置，将使用组件自身的默认样式。
|
|
38
|
-
|
|
39
|
-
---
|
|
40
|
-
|
|
41
|
-
### 2️⃣ 在组件中使用图标
|
|
42
|
-
|
|
43
|
-
```vue
|
|
44
|
-
<script setup lang="ts">
|
|
45
|
-
import { EdsAddAddressBooks, EdsDiamondBusiness } from "@cregis/icon";
|
|
46
|
-
</script>
|
|
47
|
-
|
|
48
|
-
<template>
|
|
49
|
-
<EdsAddAddressBooks size="16px" color="#FF9900" :stroke-width="1.4" />
|
|
50
|
-
<EdsDiamondBusiness />
|
|
51
|
-
</template>
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
✅ 支持按需引入，不需要额外配置。
|
|
55
|
-
|
|
56
|
-
---
|
|
57
|
-
|
|
58
|
-
## ⚙️ API 说明
|
|
59
|
-
|
|
60
|
-
### 全局配置
|
|
61
|
-
|
|
62
|
-
```ts
|
|
63
|
-
iconConfig.setDefault(options: IconProps)
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
| 参数名 | 类型 | 说明 |
|
|
67
|
-
|--------|------|------|
|
|
68
|
-
| `size` | `string` | 设置全局默认图标大小（如 `"24px"`、`"1.5rem"`） |
|
|
69
|
-
| `color` | `string` | 设置全局默认颜色（如 `"#000"`、`"red"`） |
|
|
70
|
-
| `strokeWidth` | `number` | 设置全局默认线宽(如 `1.4`、`2`) |
|
|
71
|
-
|
|
72
|
-
---
|
|
73
|
-
|
|
74
|
-
### 组件属性
|
|
75
|
-
|
|
76
|
-
| 属性名 | 类型 | 说明 | 默认值 |
|
|
77
|
-
|--------|------|------|--------|
|
|
78
|
-
| `size` | `string` | 图标大小 | 全局默认或内置默认 |
|
|
79
|
-
| `color` | `string` | 图标颜色 | 全局默认或内置默认 |
|
|
80
|
-
| `strokeWidth` | `number` | 图标线宽 | 全局默认或内置默认 |
|
|
81
|
-
|
|
82
|
-
示例：
|
|
83
|
-
|
|
84
|
-
```vue
|
|
85
|
-
<EdsAddAddressBooks size="20px" color="#00bcd4" :stroke-width="1.4" />
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
---
|
|
89
|
-
|
|
90
|
-
## 📚 类型定义
|
|
91
|
-
|
|
92
|
-
```ts
|
|
93
|
-
export interface FixIconProps {
|
|
94
|
-
size?: string;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
export interface IconProps {
|
|
98
|
-
size?: string;
|
|
99
|
-
color?: string;
|
|
100
|
-
strokeWidth?: number;
|
|
101
|
-
}
|
|
102
|
-
```
|
|
103
|
-
|
|
1
|
+
# 🪶 @cregis/icon
|
|
2
|
+
|
|
3
|
+
> 一组基于 **Vue 3 + TypeScript + Vite** 构建的图标组件库。
|
|
4
|
+
> 支持全局默认样式配置（颜色、尺寸），也支持组件级别自定义。
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## 📦 安装
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
# 使用 npm
|
|
12
|
+
npm install @cregis/icon
|
|
13
|
+
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## 🚀 快速开始
|
|
19
|
+
|
|
20
|
+
### 1️⃣ 在项目入口处进行全局配置
|
|
21
|
+
|
|
22
|
+
```ts
|
|
23
|
+
// main.ts
|
|
24
|
+
import { createApp } from "vue";
|
|
25
|
+
import App from "./App.vue";
|
|
26
|
+
import { iconConfig } from "@cregis/icon";
|
|
27
|
+
|
|
28
|
+
iconConfig.setDefault({
|
|
29
|
+
size: "32px", // 默认尺寸
|
|
30
|
+
color: "#0099FF", // 默认颜色
|
|
31
|
+
strokeWidth: 2, // 默认线宽
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
createApp(App).mount("#app");
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
> 💡 全局配置是可选的，如果未配置，将使用组件自身的默认样式。
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
### 2️⃣ 在组件中使用图标
|
|
42
|
+
|
|
43
|
+
```vue
|
|
44
|
+
<script setup lang="ts">
|
|
45
|
+
import { EdsAddAddressBooks, EdsDiamondBusiness } from "@cregis/icon";
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<template>
|
|
49
|
+
<EdsAddAddressBooks size="16px" color="#FF9900" :stroke-width="1.4" />
|
|
50
|
+
<EdsDiamondBusiness />
|
|
51
|
+
</template>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
✅ 支持按需引入，不需要额外配置。
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
## ⚙️ API 说明
|
|
59
|
+
|
|
60
|
+
### 全局配置
|
|
61
|
+
|
|
62
|
+
```ts
|
|
63
|
+
iconConfig.setDefault(options: IconProps)
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
| 参数名 | 类型 | 说明 |
|
|
67
|
+
|--------|------|------|
|
|
68
|
+
| `size` | `string` | 设置全局默认图标大小（如 `"24px"`、`"1.5rem"`） |
|
|
69
|
+
| `color` | `string` | 设置全局默认颜色（如 `"#000"`、`"red"`） |
|
|
70
|
+
| `strokeWidth` | `number` | 设置全局默认线宽(如 `1.4`、`2`) |
|
|
71
|
+
|
|
72
|
+
---
|
|
73
|
+
|
|
74
|
+
### 组件属性
|
|
75
|
+
|
|
76
|
+
| 属性名 | 类型 | 说明 | 默认值 |
|
|
77
|
+
|--------|------|------|--------|
|
|
78
|
+
| `size` | `string` | 图标大小 | 全局默认或内置默认 |
|
|
79
|
+
| `color` | `string` | 图标颜色 | 全局默认或内置默认 |
|
|
80
|
+
| `strokeWidth` | `number` | 图标线宽 | 全局默认或内置默认 |
|
|
81
|
+
|
|
82
|
+
示例：
|
|
83
|
+
|
|
84
|
+
```vue
|
|
85
|
+
<EdsAddAddressBooks size="20px" color="#00bcd4" :stroke-width="1.4" />
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
## 📚 类型定义
|
|
91
|
+
|
|
92
|
+
```ts
|
|
93
|
+
export interface FixIconProps {
|
|
94
|
+
size?: string;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
export interface IconProps {
|
|
98
|
+
size?: string;
|
|
99
|
+
color?: string;
|
|
100
|
+
strokeWidth?: number;
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|