feat(projects): 新增自定义svg图标动态渲染

.eslintignore

@@ -12,5 +12,4 @@ lib
 .vscode
 .local
 package.json
-components.d.ts
 !.env-config.ts

build/plugins/iconify.ts

@@ -1,21 +0,0 @@
-import Icons from 'unplugin-icons/vite'; // iconify图标
-import IconsResolver from 'unplugin-icons/resolver';
-import Components from 'unplugin-vue-components/vite'; // 从指定目录自动导入组件
-import { FileSystemIconLoader } from 'unplugin-icons/loaders';
-
-export default (srcPath: string) => {
-  return [
-    Icons({
-      compiler: 'vue3',
-      customCollections: {
-        custom: FileSystemIconLoader(`${srcPath}/assets/svg`),
-      },
-      scale: 1,
-      defaultClass: 'inline-block',
-    }),
-    Components({
-      dts: true,
-      resolvers: [IconsResolver({ customCollections: ['custom'], componentPrefix: 'icon' })],
-    }),
-  ];
-};

components.d.ts

@@ -13,11 +13,11 @@ declare module 'vue' {
     IconAntDesignCloseOutlined: typeof import('~icons/ant-design/close-outlined')['default'];
     IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default'];
     IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default'];
+    IconCustomActivity: typeof import('~icons/custom/activity')['default'];
     IconCustomAvatar: typeof import('~icons/custom/avatar')['default'];
-    IconCustomEmptyData: typeof import('~icons/custom/empty-data')['default'];
+    IconCustomCast: typeof import('~icons/custom/cast')['default'];
     IconCustomLogo: typeof import('~icons/custom/logo')['default'];
     IconCustomLogoFill: typeof import('~icons/custom/logo-fill')['default'];
-    IconCustomNetworkError: typeof import('~icons/custom/network-error')['default'];
     IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default'];
     IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default'];
     IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default'];

src/components/business/index.ts

@@ -1,4 +0,0 @@
-import LoadingEmptyWrapper from './LoadingEmptyWrapper.vue';
-import LoginAgreement from './LoginAgreement.vue';
-
-export { LoadingEmptyWrapper, LoginAgreement };

src/components/common/index.ts

@@ -1,7 +0,0 @@
-import NaiveProvider from './NaiveProvider.vue';
-import SystemLogo from './SystemLogo.vue';
-import DarkModeSwitch from './DarkModeSwitch.vue';
-import DarkModeContainer from './DarkModeContainer.vue';
-import HoverContainer from './HoverContainer.vue';
-
-export { NaiveProvider, SystemLogo, DarkModeSwitch, DarkModeContainer, HoverContainer };

src/components/custom/index.ts

@@ -1,8 +0,0 @@
-import BetterScroll from './BetterScroll.vue';
-import CountTo from './CountTo.vue';
-import ImageVerify from './ImageVerify.vue';
-import WebSiteLink from './WebSiteLink.vue';
-import GithubLink from './GithubLink.vue';
-import IconSelect from './IconSelect.vue';
-
-export { BetterScroll, CountTo, ImageVerify, WebSiteLink, GithubLink, IconSelect };

src/components/index.ts

@@ -1,3 +0,0 @@
-export * from './custom';
-export * from './common';
-export * from './business';

src/views/plugin/icon/index.vue

@@ -17,25 +17,18 @@
       </template>
     </n-card>
     <n-card title="SvgIcon 示例" class="mt-10px shadow-sm rounded-16px">
-      <div class="pb-12px text-16px">在src/assets下的svg文件，通过在template里面以 icon-custom-{文件名} 渲染</div>
+      <div class="pb-12px text-16px">
+        在src/assets/svg文件夹下的svg文件，通过在template里面以 icon-custom-{文件名} 直接渲染，动态渲染需要import组件
+      </div>
       <div class="grid grid-cols-10">
         <div class="mt-5px flex-x-center">
-          <icon-custom-activity class="text-30px" />
+          <icon-custom-activity class="text-40px text-success" />
         </div>
         <div class="mt-5px flex-x-center">
-          <icon-custom-at-sign class="text-30px text-primary" />
+          <icon-custom-cast class="text-20px text-error" />
         </div>
-        <div class="mt-5px flex-x-center">
+        <div v-for="(item, index) in customIcons" :key="index" class="mt-5px flex-x-center">
-          <icon-custom-cast class="text-18px text-info" />
+          <component :is="item" class="text-30px text-primary" />
-        </div>
-        <div class="mt-5px flex-x-center">
-          <icon-custom-chrome class="text-48px text-success" />
-        </div>
-        <div class="mt-5px flex-x-center">
-          <icon-custom-copy class="text-30px text-error" />
-        </div>
-        <div class="mt-5px flex-x-center">
-          <icon-custom-wind class="text-30px text-warning" />
         </div>
       </div>
     </n-card>
@@ -46,7 +39,15 @@
 import { ref } from 'vue';
 import { Icon } from '@iconify/vue';
 import { icons } from './icons';
+import CustomActivity from '~icons/custom/activity';
+import CustomAtSign from '~icons/custom/at-sign';
+import CustomCast from '~icons/custom/cast';
+import CustomChrome from '~icons/custom/chrome';
+import CustomCopy from '~icons/custom/copy';
+import CustomWind from '~icons/custom/wind';
 
 const selectValue = ref('');
+
+const customIcons = [CustomActivity, CustomAtSign, CustomCast, CustomChrome, CustomCopy, CustomWind];
 </script>
 <style scoped></style>