React中为Ion Icons V5添加自定义SVG图标不渲染问题求助

我之前也碰到过一模一样的情况！问题出在React默认的SVG导入逻辑上：当你用import img from "./Resources/Sat 2.svg"这种方式导入SVG时，Create React App（或者说默认的Webpack配置）会把SVG转换成一个React组件，而不是返回对应的文件路径URL。但<ion-icon>的src属性需要的是一个可访问的SVG文件地址，所以自然就渲染不出来了。

下面给你几个可行的解决方案：

方案1：把SVG放到public文件夹，直接使用绝对路径 #

把你的Sat 2.svg移动到项目根目录的public/Resources文件夹下（如果没有就创建），然后直接在src里写绝对路径：

<ion-icon src="/Resources/Sat 2.svg"></ion-icon>

这样做的好处是简单直接，public文件夹下的资源会被原样打包到生产环境，浏览器可以直接通过URL访问到。

方案2：使用?url后缀让Webpack返回文件路径 #

如果你不想移动SVG文件的位置，可以在导入时加上?url后缀，告诉Webpack不要把SVG转成组件，而是返回它的URL：

import img from "./Resources/Sat 2.svg?url";

// 然后正常使用
<ion-icon src={img}></ion-icon>

这个方法在Create React App v5+版本是支持的，不需要额外配置Webpack。

方案3：手动配置Webpack（适合自定义配置的项目） #

如果你的项目是自己配置的Webpack，可以添加file-loader或者svg-url-loader来处理SVG文件，确保导入时返回路径：
比如在Webpack配置里添加规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['file-loader'],
        exclude: /node_modules/
      }
    ]
  }
};

配置完成后，原来的导入方式就能正常返回文件URL了。

你可以先试试方案1或者方案2，这两个最容易实现，应该能快速解决你的问题！

内容的提问来源于stack exchange，提问作者Caidyn Ginger