u

code/base-project/base-uniapp/src/components/icon/index.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { ref, watchEffect } from 'vue'
-
-interface Props {
-  name: string // e.g. "mdi:home" / "ri:account-box-fill"
-  size?: number | string
-  color?: string
-}
-const props = defineProps<Props>()
-
-const svgContent = ref<string>('')
-
-watchEffect(async () => {
-  if (!props.name)
-    return
-  const [collection, icon] = props.name.split(':')
-  if (!collection || !icon)
-    return
-
-  const url = `https://cdn.jsdelivr.net/npm/@iconify-json/${collection}/icons.json`
-  const res = await fetch(url).then(r => r.json())
-  const data = res.icons?.[icon]
-  if (!data) {
-    console.warn(`[Icon] not found: ${props.name}`)
-    return
-  }
-
-  // 生成 svg
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${res.width || 24} ${res.height || 24}" fill="currentColor">${data.body}</svg>`
-  svgContent.value = svg
-})
-</script>
-
-<template>
-  <span
-    :style="{
-      display: 'inline-block',
-      width: typeof size === 'number' ? `${size}px` : size || '1em',
-      height: typeof size === 'number' ? `${size}px` : size || '1em',
-      color: color || 'currentColor',
-    }"
-    v-html="svgContent"
-  />
-</template>

code/base-project/base-uniapp/src/pages/home/index.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Icon from '@/components/icon/index.vue'
+import { getIcon } from '@iconify/utils'
+import { Icon } from '@iconify/vue'
 import { safeAreaInsets } from '@/utils/systemInfo'
 
 const a = ref('1')
@@ -11,15 +12,11 @@ onMounted(() => {
 
 <template>
   <view :style="{ marginTop: `${safeAreaInsets?.top}px` }">
-    <image src="https://api.iconify.design/material-symbols:10k.svg?color=red" style="width: 1em;height: 1em;" />
+    <!-- <image src="https://api.iconify.design/material-symbols:10k.svg?color=red" style="width: 1em;height: 1em;" /> -->
-    12345678191998888
+    <!-- 第一种使用方式：使用 css 样式控制大小和颜色（个人更推荐，可以使用 rpx 单位） -->
-    <!-- 跟随文字颜色 -->
+    <Icon icon="ix:light-dark" style="color: deepskyblue; font-size: 66rpx;" />
-    <Icon name="mdi:home" size="24" />
+    <br>
-
+    <!-- 第二种使用方式：可以使用 attribute 的方式定义大小和颜色（注：经测试宽高单位不支持 rpx ） -->
-    <!-- 强制指定颜色 -->
+    <Icon icon="ix:light-dark" width="40px" height="40px" color="#007aff" />
-    <Icon name="ri:account-box-fill" size="32" color="blue" />
-
-    <!-- 使用 Heroicons -->
-    <Icon name="heroicons-outline:search" size="2em" />
   </view>
 </template>