从Symfony Webpack Encore迁移至ViteJs，寻求SVG转Webfont插件

你可以使用以下Vite插件实现SVG转Webfont的需求，替代原Webpack的webfonts-loader：

1. vite-plugin-svg-to-font #

这是一款专门针对Vite的SVG转Webfont工具，支持批量转换SVG图标为woff2、woff、ttf等主流字体格式，还能自动生成对应的CSS/LESS/Sass样式文件，用法和webfonts-loader高度相似。

基本配置示例（在vite.config.js中）：

import svgToFont from 'vite-plugin-svg-to-font';

export default {
  plugins: [
    svgToFont({
      src: './src/assets/icons', // 存放SVG图标的目录
      dist: './dist/fonts', // 字体文件输出目录
      fontName: 'custom-icons', // 自定义字体名称
      css: true, // 自动生成CSS样式文件
    }),
  ],
};

配置完成后，直接引入生成的CSS文件，就能通过类名调用对应图标（比如.icon-{svg文件名}）。

2. vite-plugin-webfont-generator #

这款插件支持自定义字体格式、样式模板，灵活性更强，适合需要定制化输出的场景。

基本配置示例：

import webfontGenerator from 'vite-plugin-webfont-generator';

export default {
  plugins: [
    webfontGenerator({
      files: './src/icons/*.svg', // SVG文件匹配规则
      fontName: 'app-icons', // 字体名称
      dest: './dist/fonts/', // 字体输出目录
      cssDest: './dist/css/icons.css', // 样式文件输出路径
    }),
  ],
};

迁移注意事项 #

• 调整插件配置中的目录路径、字体名称，尽量和原webfonts-loader的配置保持一致，减少项目中样式代码的修改量。
• 部分插件支持自定义样式模板，可以复用原项目中基于webfonts-loader的样式结构，降低迁移成本。

内容的提问来源于stack exchange，提问作者Ahmed Saber