解决@purge-icons使用出现的问题

最近项目基于vben-admin进行改造
该项目中的图标全部使用的@purge-icons，首先看一下官网介绍

Bundles only the icons you use
仅捆绑您使用的图标
PurgeIcons is heavily inspired from PurgeCSS. It analyzes your source code or dist files, extracting the icon names you used, and then bundle the icons’ data (SVGs) into your code.
PurgeIcons 深受 PurgeCSS 的启发。它分析您的源代码或 dist 文件，提取您使用的图标名称，然后将图标的数据 (SVG) 捆绑到您的代码中。
You will only get icons you need. No extra bandwidth, no unused icons, no compromise.
你只会得到你需要的图标。没有额外的带宽，没有未使用的图标，没有妥协。

在开发项目时我在https://icones.netlify.app/collection/all中找到一个图标并使用icon-park-outline:tag，但是再打包后部署到内网环境时，该图标并未显示，因此我开始对改项目的源码研究。

在外网开发时也发现，该图标会产生网络请求，然后得到svg路径，最终绘出图标。
之后根据网络请求追踪到发送请求的位置，node_modules/@iconify/iconify/dist/iconify.mjs:1880

/**
 * Check mutations for added nodes
 */
function checkMutations(node, mutations) {
    if (!node.observer) {
        return;
    }
    const observer = node.observer;
    if (!observer.pendingScan) {
        for (let i = 0; i < mutations.length; i++) {
            const item = mutations[i];
            if (
            // Check for added nodes
            (item.addedNodes && item.addedNodes.length > 0) ||
                // Check for icon or placeholder with modified attributes
                (item.type === 'attributes' &&
                    item.target[elementFinderProperty] !==
                        void 0)) {
                if (!observer.paused) {
                    queueScan(node);
                }
                return;
            }
        }
    }
}

从代码上看应该是@iconify组件主动将从服务器拉取。

？？？难道这项目不能离线部署吗

当然不是，重新刷新页面发现了一个现象，/node_modules/@iconify/iconify/dist/iconify.mjs:341，这段代码一直被调用

function addCollection(data, provider) {
  if (typeof data !== "object") {
    return false;
  }
  if (typeof provider !== "string") {
    provider = typeof data.provider === "string" ? data.provider : "";
  }
  if (simpleNames && provider === "" && (typeof data.prefix !== "string" || data.prefix === "")) {
    let added = false;
    if (quicklyValidateIconSet(data)) {
      data.prefix = "";
      parseIconSet(data, (name, icon) => {
        if (icon && addIcon(name, icon)) {
          added = true;
        }
      });
    }
    return added;
  }
  if (typeof data.prefix !== "string" || !validateIcon({
    provider,
    prefix: data.prefix,
    name: "a"
  })) {
    return false;
  }
  const storage = getStorage(provider, data.prefix);
  return !!addIconSet(storage, data);
}

这是怎么回事，通过查看调用栈发现是/@id/@purge-icons/generated，这个js一直在调用，这是哪里来的js呢，项目中是没有的，猜测应该是vite组件干的。vite添加了插件vite-plugin-purge-icons，猜测应该是他干的，查看源码发现，这个组件里实际应该是调用的@purge-icons插件方法，那来看看@purge-icons这个插件做了什么。

@purge-icons\core\dist\index.js最后几行，咦，这不是刚才看到的/@id/@purge-icons/generated这里的代码吗，原来是这个插件生成的，整个组件大概的意思就是扫描除了/node_modules之外的所有文件，找到需要使用展示的图标图标前缀必须在定义的CollectionIds变量中，然后获取该图标的svg路径，通过上边讲得循环调用addCollection方法，将路径添加到map中，方便后边页面使用。

那么这下原因找到了，原来我添加的图标前缀并没有在CollectionIds变量中。后来我找了个在变量中的图标解决该问题，如果可以加载非变量内的图标那更好了，但是我没有找到方法。如果有知道方法的可以评论区告知，十分感谢。