如何将SVG图标集转换为类似FontAwesome的JS调用形式？

我完全懂你想要的效果——不用依赖字体文件或额外CSS，只引入一个JS文件，就能通过<i class="icon-leaf"></i>这种简单标签调用自定义SVG图标。之前用的在线工具大多聚焦于生成webfont，确实满足不了纯JS的需求，那我们自己动手来实现：

步骤1：预处理你的SVG图标 #

首先把你从图标包下载的所有SVG文件整理好，做一些统一处理：

• 打开每个SVG，确保它有正确的viewBox属性（比如viewBox="0 0 24 24"），删掉固定的width和height属性，让JS可以灵活控制尺寸。
• 清理SVG里多余的代码，比如不必要的注释、冗余的命名空间声明（除非你需要兼容极老浏览器），尽量让SVG代码简洁。
• 给每个图标起好对应的标识名，比如leaf、sun，对应最终的icon-leaf、icon-sun类名。

步骤2：编写核心JS逻辑 #

核心思路是：页面加载完成后，自动找到所有带有icon-*类的元素，把它们替换成对应的SVG内容。这里给你一个可复用的实现框架：

// 首先定义你的图标库：键是图标名称，值是SVG字符串
const customIcons = {
  leaf: '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>',
  sun: '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>',
  // 把所有图标都按这个格式添加进来
};

// 替换图标的核心函数
function replaceIcons() {
  // 找到所有包含icon-前缀类的元素
  const iconElements = document.querySelectorAll('[class*="icon-"]');
  
  iconElements.forEach(el => {
    // 提取图标名称：从元素class列表中筛选出icon-开头的项
    const iconClass = Array.from(el.classList).find(cls => cls.startsWith('icon-'));
    if (!iconClass) return;
    
    const iconName = iconClass.replace('icon-', '');
    const svgHtml = customIcons[iconName];
    if (!svgHtml) return;
    
    // 创建SVG元素
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = svgHtml;
    const svg = tempDiv.firstElementChild;
    
    // 继承原元素的非图标类，方便样式控制
    const newClasses = Array.from(el.classList).filter(cls => !cls.startsWith('icon-'));
    newClasses.forEach(cls => svg.classList.add(cls));
    
    // 继承原元素的其他属性，比如id、行内样式等
    if (el.id) svg.id = el.id;
    if (el.style.cssText) svg.style.cssText = el.style.cssText;
    
    // 替换原元素为SVG
    el.parentNode.replaceChild(svg, el);
  });
}

// 确保页面DOM加载完成后执行替换
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', replaceIcons);
} else {
  replaceIcons();
}

步骤3：打包优化 #

把上面的代码加上所有你的SVG图标后，用代码压缩工具（比如Terser）压缩成minified版本，就得到了类似Font Awesome的icon-pack.min.js文件。

使用方法 #

和Font Awesome一样，在HTML里引入你的JS文件：

<script src="path/to/icon-pack.min.js"></script>

然后直接用指定的class调用图标：

<i class="icon-leaf text-green" style="width: 24px; height: 24px;"></i>
<i class="icon-sun text-yellow"></i>

这样就完全实现了你想要的纯JS调用SVG图标的效果，不用任何字体或额外CSS文件~

内容的提问来源于stack exchange，提问作者Rangka Kacang