Merge branch 'perf/offline-icon' into 'main'

perf: 使用离线Icon图标

See merge request yunteng/thingskit-front!1497

+import { IconifyJSON } from '@iconify/iconify';
+import { camelCase } from 'lodash-es';
+
+interface IconType {
+  prefix: string;
+  icon: string;
+  alias?: string;
+}
+
+export function getCacheIcons() {
+  const storageKeys = Object.keys(localStorage);
+
+  const iconifyKeys = storageKeys.filter((key) => key.startsWith('iconify'));
+
+  const allIcons: IconType[] = [];
+  for (const key of iconifyKeys) {
+    try {
+      const res: Record<'data', IconifyJSON> = JSON.parse(localStorage.getItem(key)!);
+
+      const {
+        data: { prefix, icons, aliases },
+      } = res;
+
+      allIcons.push(...Object.keys(icons).map((icon) => ({ icon, prefix })));
+
+      allIcons.push(
+        ...Object.entries(aliases || {}).map(([key, value]) => ({
+          icon: key,
+          alias: value.parent,
+          prefix,
+        }))
+      );
+    } catch {
+      continue;
+    }
+  }
+
+  const collect = allIcons.reduce((prev, next) => {
+    if (Reflect.has(prev, next.prefix)) {
+      prev[next.prefix].push(next);
+    } else {
+      prev[next.prefix] = [next];
+    }
+    return prev;
+  }, {} as Record<string, IconType[]>);
+
+  const icons = Object.entries(collect).reduce(
+    (prev, [key, value]) => {
+      for (const { icon, alias } of value) {
+        const importName = camelCase(`${key}-${alias || icon}`);
+
+        prev.imports.push(
+          `import ${importName} from 'virtual:@iconify/json/${key}/${alias || icon}';`
+        );
+
+        prev.registerIcons.push(`addIcon('${key}:${icon}', ${importName});`);
+      }
+
+      return prev;
+    },
+    { imports: [], registerIcons: [] } as Record<'imports' | 'registerIcons', string[]>
+  );
+
+  return `${[...new Set(icons.imports)].join('\n')}\n${[...new Set(icons.registerIcons)].join(
+    '\n'
+  )}`;
+}

+import { existsSync, readFileSync } from 'fs';
+import { Plugin } from 'vite';
+import { IconifyJSON } from '@iconify/iconify';
+
+const Plugin_Name = '@iconify-icon-offline-import';
+
+const baseMsg = (msg: string) => `[${Plugin_Name}] ${msg}`;
+
+export default function IconifyPlugin(): Plugin {
+  const virtualModuleId = 'virtual:@iconify/json';
+
+  const cache: Record<string, IconifyJSON> = {};
+
+  return {
+    name: 'iconify-json-tree-sharking',
+    resolveId(id) {
+      if (id.includes(virtualModuleId)) {
+        return '\0' + id;
+      }
+    },
+    async load(id) {
+      if (id.includes(virtualModuleId)) {
+        const iconPaths = id.split(virtualModuleId);
+        const iconPath = iconPaths[iconPaths.length - 1];
+
+        if (!iconPath) return 'export default {}';
+
+        const [collectName, iconName] = iconPath.split('/').filter(Boolean);
+
+        const collectPath = require.resolve(`@iconify/json/json/${collectName}.json`);
+
+        if (!existsSync(collectPath)) {
+          const msg = baseMsg(`Can't found virtual:@iconify/json/${collectName}/${iconName}.`);
+          throw new Error(msg);
+        }
+
+        let collect: IconifyJSON;
+        if (cache[collectName]) {
+          collect = cache[collectName];
+        } else {
+          const res = readFileSync(collectPath, {
+            encoding: 'utf-8',
+          });
+          collect = JSON.parse(res);
+          cache[collectName] = collect;
+        }
+
+        if (Object.hasOwn(collect.icons, iconName)) {
+          return `export default ${JSON.stringify(
+            Object.assign(collect.icons[iconName], {
+              width: collect.width,
+              height: collect.height,
+            }),
+            null,
+            2
+          )}`;
+        } else {
+          const msg = baseMsg(`Can't found ${iconName} from ${collectName} collect.`);
+          throw new Error(msg);
+        }
+      }
+    },
+  };
+}

