IconTestPage.vue
4.81 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<template>
<div class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50 p-4">
<div class="mx-auto max-w-3xl">
<div class="flex items-center justify-between">
<div>
<div class="text-xl font-bold text-slate-900">图标库测试</div>
<div class="mt-1 text-sm text-slate-600">在本页验证 Iconify 的使用体验与渲染效果</div>
</div>
<div class="flex items-center gap-3">
<van-icon name="apps-o" size="22" class="text-slate-700" />
<font-awesome-icon icon="eye" class="text-slate-700" />
</div>
</div>
<div class="mt-4 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div class="flex-1">
<div class="text-sm font-medium text-slate-800">Iconify 图标名</div>
<div class="mt-2 flex items-center gap-2">
<input
v-model="icon_name"
type="text"
class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm outline-none focus:border-slate-400"
placeholder="例如：mdi:home / lucide:camera / solar:heart-bold"
/>
<button
type="button"
class="shrink-0 rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50"
@click="resetIcon"
>
重置
</button>
</div>
</div>
<div class="flex gap-4">
<div class="w-28">
<div class="text-sm font-medium text-slate-800">大小</div>
<input v-model.number="icon_size" type="range" min="16" max="64" class="mt-3 w-full" />
<div class="mt-1 text-xs text-slate-500">{{ icon_size }}px</div>
</div>
<div class="w-28">
<div class="text-sm font-medium text-slate-800">颜色</div>
<input v-model="icon_color" type="color" class="mt-2 h-9 w-full rounded-md border border-slate-200 bg-white" />
</div>
</div>
</div>
<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
<div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
<div class="text-sm font-medium text-slate-800">Iconify（推荐）</div>
<div class="mt-3 flex items-center gap-3">
<Icon :icon="icon_name" :style="{ fontSize: icon_size + 'px', color: icon_color }" />
<div class="text-xs text-slate-600">
<div class="font-mono">{{ icon_name }}</div>
<div class="mt-1">按需加载 SVG，无需手动挑选图标包</div>
</div>
</div>
</div>
<div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
<div class="text-sm font-medium text-slate-800">Vant / FontAwesome（对比）</div>
<div class="mt-3 flex items-center gap-4">
<div class="flex items-center gap-2">
<van-icon name="star-o" :size="icon_size" :color="icon_color" />
<div class="text-xs text-slate-600">van-icon</div>
</div>
<div class="flex items-center gap-2">
<font-awesome-icon icon="star" :style="{ fontSize: icon_size + 'px', color: icon_color }" />
<div class="text-xs text-slate-600">fa</div>
</div>
</div>
</div>
</div>
<div class="mt-4 rounded-xl border border-slate-200 bg-white p-4">
<div class="text-sm font-medium text-slate-800">常用图标示例</div>
<div class="mt-3 grid grid-cols-3 gap-3 sm:grid-cols-6">
<button
v-for="item in quick_icons"
:key="item"
type="button"
class="flex flex-col items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-2 py-3 hover:bg-slate-100"
@click="icon_name = item"
>
<Icon :icon="item" class="text-slate-800" style="font-size: 26px;" />
<div class="w-full truncate text-[11px] text-slate-600">{{ item }}</div>
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const icon_name = ref('mdi:home')
const icon_size = ref(32)
const icon_color = ref('#0f172a')
const quick_icons = [
'mdi:home',
'mdi:account',
'mdi:bell-outline',
'mdi:qrcode-scan',
'lucide:camera',
'lucide:search',
'solar:heart-bold',
'solar:cart-3-bold',
'tabler:settings',
'tabler:share',
'ri:wechat-fill',
'ph:download-simple-bold'
]
const resetIcon = () => {
icon_name.value = 'mdi:home'
icon_size.value = 32
icon_color.value = '#0f172a'
}
</script>
<style scoped></style>