导入SVG图标仅显示路径字符串而非实际图标问题

问题原因 #

默认情况下，React项目（比如Create React App）会将SVG文件当作静态资源处理，直接导入时只会返回资源的字符串路径，而非可渲染的SVG组件。

解决方案 #

方法1：使用CRA内置的SVG组件导入方式

修改你icons/index.js里的导入语句，添加ReactComponent别名：

// icons/index.js
import { ReactComponent as ArrowDown12 } from './12x12/arrow-down-12.svg';
import { ReactComponent as ArrowUp12 } from './12x12/arrow-up-12.svg';
// 其他图标同理

export {
  ArrowDown12,
  ArrowUp12
  // 导出其他图标组件
};

在其他组件中导入后，直接当作React组件使用：

import { ArrowDown12 } from '../assets/icons';

// 组件内渲染
<ArrowDown12 />

方法2：通过require导入SVG组件

如果习惯用require，需要获取导出的ReactComponent：

// icons/index.js
export const ArrowDown12 = require('./12x12/arrow-down-12.svg').ReactComponent;
export const ArrowUp12 = require('./12x12/arrow-up-12.svg').ReactComponent;

组件内使用方式和方法1一致。

方法3：自定义Webpack配置（需Eject或使用craco等工具）

如果项目已经Eject，或者用了craco、react-app-rewired，可以修改Webpack配置，让所有SVG默认解析为组件：

// webpack.config.js 或 craco.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/, // 仅对js/ts/jsx/tsx文件生效
        use: ['@svgr/webpack'],
      },
    ],
  },
};

配置后，你原来的普通导入方式就会返回SVG组件，无需额外添加ReactComponent。

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