@yh-ui/icons 1.0.0
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/LICENSE +21 -0
- package/README.md +265 -0
- package/dist/collections.mjs +83 -0
- package/dist/iconify.mjs +47 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.mjs +23 -0
- package/dist/presets.mjs +132 -0
- package/dist/src/collections.d.ts +14 -0
- package/dist/src/collections.d.ts.map +1 -0
- package/dist/src/config.d.ts +9 -0
- package/dist/src/config.d.ts.map +1 -0
- package/dist/src/iconify.d.ts +69 -0
- package/dist/src/iconify.d.ts.map +1 -0
- package/dist/src/index.d.ts +17 -0
- package/dist/src/index.d.ts.map +1 -0
- package/dist/src/presets.d.ts +54 -0
- package/dist/src/presets.d.ts.map +1 -0
- package/dist/src/types.d.ts +144 -0
- package/dist/src/types.d.ts.map +1 -0
- package/dist/src/vue/icon.d.ts +278 -0
- package/dist/src/vue/icon.d.ts.map +1 -0
- package/dist/types.mjs +26 -0
- package/dist/vue/icon.mjs +132 -0
- package/package.json +45 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024-present YH-UI Team
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,265 @@
|
|
|
1
|
+
# @yh-ui/icons
|
|
2
|
+
|
|
3
|
+
高性能图标库,基于 Iconify 集成,支持 100+ 图标集,按需加载,零运行时开销。
|
|
4
|
+
|
|
5
|
+
## 特性
|
|
6
|
+
|
|
7
|
+
- 🚀 **高性能** - 使用 unplugin-icons 实现编译时按需加载
|
|
8
|
+
- 📦 **体积小** - Tree-shaking 极致化,只有用到的图标才会被打包
|
|
9
|
+
- 🎨 **100+ 图标集** - 整合 Iconify 生态,20 万+ 图标
|
|
10
|
+
- 🔧 **完全兼容** - 保持与现有 YhIcon 组件 API 兼容
|
|
11
|
+
- 🌳 **SSR 支持** - 支持服务端渲染
|
|
12
|
+
|
|
13
|
+
## 安装
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
pnpm add @yh-ui/icons @iconify/vue
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## 快速开始
|
|
20
|
+
|
|
21
|
+
### 方式一:使用 Vite 插件按需加载(推荐)
|
|
22
|
+
|
|
23
|
+
安装依赖:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
pnpm add -D unplugin-icons @iconify/json
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
配置 `vite.config.ts`:
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
import { defineConfig } from 'vite'
|
|
33
|
+
import vue from '@vitejs/plugin-vue'
|
|
34
|
+
import Icons from 'unplugin-icons/vite'
|
|
35
|
+
import { collections } from '@iconify/json'
|
|
36
|
+
|
|
37
|
+
export default defineConfig({
|
|
38
|
+
plugins: [
|
|
39
|
+
vue(),
|
|
40
|
+
Icons({
|
|
41
|
+
compiler: 'vue3',
|
|
42
|
+
// 自动安装图标集
|
|
43
|
+
autoInstall: true,
|
|
44
|
+
// 启用这些图标集
|
|
45
|
+
collections: {
|
|
46
|
+
mdi: collections.mdi,
|
|
47
|
+
ep: collections.ep,
|
|
48
|
+
lucide: collections.lucide,
|
|
49
|
+
tabler: collections.tabler,
|
|
50
|
+
ri: collections.ri,
|
|
51
|
+
}
|
|
52
|
+
})
|
|
53
|
+
]
|
|
54
|
+
})
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### 方式二:直接使用(无需配置)
|
|
58
|
+
|
|
59
|
+
```vue
|
|
60
|
+
<script setup>
|
|
61
|
+
import { Icon } from '@yh-ui/icons/vue'
|
|
62
|
+
</script>
|
|
63
|
+
|
|
64
|
+
<template>
|
|
65
|
+
<!-- 使用前缀:图标名格式 -->
|
|
66
|
+
<Icon icon="mdi:home" />
|
|
67
|
+
|
|
68
|
+
<!-- 使用自定义尺寸和颜色 -->
|
|
69
|
+
<Icon icon="mdi:home" :size="24" color="#ff0000" />
|
|
70
|
+
|
|
71
|
+
<!-- 旋转动画 -->
|
|
72
|
+
<Icon icon="mdi:loading" spin />
|
|
73
|
+
</template>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## 使用方法
|
|
77
|
+
|
|
78
|
+
### 图标名称格式
|
|
79
|
+
|
|
80
|
+
支持多种图标名称格式:
|
|
81
|
+
|
|
82
|
+
```vue
|
|
83
|
+
<!-- 1. 前缀:图标名(推荐) -->
|
|
84
|
+
<Icon icon="mdi:home" />
|
|
85
|
+
<Icon icon="ep:search" />
|
|
86
|
+
<Icon icon="lucide:check" />
|
|
87
|
+
|
|
88
|
+
<!-- 2. 斜杠分隔(兼容 Iconify) -->
|
|
89
|
+
<Icon icon="mdi/home" />
|
|
90
|
+
<Icon icon="ep/search" />
|
|
91
|
+
|
|
92
|
+
<!-- 3. 简写名称(需配置默认图标集) -->
|
|
93
|
+
<Icon icon="home" /> <!-- 等同于 mdi:home -->
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### 常用图标集
|
|
97
|
+
|
|
98
|
+
| 图标集 | 前缀 | 图标数量 | 说明 |
|
|
99
|
+
|--------|------|----------|------|
|
|
100
|
+
| Material Design Icons | `mdi` | 7000+ | 最流行的开源图标库 |
|
|
101
|
+
| Element Plus | `ep` | 200+ | Element Plus 官方图标 |
|
|
102
|
+
| Lucide | `lucide` | 1500+ | 现代简洁风格 |
|
|
103
|
+
| Tabler Icons | `tabler` | 4600+ | 高质量 SVG 图标 |
|
|
104
|
+
| Remix Icon | `ri` | 2500+ | 精心设计的图标库 |
|
|
105
|
+
| Heroicons | `heroicons` | 600+ | Tailwind CSS 官方图标 |
|
|
106
|
+
| Bootstrap Icons | `bi` | 2600+ | Bootstrap 官方图标 |
|
|
107
|
+
| Font Awesome 6 | `fa` | 2000+ | 最流行的图标字体 |
|
|
108
|
+
|
|
109
|
+
### Props
|
|
110
|
+
|
|
111
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
112
|
+
|------|------|--------|------|
|
|
113
|
+
| `icon` | `string` | `''` | 图标名称 |
|
|
114
|
+
| `size` | `number \| string` | `undefined` | 图标尺寸 |
|
|
115
|
+
| `color` | `string` | `undefined` | 图标颜色 |
|
|
116
|
+
| `spin` | `boolean` | `false` | 是否旋转动画 |
|
|
117
|
+
| `rotate` | `number` | `0` | 旋转角度(0, 90, 180, 270) |
|
|
118
|
+
|
|
119
|
+
### 与现有 YhIcon 组件兼容
|
|
120
|
+
|
|
121
|
+
现有的 `YhIcon` 组件完全兼容,无需修改:
|
|
122
|
+
|
|
123
|
+
```vue
|
|
124
|
+
<script setup>
|
|
125
|
+
import { YhIcon } from '@yh-ui/icons/vue'
|
|
126
|
+
// 或从 @yh-ui/components
|
|
127
|
+
import { YhIcon } from '@yh-ui/components'
|
|
128
|
+
</script>
|
|
129
|
+
|
|
130
|
+
<template>
|
|
131
|
+
<!-- 两种方式都可以使用 -->
|
|
132
|
+
<YhIcon name="mdi:home" />
|
|
133
|
+
<YhIcon icon="ep:search" :size="20" color="#409EFF" />
|
|
134
|
+
</template>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
### 常用图标快捷方式
|
|
138
|
+
|
|
139
|
+
内置常用图标别名:
|
|
140
|
+
|
|
141
|
+
```vue
|
|
142
|
+
<template>
|
|
143
|
+
<!-- 箭头 -->
|
|
144
|
+
<Icon icon="arrow-up" />
|
|
145
|
+
<Icon icon="arrow-down" />
|
|
146
|
+
<Icon icon="arrow-left" />
|
|
147
|
+
<Icon icon="arrow-right" />
|
|
148
|
+
|
|
149
|
+
<!-- 操作 -->
|
|
150
|
+
<Icon icon="close" />
|
|
151
|
+
<Icon icon="check" />
|
|
152
|
+
<Icon icon="plus" />
|
|
153
|
+
<Icon icon="minus" />
|
|
154
|
+
<Icon icon="delete" />
|
|
155
|
+
<Icon icon="edit" />
|
|
156
|
+
<Icon icon="search" />
|
|
157
|
+
<Icon icon="upload" />
|
|
158
|
+
<Icon icon="download" />
|
|
159
|
+
<Icon icon="refresh" />
|
|
160
|
+
<Icon icon="settings" />
|
|
161
|
+
<Icon icon="menu" />
|
|
162
|
+
|
|
163
|
+
<!-- 状态 -->
|
|
164
|
+
<Icon icon="loading" />
|
|
165
|
+
<Icon icon="success" />
|
|
166
|
+
<Icon icon="warning" />
|
|
167
|
+
<Icon icon="error" />
|
|
168
|
+
<Icon icon="info" />
|
|
169
|
+
|
|
170
|
+
<!-- 用户 -->
|
|
171
|
+
<Icon icon="user" />
|
|
172
|
+
<Icon icon="users" />
|
|
173
|
+
|
|
174
|
+
<!-- 文件 -->
|
|
175
|
+
<Icon icon="file" />
|
|
176
|
+
<Icon icon="folder" />
|
|
177
|
+
<Icon icon="image" />
|
|
178
|
+
</template>
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
## TypeScript 支持
|
|
182
|
+
|
|
183
|
+
完整的 TypeScript 类型支持:
|
|
184
|
+
|
|
185
|
+
```typescript
|
|
186
|
+
import type { IconName, IconSize, IconColor } from '@yh-ui/icons'
|
|
187
|
+
import { AVAILABLE_COLLECTIONS, RECOMMENDED_COLLECTIONS } from '@yh-ui/icons'
|
|
188
|
+
|
|
189
|
+
// 获取所有可用的图标集
|
|
190
|
+
console.log(AVAILABLE_COLLECTIONS)
|
|
191
|
+
|
|
192
|
+
// 获取推荐的图标集
|
|
193
|
+
console.log(RECOMMENDED_COLLECTIONS)
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
## 图标集管理
|
|
197
|
+
|
|
198
|
+
### 启用/禁用图标集
|
|
199
|
+
|
|
200
|
+
在 vite.config.ts 中配置:
|
|
201
|
+
|
|
202
|
+
```typescript
|
|
203
|
+
import Icons from 'unplugin-icons/vite'
|
|
204
|
+
import { collections } from '@iconify/json'
|
|
205
|
+
|
|
206
|
+
export default defineConfig({
|
|
207
|
+
plugins: [
|
|
208
|
+
Icons({
|
|
209
|
+
compiler: 'vue3',
|
|
210
|
+
autoInstall: true,
|
|
211
|
+
collections: {
|
|
212
|
+
// 只启用需要的图标集,减少打包体积
|
|
213
|
+
mdi: collections.mdi, // Material Design Icons
|
|
214
|
+
ep: collections.ep, // Element Plus
|
|
215
|
+
lucide: collections.lucide, // Lucide
|
|
216
|
+
}
|
|
217
|
+
})
|
|
218
|
+
]
|
|
219
|
+
})
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
### 按需加载的优势
|
|
223
|
+
|
|
224
|
+
使用 unplugin-icons 按需加载时:
|
|
225
|
+
|
|
226
|
+
- **开发环境**:只在代码中使用的图标会被加载
|
|
227
|
+
- **生产环境**:只打包实际使用的图标 SVG 代码
|
|
228
|
+
- **Tree-shaking**:未使用的图标会被完全剔除
|
|
229
|
+
|
|
230
|
+
对比全量引入,按需加载可以减少 90%+ 的图标相关代码体积。
|
|
231
|
+
|
|
232
|
+
## 常见问题
|
|
233
|
+
|
|
234
|
+
### 1. 图标不显示?
|
|
235
|
+
|
|
236
|
+
确保:
|
|
237
|
+
1. 图标集已在 vite.config.ts 中启用
|
|
238
|
+
2. 图标名称格式正确(如 `mdi:home`)
|
|
239
|
+
3. 已安装 `@iconify/vue` 依赖
|
|
240
|
+
|
|
241
|
+
### 2. 如何查找图标?
|
|
242
|
+
|
|
243
|
+
访问 [Iconify 图标库](https://icon-sets.iconify.design/) 搜索图标。
|
|
244
|
+
|
|
245
|
+
### 3. 如何使用自定义图标?
|
|
246
|
+
|
|
247
|
+
在 vite.config.ts 中添加自定义图标集:
|
|
248
|
+
|
|
249
|
+
```typescript
|
|
250
|
+
import Icons from 'unplugin-icons/vite'
|
|
251
|
+
import customIcons from './custom-icons.json'
|
|
252
|
+
|
|
253
|
+
export default defineConfig({
|
|
254
|
+
plugins: [
|
|
255
|
+
Icons({
|
|
256
|
+
compiler: 'vue3',
|
|
257
|
+
collections: {
|
|
258
|
+
'custom': customIcons
|
|
259
|
+
}
|
|
260
|
+
})
|
|
261
|
+
]
|
|
262
|
+
})
|
|
263
|
+
```
|
|
264
|
+
|
|
265
|
+
## License
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
const t = [
|
|
2
|
+
{
|
|
3
|
+
name: "Material Design Icons",
|
|
4
|
+
prefix: "mdi",
|
|
5
|
+
author: "Material Design Community",
|
|
6
|
+
license: "MIT",
|
|
7
|
+
total: 7e3
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
name: "Element Plus",
|
|
11
|
+
prefix: "ep",
|
|
12
|
+
author: "Element Plus Team",
|
|
13
|
+
license: "MIT",
|
|
14
|
+
total: 200
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
name: "Lucide",
|
|
18
|
+
prefix: "lucide",
|
|
19
|
+
author: "Lucide Contributors",
|
|
20
|
+
license: "ISC",
|
|
21
|
+
total: 1500
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
name: "Tabler Icons",
|
|
25
|
+
prefix: "tabler",
|
|
26
|
+
author: "Tabler Team",
|
|
27
|
+
license: "MIT",
|
|
28
|
+
total: 4600
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
name: "Remix Icon",
|
|
32
|
+
prefix: "ri",
|
|
33
|
+
author: "Remix Icon Team",
|
|
34
|
+
license: "Apache 2.0",
|
|
35
|
+
total: 2500
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
name: "Heroicons",
|
|
39
|
+
prefix: "heroicons",
|
|
40
|
+
author: "Tailwind Labs",
|
|
41
|
+
license: "MIT",
|
|
42
|
+
total: 600
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
name: "Bootstrap Icons",
|
|
46
|
+
prefix: "bi",
|
|
47
|
+
author: "Bootstrap Team",
|
|
48
|
+
license: "MIT",
|
|
49
|
+
total: 2600
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
name: "Font Awesome 6 Free",
|
|
53
|
+
prefix: "fa",
|
|
54
|
+
author: "Font Awesome",
|
|
55
|
+
license: "CC BY 4.0",
|
|
56
|
+
total: 2e3
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
name: "Carbon Icons",
|
|
60
|
+
prefix: "carbon",
|
|
61
|
+
author: "IBM",
|
|
62
|
+
license: "Apache 2.0",
|
|
63
|
+
total: 1600
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
name: "Ant Design Icons",
|
|
67
|
+
prefix: "antd",
|
|
68
|
+
author: "Ant Financial",
|
|
69
|
+
license: "MIT",
|
|
70
|
+
total: 800
|
|
71
|
+
}
|
|
72
|
+
];
|
|
73
|
+
function a(e) {
|
|
74
|
+
return t.find((n) => n.prefix === e);
|
|
75
|
+
}
|
|
76
|
+
function o() {
|
|
77
|
+
return t.map((e) => e.prefix);
|
|
78
|
+
}
|
|
79
|
+
export {
|
|
80
|
+
t as ICON_COLLECTIONS,
|
|
81
|
+
o as getAllPrefixes,
|
|
82
|
+
a as getCollection
|
|
83
|
+
};
|
package/dist/iconify.mjs
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { Icon as f } from "@iconify/vue";
|
|
2
|
+
import { h as u } from "vue";
|
|
3
|
+
function p(t) {
|
|
4
|
+
const { icon: n, size: r, color: e, spin: c, rotate: i } = t, o = {};
|
|
5
|
+
if (r) {
|
|
6
|
+
const s = typeof r == "number" ? `${r}px` : r;
|
|
7
|
+
o.width = s, o.height = s, o.fontSize = s;
|
|
8
|
+
}
|
|
9
|
+
return e && (o.color = e), i && (o.transform = `rotate(${i}deg)`), c && (o.animation = "spin 1s linear infinite"), {
|
|
10
|
+
icon: n,
|
|
11
|
+
style: Object.keys(o).length > 0 ? o : void 0
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
function h() {
|
|
15
|
+
return (t) => {
|
|
16
|
+
const n = p(t);
|
|
17
|
+
return u(f, n);
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
function a(t) {
|
|
21
|
+
return t.includes(":") ? t : t.includes("/") ? t.replace("/", ":") : `mdi:${t}`;
|
|
22
|
+
}
|
|
23
|
+
async function m(t) {
|
|
24
|
+
try {
|
|
25
|
+
return await import("@iconify/vue"), !!a(t);
|
|
26
|
+
} catch {
|
|
27
|
+
return !1;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
async function y(t) {
|
|
31
|
+
const { loadIcon: n, getIcon: r } = await import("@iconify/vue"), e = a(t), c = r(e);
|
|
32
|
+
if (c) return c;
|
|
33
|
+
try {
|
|
34
|
+
const i = await n(e);
|
|
35
|
+
if (!i)
|
|
36
|
+
throw new Error(`Icon not found: ${t}`);
|
|
37
|
+
return i;
|
|
38
|
+
} catch {
|
|
39
|
+
throw new Error(`Failed to load icon: ${t}`);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
export {
|
|
43
|
+
h as createIconifyComponent,
|
|
44
|
+
y as getIconData,
|
|
45
|
+
m as iconExists,
|
|
46
|
+
a as parseIconName
|
|
47
|
+
};
|
package/dist/index.d.ts
ADDED
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { AVAILABLE_COLLECTIONS as E, RECOMMENDED_COLLECTIONS as t } from "./types.mjs";
|
|
2
|
+
import { createIconifyComponent as I, getIconData as C, iconExists as L, parseIconName as O } from "./iconify.mjs";
|
|
3
|
+
import { COMMON_ICONS as N, DEFAULT_ENABLED_PRESETS as S, PREFIX_ALIAS as c, PRESETS as A, getPreset as f } from "./presets.mjs";
|
|
4
|
+
import { ICON_COLLECTIONS as p, getAllPrefixes as x, getCollection as _ } from "./collections.mjs";
|
|
5
|
+
import { Icon as a, YhIcon as i } from "./vue/icon.mjs";
|
|
6
|
+
export {
|
|
7
|
+
E as AVAILABLE_COLLECTIONS,
|
|
8
|
+
N as COMMON_ICONS,
|
|
9
|
+
S as DEFAULT_ENABLED_PRESETS,
|
|
10
|
+
p as ICON_COLLECTIONS,
|
|
11
|
+
a as Icon,
|
|
12
|
+
c as PREFIX_ALIAS,
|
|
13
|
+
A as PRESETS,
|
|
14
|
+
t as RECOMMENDED_COLLECTIONS,
|
|
15
|
+
i as YhIcon,
|
|
16
|
+
I as createIconifyComponent,
|
|
17
|
+
x as getAllPrefixes,
|
|
18
|
+
_ as getCollection,
|
|
19
|
+
C as getIconData,
|
|
20
|
+
f as getPreset,
|
|
21
|
+
L as iconExists,
|
|
22
|
+
O as parseIconName
|
|
23
|
+
};
|
package/dist/presets.mjs
ADDED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
const n = [
|
|
2
|
+
{
|
|
3
|
+
name: "Material Design Icons",
|
|
4
|
+
prefix: "mdi",
|
|
5
|
+
count: 7e3,
|
|
6
|
+
description: "最流行的开源图标库,Material Design 风格"
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
name: "Element Plus",
|
|
10
|
+
prefix: "ep",
|
|
11
|
+
count: 200,
|
|
12
|
+
description: "Element Plus 官方图标库"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
name: "Lucide",
|
|
16
|
+
prefix: "lucide",
|
|
17
|
+
count: 1500,
|
|
18
|
+
description: "现代、简洁风格的图标库"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
name: "Tabler Icons",
|
|
22
|
+
prefix: "tabler",
|
|
23
|
+
count: 4600,
|
|
24
|
+
description: "高质量的 SVG 图标库"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
name: "Remix Icon",
|
|
28
|
+
prefix: "ri",
|
|
29
|
+
count: 2500,
|
|
30
|
+
description: "精心设计的图标库"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
name: "Heroicons",
|
|
34
|
+
prefix: "heroicons",
|
|
35
|
+
count: 600,
|
|
36
|
+
description: "Tailwind CSS 官方图标库"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
name: "Bootstrap Icons",
|
|
40
|
+
prefix: "bi",
|
|
41
|
+
count: 2600,
|
|
42
|
+
description: "Bootstrap 官方图标库"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
name: "Font Awesome 6",
|
|
46
|
+
prefix: "fa",
|
|
47
|
+
count: 2e3,
|
|
48
|
+
description: "最流行的图标字体库"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
name: "Carbon Icons",
|
|
52
|
+
prefix: "carbon",
|
|
53
|
+
count: 1600,
|
|
54
|
+
description: "IBM Carbon 设计系统图标"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
name: "Ant Design Icons",
|
|
58
|
+
prefix: "antd",
|
|
59
|
+
count: 800,
|
|
60
|
+
description: "Ant Design 官方图标库"
|
|
61
|
+
}
|
|
62
|
+
];
|
|
63
|
+
function r(e) {
|
|
64
|
+
return n.find((i) => i.prefix === e);
|
|
65
|
+
}
|
|
66
|
+
const o = ["mdi", "ep", "lucide", "tabler", "ri"], d = {
|
|
67
|
+
// Material Design Icons
|
|
68
|
+
mdi: "mdi",
|
|
69
|
+
// Element Plus
|
|
70
|
+
ep: "ep",
|
|
71
|
+
"element-plus": "ep",
|
|
72
|
+
// Lucide
|
|
73
|
+
lucide: "lucide",
|
|
74
|
+
// Tabler
|
|
75
|
+
tabler: "tabler",
|
|
76
|
+
// Remix Icon
|
|
77
|
+
ri: "ri",
|
|
78
|
+
remix: "ri",
|
|
79
|
+
// Heroicons
|
|
80
|
+
heroicons: "heroicons",
|
|
81
|
+
hero: "heroicons",
|
|
82
|
+
// Bootstrap
|
|
83
|
+
bi: "bi",
|
|
84
|
+
bootstrap: "bi",
|
|
85
|
+
// Font Awesome
|
|
86
|
+
fa: "fa",
|
|
87
|
+
"font-awesome": "fa",
|
|
88
|
+
// Carbon
|
|
89
|
+
carbon: "carbon",
|
|
90
|
+
// Ant Design
|
|
91
|
+
antd: "antd",
|
|
92
|
+
"ant-design": "antd"
|
|
93
|
+
}, t = {
|
|
94
|
+
// 箭头
|
|
95
|
+
"arrow-up": "mdi:arrow-up",
|
|
96
|
+
"arrow-down": "mdi:arrow-down",
|
|
97
|
+
"arrow-left": "mdi:arrow-left",
|
|
98
|
+
"arrow-right": "mdi:arrow-right",
|
|
99
|
+
// 操作
|
|
100
|
+
close: "mdi:close",
|
|
101
|
+
check: "mdi:check",
|
|
102
|
+
plus: "mdi:plus",
|
|
103
|
+
minus: "mdi:minus",
|
|
104
|
+
delete: "mdi:delete",
|
|
105
|
+
edit: "mdi:pencil",
|
|
106
|
+
search: "mdi:magnify",
|
|
107
|
+
upload: "mdi:upload",
|
|
108
|
+
download: "mdi:download",
|
|
109
|
+
refresh: "mdi:refresh",
|
|
110
|
+
settings: "mdi:cog",
|
|
111
|
+
menu: "mdi:menu",
|
|
112
|
+
// 状态
|
|
113
|
+
loading: "mdi:loading",
|
|
114
|
+
success: "mdi:check-circle",
|
|
115
|
+
warning: "mdi:alert",
|
|
116
|
+
error: "mdi:alert-circle",
|
|
117
|
+
info: "mdi:information",
|
|
118
|
+
// 用户
|
|
119
|
+
user: "mdi:user",
|
|
120
|
+
users: "mdi:account-group",
|
|
121
|
+
// 文件
|
|
122
|
+
file: "mdi:file",
|
|
123
|
+
folder: "mdi:folder",
|
|
124
|
+
image: "mdi:image"
|
|
125
|
+
};
|
|
126
|
+
export {
|
|
127
|
+
t as COMMON_ICONS,
|
|
128
|
+
o as DEFAULT_ENABLED_PRESETS,
|
|
129
|
+
d as PREFIX_ALIAS,
|
|
130
|
+
n as PRESETS,
|
|
131
|
+
r as getPreset
|
|
132
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { IconCollection } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* 可用的图标集配置
|
|
4
|
+
*/
|
|
5
|
+
export declare const ICON_COLLECTIONS: IconCollection[];
|
|
6
|
+
/**
|
|
7
|
+
* 获取图标集配置
|
|
8
|
+
*/
|
|
9
|
+
export declare function getCollection(prefix: string): IconCollection | undefined;
|
|
10
|
+
/**
|
|
11
|
+
* 获取所有图标集前缀
|
|
12
|
+
*/
|
|
13
|
+
export declare function getAllPrefixes(): string[];
|
|
14
|
+
//# sourceMappingURL=collections.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"collections.d.ts","sourceRoot":"","sources":["../../src/collections.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,cAAc,EAuE5C,CAAA;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS,CAExE;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,EAAE,CAEzC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { IconifyJSON } from '@iconify/vue';
|
|
2
|
+
export declare const POPULAR_COLLECTION_PREFIXES: readonly ["mdi", "ep", "lucide", "tabler", "ri", "bi", "heroicons", "fa", "carbon", "antd"];
|
|
3
|
+
export type CollectionPrefix = typeof POPULAR_COLLECTION_PREFIXES[number];
|
|
4
|
+
/**
|
|
5
|
+
* 获取图标集前缀列表
|
|
6
|
+
*/
|
|
7
|
+
export declare function getCollectionPrefixes(): string[];
|
|
8
|
+
export type { IconifyJSON };
|
|
9
|
+
//# sourceMappingURL=config.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAI/C,eAAO,MAAM,2BAA2B,6FAW9B,CAAA;AAEV,MAAM,MAAM,gBAAgB,GAAG,OAAO,2BAA2B,CAAC,MAAM,CAAC,CAAA;AAEzE;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,EAAE,CAEhD;AAGD,YAAY,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { VNode } from 'vue';
|
|
2
|
+
import { IconName, IconSize, IconColor, IconRotate } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* 创建 Iconify 图标组件
|
|
5
|
+
* 这是 @yh-ui/icons 核心组件,提供高性能的图标渲染
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```vue
|
|
9
|
+
* <script setup>
|
|
10
|
+
* import { Icon } from '@yh-ui/icons/vue'
|
|
11
|
+
* </script>
|
|
12
|
+
*
|
|
13
|
+
* <template>
|
|
14
|
+
* <!-- 使用前缀:图标名格式 -->
|
|
15
|
+
* <Icon icon="mdi:home" />
|
|
16
|
+
*
|
|
17
|
+
* <!-- 使用自定义尺寸和颜色 -->
|
|
18
|
+
* <Icon icon="mdi:home" :size="24" color="#ff0000" />
|
|
19
|
+
*
|
|
20
|
+
* <!-- 旋转图标 -->
|
|
21
|
+
* <Icon icon="mdi:loading" :rotate="90" />
|
|
22
|
+
* </template>
|
|
23
|
+
*/
|
|
24
|
+
export interface IconifyProps {
|
|
25
|
+
/** 图标名称,支持格式:mdi:home, ep:search, lucide:home */
|
|
26
|
+
icon: IconName;
|
|
27
|
+
/** 图标尺寸 */
|
|
28
|
+
size?: IconSize;
|
|
29
|
+
/** 图标颜色 */
|
|
30
|
+
color?: IconColor;
|
|
31
|
+
/** 是否旋转动画 */
|
|
32
|
+
spin?: boolean;
|
|
33
|
+
/** 旋转角度(0, 90, 180, 270) */
|
|
34
|
+
rotate?: IconRotate;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Iconify 图标组件 - 渲染用组件
|
|
38
|
+
*/
|
|
39
|
+
export declare function createIconifyComponent(): (props: IconifyProps) => VNode;
|
|
40
|
+
/**
|
|
41
|
+
* Iconify Vue 组件 - 可直接导入使用
|
|
42
|
+
* 需要配合 unplugin-icons 实现按需加载
|
|
43
|
+
*/
|
|
44
|
+
export declare const Icon: (props: IconifyProps) => VNode;
|
|
45
|
+
/**
|
|
46
|
+
* Iconify Icon 组件 - 别名
|
|
47
|
+
*/
|
|
48
|
+
export { Icon as Iconify };
|
|
49
|
+
/**
|
|
50
|
+
* 解析图标名称
|
|
51
|
+
* 支持多种格式:mdi:home, mdi/home, @iconify-icons/mdi/home
|
|
52
|
+
*
|
|
53
|
+
* @param name - 图标名称
|
|
54
|
+
* @returns 解析后的图标名称
|
|
55
|
+
*/
|
|
56
|
+
export declare function parseIconName(name: string): string;
|
|
57
|
+
/**
|
|
58
|
+
* 检查图标是否存在
|
|
59
|
+
* @param name - 图标名称
|
|
60
|
+
* @returns 是否存在
|
|
61
|
+
*/
|
|
62
|
+
export declare function iconExists(name: string): Promise<boolean>;
|
|
63
|
+
/**
|
|
64
|
+
* 获取图标数据
|
|
65
|
+
* @param name - 图标名称
|
|
66
|
+
* @returns 图标的 SVG 数据
|
|
67
|
+
*/
|
|
68
|
+
export declare function getIconData(name: string): Promise<Required<import('@iconify/vue/dist/iconify.js').IconifyIcon>>;
|
|
69
|
+
//# sourceMappingURL=iconify.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"iconify.d.ts","sourceRoot":"","sources":["../../src/iconify.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAK,KAAK,KAAK,EAAE,MAAM,KAAK,CAAA;AACnC,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAExE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,YAAY;IAC3B,iDAAiD;IACjD,IAAI,EAAE,QAAQ,CAAA;IACd,WAAW;IACX,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,WAAW;IACX,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,aAAa;IACb,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,4BAA4B;IAC5B,MAAM,CAAC,EAAE,UAAU,CAAA;CACpB;AAuCD;;GAEG;AACH,wBAAgB,sBAAsB,KAC5B,OAAO,YAAY,KAAG,KAAK,CAIpC;AAED;;;GAGG;AACH,eAAO,MAAM,IAAI,UAVA,YAAY,KAAG,KAUY,CAAA;AAE5C;;GAEG;AACH,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,CAAA;AAE1B;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAclD;AAED;;;;GAIG;AACH,wBAAsB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAU/D;AAED;;;;GAIG;AACH,wBAAsB,WAAW,CAAC,IAAI,EAAE,MAAM,yEAkB7C"}
|