如何在React函数组件中为URL传入的SVG设置填充颜色？

下面提供三种可行的解决方案，覆盖不同场景需求：

方案1：Fetch SVG内容并内联渲染 #

通过获取SVG的原始文本内容，将其转为内联SVG后渲染，从而直接控制填充颜色。

代码示例 #

import { useState, useEffect } from 'react';

const DynamicColoredSVG = ({ svgUrl, fillColor, width = '24px', height = '24px' }) => {
  const [svgContent, setSvgContent] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchAndProcessSVG = async () => {
      if (!svgUrl) return;
      try {
        const response = await fetch(svgUrl);
        if (!response.ok) throw new Error('SVG加载失败');
        let rawSvg = await response.text();
        
        // 移除SVG原有的fill属性，让外部样式优先级更高
        rawSvg = rawSvg.replace(/fill="[^"]*"/g, '');
        setSvgContent(rawSvg);
      } catch (err) {
        setError(err.message);
      }
    };

    fetchAndProcessSVG();
  }, [svgUrl]);

  if (error) return <div className="svg-error">{error}</div>;
  if (!svgContent) return <div className="svg-loading">加载中...</div>;

  return (
    <div
      style={{ width, height, fill: fillColor }}
      dangerouslySetInnerHTML={{ __html: svgContent }}
    />
  );
};

export default DynamicColoredSVG;

优缺点 #

• 优点：完全可控，支持给SVG不同路径设置不同颜色，适配复杂需求
• 缺点：需处理跨域问题（外部SVG需配置CORS），dangerouslySetInnerHTML存在XSS风险（仅在SVG来源可信时使用）

方案2：使用CSS Mask + 背景色 #

如果只需要给SVG设置单一填充颜色，这个方案最简洁——利用CSS的mask属性将SVG作为遮罩，通过背景色实现填充效果，无需额外请求或DOM操作。

代码示例 #

const MaskedColoredSVG = ({ svgUrl, fillColor, width = '24px', height = '24px' }) => {
  return (
    <div
      style={{
        width,
        height,
        backgroundColor: fillColor,
        // 兼容webkit内核浏览器
        WebkitMaskImage: `url(${svgUrl})`,
        maskImage: `url(${svgUrl})`,
        WebkitMaskRepeat: 'no-repeat',
        maskRepeat: 'no-repeat',
        WebkitMaskSize: 'contain',
        maskSize: 'contain',
        WebkitMaskPosition: 'center',
        maskPosition: 'center',
      }}
    />
  );
};

export default MaskedColoredSVG;

优缺点 #

• 优点：代码极简，颜色参数可直接通过React props传入，无跨域或安全风险
• 缺点：仅支持单一颜色填充，浏览器兼容性需注意（现代浏览器已基本支持，IE除外）

方案3：使用<use>标签（限同域SVG） #

如果SVG文件来自同域，可以将其转为<symbol>插入页面的<defs>中，再通过<use>标签引用，从而控制填充颜色。

代码示例 #

import { useState, useEffect } from 'react';

const UseTagColoredSVG = ({ svgUrl, fillColor, width = '24px', height = '24px', svgId = 'unique-svg-id' }) => {
  const [isSvgLoaded, setIsSvgLoaded] = useState(false);

  useEffect(() => {
    const loadSVGAsSymbol = async () => {
      try {
        const response = await fetch(svgUrl);
        const rawSvg = await response.text();
        // 将SVG根标签替换为symbol
        const symbolSvg = rawSvg.replace(/<svg([^>]*)>/, `<symbol id="${svgId}"$1>`).replace('</svg>', '</symbol>');
        
        // 创建隐藏的SVG容器，插入到body中
        const defsContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        defsContainer.style.display = 'none';
        defsContainer.innerHTML = `<defs>${symbolSvg}</defs>`;
        document.body.appendChild(defsContainer);

        setIsSvgLoaded(true);

        // 组件卸载时清理DOM
        return () => {
          document.body.removeChild(defsContainer);
        };
      } catch (err) {
        console.error('SVG加载失败:', err);
      }
    };

    loadSVGAsSymbol();
  }, [svgUrl, svgId]);

  if (!isSvgLoaded) return <div className="svg-loading">加载中...</div>;

  return (
    <svg width={width} height={height} fill={fillColor}>
      <use href={`#${svgId}`} />
    </svg>
  );
};

export default UseTagColoredSVG;

优缺点 #

• 优点：支持SVG复用，可通过<svg>标签直接控制填充、大小等属性
• 缺点：仅支持同域SVG，需处理DOM的插入与清理，多SVG需保证id唯一

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