@@ -16,6 +16,7 @@ import { configThemePlugin } from './theme';
 import { configImageminPlugin } from './imagemin';
 import { configSvgIconsPlugin } from './svgSprite';
 import { configHmrPlugin } from './hmr';
+import IconifyPlugin from './iconify';
 
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   const {
@@ -77,5 +78,6 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
     vitePlugins.push(configPwaConfig(viteEnv));
   }
 
+  vitePlugins.push(IconifyPlugin());
   return vitePlugins;
 }

@@ -87,7 +87,7 @@
   "devDependencies": {
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
-    "@iconify/json": "^1.1.386",
+    "@iconify/json": "^2.2.257",
     "@purge-icons/generated": "^0.7.0",
     "@types/codemirror": "^5.60.2",
     "@types/crypto-js": "^4.0.2",

+import antDesignGoldOutlined from 'virtual:@iconify/json/ant-design/gold-outlined';
+import antDesignHomeOutlined from 'virtual:@iconify/json/ant-design/home-outlined';
+import antDesignIssuesCloseOutlined from 'virtual:@iconify/json/ant-design/issues-close-outlined';
+import antDesignMacCommandOutlined from 'virtual:@iconify/json/ant-design/mac-command-outlined';
+import antDesignMessageOutlined from 'virtual:@iconify/json/ant-design/message-outlined';
+import antDesignMobileOutlined from 'virtual:@iconify/json/ant-design/mobile-outlined';
+import antDesignNotificationOutlined from 'virtual:@iconify/json/ant-design/notification-outlined';
+import antDesignPieChartOutlined from 'virtual:@iconify/json/ant-design/pie-chart-outlined';
+import antDesignProjectOutlined from 'virtual:@iconify/json/ant-design/project-outlined';
+import antDesignProjectTwotone from 'virtual:@iconify/json/ant-design/project-twotone';
+import antDesignReconciliationOutlined from 'virtual:@iconify/json/ant-design/reconciliation-outlined';
+import antDesignSelectOutlined from 'virtual:@iconify/json/ant-design/select-outlined';
+import antDesignShoppingOutlined from 'virtual:@iconify/json/ant-design/shopping-outlined';
+import antDesignSoundOutlined from 'virtual:@iconify/json/ant-design/sound-outlined';
+import antDesignSwapOutlined from 'virtual:@iconify/json/ant-design/swap-outlined';
+import antDesignTagsOutlined from 'virtual:@iconify/json/ant-design/tags-outlined';
+import antDesignUngroupOutlined from 'virtual:@iconify/json/ant-design/ungroup-outlined';
+import antDesignVideoCameraAddOutlined from 'virtual:@iconify/json/ant-design/video-camera-add-outlined';
+import antDesignVideoCameraOutlined from 'virtual:@iconify/json/ant-design/video-camera-outlined';
+import antDesignAlertOutlined from 'virtual:@iconify/json/ant-design/alert-outlined';
+import antDesignAliyunOutlined from 'virtual:@iconify/json/ant-design/aliyun-outlined';
+import antDesignBarChartOutlined from 'virtual:@iconify/json/ant-design/bar-chart-outlined';
+import antDesignBookTwotone from 'virtual:@iconify/json/ant-design/book-twotone';
+import antDesignBorderBottomOutlined from 'virtual:@iconify/json/ant-design/border-bottom-outlined';
+import antDesignBorderOuterOutlined from 'virtual:@iconify/json/ant-design/border-outer-outlined';
+import antDesignBranchesOutlined from 'virtual:@iconify/json/ant-design/branches-outlined';
+import antDesignCalculatorTwotone from 'virtual:@iconify/json/ant-design/calculator-twotone';
+import antDesignCalendarFilled from 'virtual:@iconify/json/ant-design/calendar-filled';
+import antDesignCloudServerOutlined from 'virtual:@iconify/json/ant-design/cloud-server-outlined';
+import antDesignCodeOutlined from 'virtual:@iconify/json/ant-design/code-outlined';
+import antDesignContactsOutlined from 'virtual:@iconify/json/ant-design/contacts-outlined';
+import antDesignContainerOutlined from 'virtual:@iconify/json/ant-design/container-outlined';
+import antDesignContainerTwotone from 'virtual:@iconify/json/ant-design/container-twotone';
+import antDesignCopyTwotone from 'virtual:@iconify/json/ant-design/copy-twotone';
+import antDesignDashboardOutlined from 'virtual:@iconify/json/ant-design/dashboard-outlined';
+import antDesignDeploymentUnitOutlined from 'virtual:@iconify/json/ant-design/deployment-unit-outlined';
+import antDesignEnvironmentOutlined from 'virtual:@iconify/json/ant-design/environment-outlined';
+import antDesignExceptionOutlined from 'virtual:@iconify/json/ant-design/exception-outlined';
+import antDesignFileAddOutlined from 'virtual:@iconify/json/ant-design/file-add-outlined';
+import antDesignFileDoneOutlined from 'virtual:@iconify/json/ant-design/file-done-outlined';
+import antDesignFileMarkdownOutlined from 'virtual:@iconify/json/ant-design/file-markdown-outlined';
+import antDesignFilePptOutlined from 'virtual:@iconify/json/ant-design/file-ppt-outlined';
+import antDesignFileTextOutlined from 'virtual:@iconify/json/ant-design/file-text-outlined';
+import materialSymbolsCallMade from 'virtual:@iconify/json/material-symbols/call-made';
+import materialSymbolsUpload from 'virtual:@iconify/json/material-symbols/upload';
+import materialSymbolsInputSharp from 'virtual:@iconify/json/material-symbols/input-sharp';
+import materialSymbolsMenu from 'virtual:@iconify/json/material-symbols/menu';
+import materialSymbolsSms from 'virtual:@iconify/json/material-symbols/sms';
+import materialSymbolsBackup from 'virtual:@iconify/json/material-symbols/backup';
+import materialSymbolsFilterList from 'virtual:@iconify/json/material-symbols/filter-list';
+import materialSymbolsFlashOn from 'virtual:@iconify/json/material-symbols/flash-on';
+import materialSymbolsSearch from 'virtual:@iconify/json/material-symbols/search';
+import materialSymbolsSettingsEthernet from 'virtual:@iconify/json/material-symbols/settings-ethernet';
+import mdiCheck from 'virtual:@iconify/json/mdi/check';
+import { addIcon } from '@iconify/iconify';
+
+addIcon('ant-design:gold-outlined', antDesignGoldOutlined);
+addIcon('ant-design:home-outlined', antDesignHomeOutlined);
+addIcon('ant-design:issues-close-outlined', antDesignIssuesCloseOutlined);
+addIcon('ant-design:mac-command-outlined', antDesignMacCommandOutlined);
+addIcon('ant-design:message-outlined', antDesignMessageOutlined);
+addIcon('ant-design:mobile-outlined', antDesignMobileOutlined);
+addIcon('ant-design:notification-outlined', antDesignNotificationOutlined);
+addIcon('ant-design:pie-chart-outlined', antDesignPieChartOutlined);
+addIcon('ant-design:project-outlined', antDesignProjectOutlined);
+addIcon('ant-design:project-twotone', antDesignProjectTwotone);
+addIcon('ant-design:reconciliation-outlined', antDesignReconciliationOutlined);
+addIcon('ant-design:select-outlined', antDesignSelectOutlined);
+addIcon('ant-design:shopping-outlined', antDesignShoppingOutlined);
+addIcon('ant-design:sound-outlined', antDesignSoundOutlined);
+addIcon('ant-design:swap-outlined', antDesignSwapOutlined);
+addIcon('ant-design:tags-outlined', antDesignTagsOutlined);
+addIcon('ant-design:ungroup-outlined', antDesignUngroupOutlined);
+addIcon('ant-design:video-camera-add-outlined', antDesignVideoCameraAddOutlined);
+addIcon('ant-design:video-camera-outlined', antDesignVideoCameraOutlined);
+addIcon('ant-design:alert-outlined', antDesignAlertOutlined);
+addIcon('ant-design:aliyun-outlined', antDesignAliyunOutlined);
+addIcon('ant-design:bar-chart-outlined', antDesignBarChartOutlined);
+addIcon('ant-design:book-twotone', antDesignBookTwotone);
+addIcon('ant-design:border-bottom-outlined', antDesignBorderBottomOutlined);
+addIcon('ant-design:border-outer-outlined', antDesignBorderOuterOutlined);
+addIcon('ant-design:branches-outlined', antDesignBranchesOutlined);
+addIcon('ant-design:calculator-twotone', antDesignCalculatorTwotone);
+addIcon('ant-design:calendar-filled', antDesignCalendarFilled);
+addIcon('ant-design:cloud-server-outlined', antDesignCloudServerOutlined);
+addIcon('ant-design:code-outlined', antDesignCodeOutlined);
+addIcon('ant-design:contacts-outlined', antDesignContactsOutlined);
+addIcon('ant-design:container-outlined', antDesignContainerOutlined);
+addIcon('ant-design:container-twotone', antDesignContainerTwotone);
+addIcon('ant-design:copy-twotone', antDesignCopyTwotone);
+addIcon('ant-design:dashboard-outlined', antDesignDashboardOutlined);
+addIcon('ant-design:deployment-unit-outlined', antDesignDeploymentUnitOutlined);
+addIcon('ant-design:environment-outlined', antDesignEnvironmentOutlined);
+addIcon('ant-design:exception-outlined', antDesignExceptionOutlined);
+addIcon('ant-design:file-add-outlined', antDesignFileAddOutlined);
+addIcon('ant-design:file-done-outlined', antDesignFileDoneOutlined);
+addIcon('ant-design:file-markdown-outlined', antDesignFileMarkdownOutlined);
+addIcon('ant-design:file-ppt-outlined', antDesignFilePptOutlined);
+addIcon('ant-design:file-text-outlined', antDesignFileTextOutlined);
+addIcon('material-symbols:call-made', materialSymbolsCallMade);
+addIcon('material-symbols:upload', materialSymbolsUpload);
+addIcon('material-symbols:input-sharp', materialSymbolsInputSharp);
+addIcon('material-symbols:menu', materialSymbolsMenu);
+addIcon('material-symbols:sms', materialSymbolsSms);
+addIcon('material-symbols:file-upload', materialSymbolsUpload);
+addIcon('material-symbols:backup', materialSymbolsBackup);
+addIcon('material-symbols:filter-list', materialSymbolsFilterList);
+addIcon('material-symbols:flash-on', materialSymbolsFlashOn);
+addIcon('material-symbols:search', materialSymbolsSearch);
+addIcon('material-symbols:settings-ethernet', materialSymbolsSettingsEthernet);
+addIcon('material-symbols:cloud-upload', materialSymbolsBackup);
+addIcon('mdi:check', mdiCheck);
+addIcon('mdi:tick', mdiCheck);

 import Icon from './src/Icon.vue';
 import SvgIcon from './src/SvgIcon.vue';
 import IconPicker from './src/IconPicker.vue';
+import './data/offline.icon';
 
 export { Icon, IconPicker, SvgIcon };