阿里 Iconfont 项目丢失？手把手教你将已引用的 SVG 图标下载到本地

概述

在前端项目中，团队自行维护的 Iconfont 图标库是重要的资产。然而，一旦发生人员变动或管理疏漏，原始的 Iconfont 项目很可能遗失，导致后续添加新图标或维护现有图标变得异常困难。本文将提供一个系统性的解决方案，即使找不到原项目，也能从已部署的代码中，将图标完整下载到本地，重建你的图标资源库。

核心思路

我们的核心思路是：从正在项目中使用的 iconfont.js 文件里，逆向解析并提取出所有的 SVG 图标符号，然后将每个符号单独保存为一个本地的 SVG 文件。

解决方案

第一步：找到并备份线上的 iconfont.js 文件

首先，你需要在你的线上或本地构建产物中，找到正在使用的 iconfont.js 文件。它通常通过一个 <script> 标签被引入。

打开你的项目网站。
在浏览器中按 F12 打开开发者工具，切换到 "网络 (Network)" 面板。
刷新页面，在资源列表中过滤 iconfont.js。
找到该文件后，在其链接上右键，选择 "Open in new tab"。
在新标签页中，你将看到完整的 JS 代码，全选并复制它。
在你的项目根目录下（或任何合适的位置）创建一个名为 iconfont.js 的文件，将代码粘贴进去。

第二步：编写图标提取脚本

在项目根目录下创建一个脚本文件，例如 scripts/extract-icons.js，并写入以下代码：

js 复制代码

const fs = require('fs');
const path = require('path');

// 确保 icons 输出目录存在
const iconDir = path.join(__dirname, '../icons');
if (!fs.existsSync(iconDir)) {
  fs.mkdirSync(iconDir, { recursive: true });
}

// 读取 iconfont.js 文件内容
const iconfontFile = path.join(__dirname, '../iconfont.js');
const content = fs.readFileSync(iconfontFile, 'utf-8');

// 使用正则表达式匹配所有 <symbol> 标签
const symbolRegex = /<symbol\s+id=\"([^\"]+)\"[^>]*viewBox=\"([^\"]+)\"[^>]*>([\s\S]*?)<\/symbol>/g;
let match;
let count = 0;

console.log('开始提取图标...');

while ((match = symbolRegex.exec(content)) !== null) {
  const id = match[1];
  const viewBox = match[2];
  const innerSvg = match[3];

  // 构建独立的 SVG 文件内容
  const svgContent = `<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}">
${innerSvg}
</svg>`;

  // 将内容写入文件，以 symbol 的 id 作为文件名
  const fileName = `${iconDir}/${id}.svg`;
  fs.writeFileSync(fileName, svgContent);
  count++;
  console.log(`生成图标: ${fileName}`);
}

console.log(`图标提取完成！共生成 ${count} 个 SVG 文件。`);

第三步：运行脚本

打开终端，在项目根目录下运行以下命令：

bash 复制代码

node scripts/extract-icons.js

第四步：查看结果

脚本运行成功后，你会在项目根目录下看到一个新生成的 icons 文件夹，里面包含了所有从 iconfont.js 中提取出的独立 SVG 文件。

第五步：（可选）重新上传至新的 Iconfont 项目

现在，你拥有了所有的原始 SVG 图标，可以彻底摆脱项目丢失的困扰。

访问阿里 Iconfont 官网。
创建一个新项目。
将 icons 文件夹内的所有 SVG 文件批量拖入上传。
等待平台审核完成后，你就得到了一个全新的、可继续维护的图标库项目。

总结

通过这个简单而有效的逆向工程方法，我们成功地将丢失的 Iconfont 项目从线上代码中"抢救"了回来。这个方法的核心价值在于，它不依赖于 Iconfont 平台上的原项目，而是直接从你正在使用的资源中提取图标，确保了项目图标资产的稳定性和可维护性，避免了因人员变动带来的知识断层和资源丢失风险。建议将此流程作为团队资产交接的规范步骤之一。