diff --git a/src/components/CreateServiceOrder/index.vue b/src/components/CreateServiceOrder/index.vue
index 554e59b..292f676 100644
--- a/src/components/CreateServiceOrder/index.vue
+++ b/src/components/CreateServiceOrder/index.vue
@@ -37,9 +37,7 @@
             </div>
 
             <div v-else class="w-full h-full flex flex-items-center flex-justify-center" @click="handleChooseImage">
-              <uni-icons fontFamily="znicons" size="24" color="#6A717F">
-                {{ iconsMap["zn-camera"] }}
-              </uni-icons>
+              <zn-icon name="zn-camera" size="24" color="#6A717F"></zn-icon>
             </div>
           </div>
         </div>
@@ -74,7 +72,7 @@ import { ref, computed, onMounted, nextTick, defineProps, watch } from "vue";
 import { SCROLL_TO_BOTTOM } from "@/constants/constant";
 import { createWorkOrder } from "@/api/workOrder";
 import { uploadFile } from "@/api/upload";
-import { iconsMap } from "@/assets/fonts/znicons";
+import ZnIcon from "@/components/ZnIcon/index.vue";
 
 const props = defineProps({
   toolCall: {
diff --git a/src/components/GoodDetail/index.vue b/src/components/GoodDetail/index.vue
index 1e1c288..66943d5 100644
--- a/src/components/GoodDetail/index.vue
+++ b/src/components/GoodDetail/index.vue
@@ -12,9 +12,7 @@
             1,
         }">
           <div class="flex flex-items-center flex-row flex-shrink-0 mr-8">
-            <van-icon fontFamily="znicons" size="20" color="#333">
-              {{ iconsMap[moduleItem.moduleIcon] }}
-            </van-icon>
+            <zn-icon :name="moduleItem.moduleIcon" size="20" color="#333"></zn-icon>
             <span class="ml-4 font-size-14 color-171717 line-height-20">
               {{ moduleItem.moduleTitle }}
             </span>
@@ -33,7 +31,7 @@
 import { defineProps } from "vue";
 import Vue3MarkdownIt from 'vue3-markdown-it';
 import ModuleTitle from "@/components/ModuleTitle/index.vue";
-import { iconsMap } from "@/assets/fonts/znicons";
+import ZnIcon from "@/components/ZnIcon/index.vue";
 
 // Props定义
 const props = defineProps({
@@ -47,10 +45,3 @@ const props = defineProps({
   },
 });
 </script>
-
-<style scoped lang="scss">
-@font-face {
-  font-family: znicons;
-  src: url("@/assets/fonts/znicons.ttf");
-}
-</style>
diff --git a/src/pages/goods/components/GoodFacility/index.vue b/src/pages/goods/components/GoodFacility/index.vue
index 6164179..1a8f56e 100644
--- a/src/pages/goods/components/GoodFacility/index.vue
+++ b/src/pages/goods/components/GoodFacility/index.vue
@@ -5,9 +5,7 @@
         'border-bottom': index < goodsData.commodityEquipment.length - 1,
       }">
         <div class="flex items-center flex-row shrink-0">
-          <van-icon fontFamily="znicons" size="20" color="#171717">
-
-          </van-icon>
+          <zn-icon :name="moduleItem.icon" size="20" color="#171717"></zn-icon>
           <span class="ml-[4px] text-[12px] text-[#171717] leading-[20px]">
             {{ moduleItem.title }}
           </span>
@@ -24,7 +22,7 @@
 </template>
 
 <script setup>
-import { iconsMap } from "@/assets/fonts/znicons";
+import ZnIcon from "@/components/ZnIcon/index.vue";
 import { defineProps } from "vue";
 
 // Props定义