如何阻止Webpack将Font Awesome的HTML图标转换为SVG图标

1. 调整CSS选择器适配SVG元素 #

Webpack转换后，你自定义的add-to-cart类仍保留在SVG标签上，只需把原来针对<i>标签的CSS选择器调整为适配SVG即可：

• 原针对i标签的样式：

i.add-to-cart {
  color: #ff4444;
  font-size: 24px;
}

• 修改后的兼容样式：

/* 直接用自定义类，同时兼容i和svg两种元素 */
.add-to-cart {
  color: #ff4444;
  font-size: 24px;
}

/* 或者仅针对SVG元素设置 */
svg.add-to-cart {
  color: #ff4444;
  font-size: 24px;
}

2. 针对SVG的特殊样式处理 #

Font Awesome的内联SVG默认设置了fill="currentColor"，所以你设置的color属性会自动同步到图标填充色。如果需要更直接控制填充样式，也可以针对内部的<path>标签写样式：

.add-to-cart path {
  fill: #ff4444;
  stroke: #000;
  stroke-width: 2px;
}

3. 禁用Webpack自动转换为SVG（可选） #

如果更倾向于保留原始<i>标签形式，可以修改Font Awesome的Webpack配置：

• 若使用@fortawesome/webpack-plugin，在配置中添加禁用自动替换的参数：

// webpack.config.js
const FontAwesomePlugin = require('@fortawesome/fontawesome-webpack-plugin');

module.exports = {
  plugins: [
    new FontAwesomePlugin({
      autoReplaceSvg: false
    })
  ]
};

• 或者改用Font Awesome的Webfont版本，直接引入对应的CSS文件（如@fortawesome/fontawesome-free/css/all.css），而非SVG核心库。

内容的提问来源于stack exchange，提问作者Kipruto Barno