DOMContentLoaded

src/utils/iconify.ts

@@ -1,42 +1,37 @@
-// 仅引入 Iconify 核心，不解构任何导出（核心：避免导出报错）
+// 仅引入，不解构导出（避免版本兼容问题）
 import '@iconify/iconify';
-// 导入本地 Ant Design 图标集
 import antDesignIcons from '@iconify-json/ant-design/icons.json';
 
-// 等待 Iconify 全局对象加载完成（必须等 load 事件）
 window.addEventListener('load', () => {
-  // 1. 注册本地 AntD 图标集（全局对象调用）
-  if (window.Iconify) {
-    window.Iconify.addCollection(antDesignIcons);
+  if (!window.Iconify) return;
 
-    // 2. 禁用远程加载（兼容所有 v4 版本的写法）
-    // 方案1：直接修改 API 配置（v4.0.0+ 通用）
-    if (window.Iconify._api) {
-      window.Iconify._api.resources = []; // 关闭 CDN 请求
-      window.Iconify._api.useCache = false;
-    }
-    // 方案2：兼容极早期 v4 版本
-    window.Iconify.setConfig?.('api', {
-      resources: [],
-      useCache: false,
-    });
+  // 1. 注册 Ant Design 本地图标集（优先本地）
+  window.Iconify.addCollection(antDesignIcons);
+
+  // 2. 配置资源规则：ant-design 走本地，其他走远程（核心）
+  window.Iconify.setConfig?.('api', {
+    // 允许远程加载，但排除 ant-design（不走 CDN）
+    resources: [
+      {
+        // 远程 API 地址（默认 Iconify 公共 CDN）
+        url: 'https://api.iconify.design',
+        // 排除 ant-design，只加载其他图标集
+        exclude: ['ant-design'],
+      },
+    ],
+    useCache: true, // 保留缓存（优化远程图标加载）
+    timeout: 5000, // 远程请求超时时间
+  });
 
-    // 3. 手动渲染 iconify 元素（通用方案）
-    const renderIconify = () => {
-      const icons = document.querySelectorAll('.iconify');
-      icons.forEach((el) => {
-        // 强制更新属性触发渲染
-        const iconName = el.getAttribute('data-icon');
-        el.setAttribute('data-icon', '');
-        el.setAttribute('data-icon', iconName);
-        // 调用全局 refresh 方法
-        window.Iconify.refresh?.(el);
-      });
-    };
+  // 3. 渲染 iconify 元素（通用逻辑）
+  const renderIconify = () => {
+    document.querySelectorAll('.iconify').forEach((el) => {
+      const icon = el.getAttribute('data-icon');
+      el.setAttribute('data-icon', icon); // 触发渲染
+      window.Iconify.refresh?.(el);
+    });
+  };
 
-    // DOM 加载完成后渲染
-    document.addEventListener('DOMContentLoaded', renderIconify);
-    // SPA 路由切换后重新渲染（Vue 示例）
-    window.addEventListener('popstate', renderIconify);
-  }
+  document.addEventListener('DOMContentLoaded', renderIconify);
+  window.addEventListener('popstate', renderIconify);
 });