Next.js+SVGR+Tailwind全局添加SVG图标通用样式问询

方法1：自定义SVGR模板（最精准推荐） #

直接修改SVGR转换SVG为React组件的模板，让所有生成的组件自动带上flex-shrink-0 fill-current默认类，同时保留传入的自定义className。

在项目根目录新建svgr.config.js：

module.exports = {
  template: (variables, { tpl }) => {
    // 合并默认类和用户传入的className
    const combinedClassName = variables.props.className
      ? `\`flex-shrink-0 fill-current \${${variables.props.className}}\``
      : '"flex-shrink-0 fill-current"'
    
    return tpl`
      import * as React from 'react';

      const ${variables.componentName} = ({ className, ...props }) => (
        <svg
          className=${combinedClassName}
          {...props}
        >
          ${variables.jsx}
        </svg>
      );

      export default ${variables.componentName};
    `;
  },
};

配置完成后，你使用<AlertIcon className="text-red size-5" />时，最终渲染的SVG会自动带上flex-shrink-0 fill-current text-red size-5类，完全符合需求。

方法2：Tailwind全局样式（快速但需注意范围） #

如果不想改SVGR配置，可在Tailwind全局样式文件（比如app/globals.css）里添加基础样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* 给所有SVGR生成的SVG组件加默认样式，若页面有其他SVG需排除，可加更精准的选择器 */
  svg {
    @apply flex-shrink-0 fill-current;
  }
}

⚠️ 注意：这种方式会作用于所有SVG标签，如果页面存在不需要该样式的SVG，建议用属性选择器缩小范围，比如svg[class*="Icon"]（假设你的SVG组件类名带Icon后缀）。

方法3：封装基础Icon组件（适合需额外逻辑的场景） #

创建一个基础组件统一处理样式：

// components/BaseIcon.jsx
import React from 'react';

export default function BaseIcon({ IconComponent, className, ...props }) {
  return (
    <IconComponent 
      className={`flex-shrink-0 fill-current ${className || ''}`.trim()}
      {...props}
    />
  );
}

使用时：

import AlertIcon from '../icons/alert.svg';
import BaseIcon from './BaseIcon';

// 调用方式
<BaseIcon IconComponent={AlertIcon} className="text-red size-5" />

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