如何借助Vite在构建发布时自动转换Google Font Icons为SVG Icons？

核心想法就是：开发阶段继续用Google Font Icons的便捷写法，等到Vite构建生产包的时候，自动把这些字体图标替换成内联SVG，兼顾开发效率和生产性能。下面是两种可行的实现方式：

方式一：自己写个简单的Vite插件 #

• 开发阶段正常用Google Font Icons，不管是CDN引入还是本地装字体包都行
• 写个Vite插件，在构建时扫描HTML和代码里的字体图标标签（比如<i class="material-icons">home</i>这种）
• 用@mdi/svg这个库（里面包含了所有Material Design图标的SVG文件），根据图标名称找到对应的SVG，把原来的<i>标签替换成内联SVG
• 插件的大致代码示例：

import { readFileSync } from 'fs';
import { resolve } from 'path';

export default function viteIconsToSvg() {
  return {
    name: 'google-icons-to-svg',
    transformIndexHtml(html) {
      // 匹配所有material-icons的标签，提取图标名
      const iconMatcher = /<i class="material-icons">(.*?)<\/i>/g;
      return html.replace(iconMatcher, (match, iconName) => {
        // 从@mdi/svg里找对应SVG文件
        const svgFilePath = resolve(__dirname, `node_modules/@mdi/svg/svg/${iconName.toLowerCase()}.svg`);
        try {
          let svgContent = readFileSync(svgFilePath, 'utf-8');
          // 给SVG加上原有的类名，保证样式一致
          return svgContent.replace('<svg', '<svg class="material-icons"');
        } catch (err) {
          // 找不到对应图标就保留原标签，避免构建报错
          return match;
        }
      });
    }
  };
}

• 把这个插件加到vite.config.js的plugins数组里，构建时就会自动替换了

方式二：用现成的图标库适配 #

• 开发阶段用@mdi/font（这是Google Material Icons的开源实现，用法完全一致）
• 安装@mdi/js，这个库提供每个图标的SVG路径数据
• 用Vite的transform钩子写个替换逻辑，把代码里的字体图标标签换成内联SVG：
  比如原来的代码：

<i class="material-icons">settings</i>

自动替换成：

<svg class="material-icons" viewBox="0 0 24 24">
  <path d="${mdiSettings}"/>
</svg>

• 这样开发时还是改个图标名就行，构建后全变成内联SVG，还不会和翻译工具冲突

一些注意点 #

• 先确认@mdi/svg或@mdi/js里有你用到的所有图标，避免替换失败
• 可以给插件加个缓存，不用每次构建都读一遍SVG文件，加快构建速度
• 调整SVG的样式，确保和原字体图标显示效果一致（比如颜色、大小）

内容的提问来源于stack exchange，提问作者Simon Ferndriger