如何实现React组件接收SVG作为Prop并应用样式属性？

我来帮你搞定这个React SVG组件的问题，结合你提到的两个场景，给你梳理最优的实现方式，还能解决你之前方案没生效的问题：

场景1：从路径加载SVG并应用属性 #

当src是SVG文件路径时，直接用<img>标签没法修改内部属性，所以核心思路是先获取SVG文本内容，解析后手动修改根<svg>元素的属性（覆盖原有属性），再渲染到页面上：

实现逻辑 #

1. 用fetch请求SVG文件的文本内容
2. 用DOMParser把SVG文本解析为DOM对象
3. 定位根<svg>元素，设置width、height、fill属性
4. 把修改后的SVG转成字符串，通过dangerouslySetInnerHTML渲染

场景2：处理内联SVG（字符串/React组件） #

这里分两种子情况，对应不同的处理方式：

子情况A：src是SVG字符串 #

和路径加载的逻辑一致，直接解析字符串，修改根元素属性后渲染即可。

子情况B：src是React SVG组件 #

如果用户通过import导入SVG（比如用@svgr/webpack把SVG转成React组件），需要用React.cloneElement克隆传入的组件，同时传递我们的属性，这样既符合React组件逻辑，又能保证属性正确覆盖。

完整组件代码 #

把两种场景整合，加上默认SVG的处理：

import { useState, useEffect, isValidElement } from 'react';

const MySvg = ({ src, height = 20, width = 20, fillColor = 'currentColor' }) => {
  const [svgContent, setSvgContent] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (typeof src === 'string') {
      // 判断是SVG路径还是内联SVG字符串
      if (src.startsWith('http') || src.startsWith('/') || src.includes('.svg')) {
        // 加载外部SVG路径
        setIsLoading(true);
        fetch(src)
          .then(res => res.text())
          .then(text => processSvgText(text))
          .catch(err => {
            console.error('加载SVG失败:', err);
            setIsLoading(false);
          });
      } else if (src.startsWith('<svg')) {
        // 处理内联SVG字符串
        processSvgText(src);
      }
    }
  }, [src, height, width, fillColor]);

  // 通用处理SVG文本的函数，统一修改属性
  const processSvgText = (text) => {
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(text, 'image/svg+xml');
    const svgElement = svgDoc.querySelector('svg');
    
    if (!svgElement) {
      console.error('无效的SVG内容');
      setIsLoading(false);
      return;
    }

    // 覆盖根SVG的属性
    svgElement.setAttribute('width', width);
    svgElement.setAttribute('height', height);
    svgElement.setAttribute('fill', fillColor);

    // 可选：让内部元素继承根的fill颜色（解决内部元素自带fill导致属性不生效的问题）
    const allInnerElements = svgElement.querySelectorAll('*');
    allInnerElements.forEach(el => {
      if (!el.hasAttribute('fill')) {
        el.setAttribute('fill', 'inherit');
      }
    });

    setSvgContent(new XMLSerializer().serializeToString(svgElement));
    setIsLoading(false);
  };

  // 加载状态提示
  if (isLoading) return <div>Loading SVG...</div>;

  // 处理传入的React SVG组件
  if (isValidElement(src)) {
    return React.cloneElement(src, {
      width,
      height,
      fill: fillColor,
      ...src.props // 保留用户传入的原有属性
    });
  }

  // 渲染默认SVG或者处理后的SVG内容
  if (!src || !svgContent) {
    return (
      <svg fill={fillColor} height={height} width={width}>
        <g>
          <rect x="0" y="0" width="100%" height="100%" />
        </g>
      </svg>
    );
  }

  return <div dangerouslySetInnerHTML={{ __html: svgContent }} />;
};

export default MySvg;

关键注意事项 #

• XSS风险：使用dangerouslySetInnerHTML时，要确保传入的SVG内容是可信的，避免注入恶意代码。如果是用户生成的SVG，建议做内容过滤。
• 内部元素属性覆盖：如果SVG内部元素自带fill属性，根元素的fill不会自动覆盖，所以我们在processSvgText里添加了让内部元素继承fill的逻辑，你可以根据需求调整。
• Webpack配置优化：如果项目用Webpack，可以配置@svgr/webpack插件，把SVG直接转成React组件，这样用户导入的SVG会变成React元素，处理起来更安全可靠。

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