react-pdf中SVG图片显示及颜色样式设置失效问题

嘿，我之前也踩过react-pdf处理SVG颜色的坑！你遇到的问题其实是因为react-pdf的Image组件对SVG的处理逻辑和普通React组件不一样——它会把SVG当作静态位图加载，直接给Image加color样式根本不会生效。下面给你两个实用的解决办法：

方法一：修改SVG源文件（推荐） #

这是最简洁的方式，只要调整SVG内部的填充色设置，让它继承父元素的颜色：

1. 打开你的phone_enabled.svg文件，找到所有带fill属性的元素（比如<path>、<circle>这类图形元素）
2. 把原来的fill值改成currentColor，比如从<path fill="#333" d="..." />改成<path fill="currentColor" d="..." />
3. 回到React代码，把Image放在一个View容器里，给容器设置color样式：

import { View, Image } from '@react-pdf/renderer';
import phoneEnable from 'assets/img/icons/phone_enabled.svg';

return (
  <View style={{ color: 'red' }}>
    <Image
      src={phoneEnable}
      style={{
        height: 8,
        width: 8,
      }}
    />
  </View>
);

这样SVG就会自动继承View的color值，后续要改颜色只要调整容器的样式就行，非常灵活。

方法二：动态修改SVG字符串（无需改动源文件） #

如果你没办法修改SVG源文件，可以把SVG当作字符串加载，然后替换里面的填充色：

1. 用raw-loader加载SVG文件（如果是Create React App，直接用!!raw-loader!前缀；如果是自定义Webpack配置，需要先安装并配置raw-loader）
2. 替换SVG中的fill属性值，再转换成Data URI传给Image组件：

import { Image } from '@react-pdf/renderer';
// 用raw-loader加载SVG为字符串
import phoneEnable from '!!raw-loader!assets/img/icons/phone_enabled.svg';

// 替换所有fill属性为目标颜色
const coloredSvg = phoneEnable.replace(/fill="[^"]*"/g, 'fill="red"');
// 转换成Data URI格式
const svgDataUri = `data:image/svg+xml;utf8,${encodeURIComponent(coloredSvg)}`;

return (
  <Image
    src={svgDataUri}
    style={{
      height: 8,
      width: 8,
    }}
  />
);

为什么原来的代码不生效？ #

再给你解释下原因：react-pdf的Image组件加载SVG时，是将其解析成静态的光栅图像，不会像浏览器那样解析SVG的DOM结构并应用CSS样式，所以直接给Image加color属性完全没用，必须通过修改SVG内部的fill属性才能改变颜色。

备注：内容来源于stack exchange，提问作者Quinn