how to display svg image in react-pdf?

Question

How to display svg images in react-pdf and add color styles. but it's doesn't work. this is my code

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

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

Answer 1

In react-pdf, you cannot directly use an SVG image with the Image component and apply color styles as you would with HTML and CSS. Instead, you need to use the Svg component along with its child components such as Path to render SVG images.

You can display an SVG image and apply color styles using the Svg component.

You can find more information and examples on how to use SVG images with react-pdf in the documentation and discussions linked below:

Documentation: https://react-pdf.org/svg
Discussion: https://github.com/diegomura/react-pdf/discussions/2097,