feat: 不使用iconfont来引入图标，改为svgIcon

a-super-cat · Mar 24, 2024 · 5a05114 · 5a05114
1 parent 02211b6
commit 5a05114
Show file tree

Hide file tree

Showing 14 changed files with 7 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jiazhiwei/dev-server-web",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "files": [
     "dist"
   ],

diff --git a/public/iconfont.css b/public/iconfont.css
diff --git a/public/iconfont.js b/public/iconfont.js
diff --git a/public/iconfont.json b/public/iconfont.json
diff --git a/public/iconfont.ttf b/public/iconfont.ttf
diff --git a/public/iconfont.woff b/public/iconfont.woff
diff --git a/public/iconfont.woff2 b/public/iconfont.woff2
diff --git a/src/App.vue b/src/App.vue
@@ -28,7 +28,8 @@ const locale = lang.toLocaleLowerCase().includes('zh') ? zhCn : en
             :key="item.name"
             @click="handleMenuItemClick(item)"
           >
-            <span :class="`iconfont text-4xl ${item.icon}`" />
+          <SvgIcon class="text-gray-200" :icon-name="item.icon" />
+            <!-- <span :class="`iconfont text-4xl ${item.icon}`" /> -->
             {{ item.name }}
           </div>
         </div>

diff --git a/src/assets/apiMock.png b/src/assets/apiMock.png
diff --git a/src/assets/apiTest.png b/src/assets/apiTest.png
diff --git a/src/assets/request.png b/src/assets/request.png
diff --git a/src/assets/svgIcons/mock.svg b/src/assets/svgIcons/mock.svg
diff --git a/src/assets/svgIcons/requestApi.svg b/src/assets/svgIcons/requestApi.svg
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -5,21 +5,15 @@ export const menuItems: MenuItem[] = [
   {
     path: '/',
     name: '数据模拟',
-    icon: 'icon-wangyuanjing',
+    icon: 'mock',
     component: () => import('@/views/HomeView.vue'),
   },
   {
     path: '/request',
     name: '接口请求',
-    icon: 'icon-huiduceshi',
+    icon: 'requestApi',
     component: () => import('@/views/ApiRequest.vue'),
   },
-  {
-    path: '/apiTest',
-    name: '接口测试',
-    icon: 'icon-a-5',
-    component: () => import('@/views/ApiTest.vue'),
-  }
 ];
 
 // 处理请求的方式