color-message-aibox-vue 0.0.28 → 0.0.30

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 CHANGED
@@ -1,94 +1,94 @@
1
- # color-message-aibox-vue
2
-
3
- <p align="center">
4
- <img src="https://img.shields.io/npm/v/color-message-aibox-vue?style=flat-square" alt="npm version">
5
- <img src="https://img.shields.io/npm/dm/color-message-aibox-vue?style=flat-square" alt="npm downloads">
6
- <img src="https://img.shields.io/npm/l/color-message-aibox-vue?style=flat-square" alt="license">
7
- </p>
8
-
9
- Aibox 图标集的 Vue 3 组件库。
10
-
11
- ## 📦 安装
12
-
13
- ```bash
14
- pnpm add color-message-aibox-vue
15
- # 或
16
- pnpm add color-message-aibox-vue
17
- # 或
18
- yarn add color-message-aibox-vue
19
- ```
20
-
21
- ## 🚀 快速开始
22
-
23
- ### 按需引入(推荐)
24
-
25
- ```vue
26
- <script setup>
27
- import { IconAdd, IconDelete } from 'color-message-aibox-vue'
28
- </script>
29
-
30
- <template>
31
- <div>
32
- <IconAdd />
33
- <IconDelete />
34
- </div>
35
- </template>
36
- ```
37
-
38
- ### 全局注册
39
-
40
- ```typescript
41
- // main.ts
42
- import { createApp } from 'vue'
43
- import AiboxIcons from 'color-message-aibox-vue/global'
44
- import App from './App.vue'
45
-
46
- const app = createApp(App)
47
- app.use(AiboxIcons)
48
- app.mount('#app')
49
- ```
50
-
51
- 在组件中使用:
52
-
53
- ```vue
54
- <template>
55
- <div>
56
- <icon-add />
57
- <icon-delete />
58
- </div>
59
- </template>
60
- ```
61
-
62
- ## 🎨 自定义样式
63
-
64
- ```vue
65
- <template>
66
- <IconAdd style="width: 32px; height: 32px; color: #409eff;" class="my-icon" />
67
- </template>
68
-
69
- <style scoped>
70
- .my-icon {
71
- cursor: pointer;
72
- transition: color 0.3s;
73
- }
74
-
75
- .my-icon:hover {
76
- color: #66b1ff;
77
- }
78
- </style>
79
- ```
80
-
81
- ## 📚 图标列表
82
-
83
- 当前包含以下图标:
84
-
85
- - `IconAdd` - 添加图标
86
- - `IconDelete` - 删除图标
87
-
88
- ## 🔧 TypeScript 支持
89
-
90
- 本包使用 TypeScript 编写,提供完整的类型定义,开箱即用。
91
-
92
- ## 📄 License
93
-
94
- [MIT](../../../LICENSE) License
1
+ # color-message-aibox-vue
2
+
3
+ <p align="center">
4
+ <img src="https://img.shields.io/npm/v/color-message-aibox-vue?style=flat-square" alt="npm version">
5
+ <img src="https://img.shields.io/npm/dm/color-message-aibox-vue?style=flat-square" alt="npm downloads">
6
+ <img src="https://img.shields.io/npm/l/color-message-aibox-vue?style=flat-square" alt="license">
7
+ </p>
8
+
9
+ Aibox 图标集的 Vue 3 组件库。
10
+
11
+ ## 📦 安装
12
+
13
+ ```bash
14
+ pnpm add color-message-aibox-vue
15
+ # 或
16
+ pnpm add color-message-aibox-vue
17
+ # 或
18
+ yarn add color-message-aibox-vue
19
+ ```
20
+
21
+ ## 🚀 快速开始
22
+
23
+ ### 按需引入(推荐)
24
+
25
+ ```vue
26
+ <script setup>
27
+ import { IconAdd, IconDelete } from 'color-message-aibox-vue'
28
+ </script>
29
+
30
+ <template>
31
+ <div>
32
+ <IconAdd />
33
+ <IconDelete />
34
+ </div>
35
+ </template>
36
+ ```
37
+
38
+ ### 全局注册
39
+
40
+ ```typescript
41
+ // main.ts
42
+ import { createApp } from 'vue'
43
+ import AiboxIcons from 'color-message-aibox-vue/global'
44
+ import App from './App.vue'
45
+
46
+ const app = createApp(App)
47
+ app.use(AiboxIcons)
48
+ app.mount('#app')
49
+ ```
50
+
51
+ 在组件中使用:
52
+
53
+ ```vue
54
+ <template>
55
+ <div>
56
+ <icon-add />
57
+ <icon-delete />
58
+ </div>
59
+ </template>
60
+ ```
61
+
62
+ ## 🎨 自定义样式
63
+
64
+ ```vue
65
+ <template>
66
+ <IconAdd style="width: 32px; height: 32px; color: #409eff;" class="my-icon" />
67
+ </template>
68
+
69
+ <style scoped>
70
+ .my-icon {
71
+ cursor: pointer;
72
+ transition: color 0.3s;
73
+ }
74
+
75
+ .my-icon:hover {
76
+ color: #66b1ff;
77
+ }
78
+ </style>
79
+ ```
80
+
81
+ ## 📚 图标列表
82
+
83
+ 当前包含以下图标:
84
+
85
+ - `IconAdd` - 添加图标
86
+ - `IconDelete` - 删除图标
87
+
88
+ ## 🔧 TypeScript 支持
89
+
90
+ 本包使用 TypeScript 编写,提供完整的类型定义,开箱即用。
91
+
92
+ ## 📄 License
93
+
94
+ [MIT](../../../LICENSE) License