如何通过SVGR将props传递至SVG组件的className属性？

要让SVGR生成的React组件同时包含固定icon类名和props传入的extraIconClasses，不需要依赖SVGO的addClassesToSVGElement插件，直接通过SVGR的自定义配置即可实现，以下是两种常用方案：

方案一：自定义组件模板 #

在svgr.config.js中配置自定义模板，直接修改生成的组件代码：

module.exports = {
  template: (variables, { tpl }) => {
    // 给svg元素设置动态className，拼接固定类名与props参数
    variables.attributes.className = `\`icon \${props.extraIconClasses ?? ''}\``;
    
    return tpl`
      const ${variables.componentName} = (props) => {
        return (
          ${variables.jsx}
        );
      };
      export default ${variables.componentName};
    `;
  },
  // 移除之前SVGO配置里的addClassesToSVGElement插件
  svgoConfig: {
    plugins: [
      // 保留你需要的其他SVGO插件
    ]
  }
};

这里用?? ''处理extraIconClasses未传入的情况，避免生成undefined字符串。

方案二：使用replaceAttrValues配置 #

如果你希望保留部分SVGO处理逻辑，可通过SVGR的属性替换功能实现：

1. 确保SVG文件本身无className/class属性（或通过SVGO清除原有类名）
2. 在svgr.config.js中添加配置：

module.exports = {
  replaceAttrValues: {
    // 替换为动态拼接的className
    'className': '`icon ${props.extraIconClasses ?? ''}`'
  },
  svgoConfig: {
    plugins: [
      // 移除addClassesToSVGElement插件
      { name: 'removeAttrs', params: { attrs: 'class' } }, // 可选：清除SVG原有class属性
    ]
  }
};

效果验证 #

配置完成后，生成的组件代码会自动变为：

const SVGName = (props) => (<svg className={`icon ${props.extraIconClasses ?? ''}`} ... />);
export default SVGName;

使用组件时直接传入额外类名即可：

<SVGName extraIconClasses="large red" />

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