React中SVG颜色修改与缩放实现方法咨询

要同时实现修改SVG颜色和通过className控制尺寸，只需要给你的SVG组件添加上className属性支持，同时确保SVG标签本身配置好viewBox属性保证缩放不失真。

步骤1：修改SVG组件的Props和返回内容 #

首先扩展组件的Props，添加可选的className属性，然后在返回的<svg>标签上同时应用className和fill属性，别忘了加上viewBox（这是SVG正常缩放的关键，值要和你原始SVG的viewBox一致）：

import * as React from 'react'

export interface IVectorBarSVGProps {
  fill: string
  className?: string // 新增className可选属性
}

export function VectorBarSVG({ fill, className }: IVectorBarSVGProps) {
  return (
    // 替换成你原始SVG的内容，注意把path里的fill改成{fill}，同时加上className和viewBox
    <svg 
      className={className} 
      fill="none" 
      viewBox="0 0 24 24" // 示例viewBox，替换成你SVG实际的viewBox值
      xmlns="http://www.w3.org/2000/svg"
    >
      <path 
        d="M你的SVG路径内容" 
        fill={fill} // 用传入的fill属性替换硬编码颜色
      />
    </svg>
  )
}

步骤2：使用组件时同时传fill和className #

现在你可以像用普通React组件一样，既传颜色又用className控制尺寸（比如Tailwind的类名）：

<VectorBarSVG 
  fill={theme ? '#61A0AF' : '#CECE25'} 
  className="w-[10vw] h-auto" // 直接用className控尺寸，h-auto保持比例
/>

关键注意点 #

• viewBox必须设置：没有viewBox的话，SVG缩放会变形，这个值可以从你原始SVG文件的根标签里直接复制。
• SVG内部不要硬编码fill：如果原始SVG的path里写死了fill颜色，一定要改成{fill}，否则传入的fill属性不会生效。

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