Render FontAwesome icon

[tgermain-da]

Has anyone had success rendering FontAwesome icons within a Pdf document? What approach do you recommend?

[trijpstra-fourlights]

I know this discussion is from a long time ago, but I was looking for a solution to this as well.

For future reference, this is how I solved it:

1. add a reusable component

components/pdf/FontAwesomeIcon.tsx

import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
import { Path, Svg } from '@react-pdf/renderer'
import { Style } from '@react-pdf/types'

interface FontAwesomeIconProps {
  faIcon: IconDefinition
  style?: Style
}

const FontAwesomeIcon = ({ faIcon: { icon }, style = {} }: FontAwesomeIconProps) => {
  const duotone = Array.isArray(icon[4])
  const paths = Array.isArray(icon[4]) ? icon[4] : [icon[4]]
  const color = style.color || 'black'
  return (
    <Svg viewBox={`0 0 ${icon[0]} ${icon[1]}`} style={style}>
      {paths &&
        paths.map((d, index) => (
          <Path
            d={d}
            key={index}
            fill={color}
            fillOpacity={duotone && index === 0 ? 0.4 : 1.0}
          />
        ))}
    </Svg>
  )
}

export default FontAwesomeIcon

2. example usage

import { faPlugCircleCheck } from '@fortawesome/free-solid-svg-icons'

import FontAwesomeIcon from './components/pdf/FontAwesomeIcon'

const ExampleUsageFontAwesome = () => (
  <Document>
    <Page>
      <View>
        <FontAwesomeIcon faIcon={faPlugCircleCheck} style={{ color: '#000', width: '20px' }} />
      </View>
    </Page>
  </Document>
)
export default ExampleUsageFontAwesome

It should also work with duotone fonts.

[aleciavogel]

One teensy change:

fill="{color}"

should be

fill={color}

Otherwise, this is a solid fix! Thank you

[trijpstra-fourlights]

@aleciavogel You are completely right! 👍 Thanks for spotting that. I've updated the post accordingly.

[zakpucci]

@trijpstra-fourlights This doesn't seem to render for me. I can console log the icon coming through into the new FontAwesomeIcon component, but shows up blank in the rendered PDF. Any thoughts?

[aleciavogel]

Interjecting again because this happened to me too at first, but I got it working. I found that I couldn't put the icon inside of a <Text/> component for whatever reason (or maybe I was just being superstitious and overly careful? It's unclear). Instead, I put it inside of a <View /> and if I have to have it next to text (like when I'm listing social media links), I end up using flex-box.

Hopefully this helps, @zakpucci! If it doesn't, can you post a snippet for a bit more context?

[zakpucci]

@aleciavogel You're a champion. That did it! Thanks.

[EltonAuguston]

eyyy, nice bro nice. it works perfectly.

[heredia95]

any solution for material icons

[sglza]

I made a similar solution to the one by @trijpstra-fourlights, but for Material Icons. (cc @heredia95)
It might not be the best implementation, but it has worked great so far for me.

import React from 'react';
import { Circle, Path, Svg } from '@react-pdf/renderer';
import { IconType } from 'react-icons';

interface MaterialIconProps {
  icon: IconType;
  size?: number;
  color?: string;
}

export const MaterialIcon = ({ icon, size, color }: MaterialIconProps) => {
  const iconElement = icon({ fill: color });

  const paths = iconElement.props.children.filter((child) => child.type === 'path');
  const circles = iconElement.props.children.filter((child) => child.type === 'circle');

  const fill = iconElement.props.fill || 'black';

  return (
    <Svg viewBox={iconElement.props.attr.viewBox} style={{ width: size, height: size }}>
      {paths && paths.map((path, index) => <Path key={index} d={path.props.d} fill={path.props.fill || fill} />)}
      {circles &&
        circles.map((circle, index) => (
          <Circle
            key={index}
            cx={circle.props.cx}
            cy={circle.props.cy}
            r={circle.props.r}
            fill={circle.props.fill || fill}
          />
        ))}
    </Svg>
  );
};

Usage

import { MdOutlineHome } from 'react-icons/md';

<MaterialIcon icon={MdOutlineHome} size={12} />

[usersina]

Here's how to do it with @mui/icons-material icons:

• MaterialIcon.tsx

import { Circle, Path, Svg } from '@react-pdf/renderer';
import React, { useEffect, useState } from 'react';
import ReactDOMServer from 'react-dom/server';
import { createTw } from 'react-pdf-tailwind';

const tw = createTw({});

interface MaterialIconProps {
  icon: React.ElementType;
  size?: number;
  color?: string;
  className?: string;
}

export const MaterialIcon = ({ icon: Icon, size = 24, color = 'black', className = '' }: MaterialIconProps) => {
  const [paths, setPaths] = useState<React.ReactNode[]>([]);

  useEffect(() => {
    // Render the icon to a string
    const iconString = ReactDOMServer.renderToString(<Icon />);

    // Create a temporary DOM element to parse the string
    const parser = new DOMParser();
    const doc = parser.parseFromString(iconString, 'image/svg+xml');
    const svgElement = doc.querySelector('svg');

    if (svgElement) {
      const svgPaths = Array.from(svgElement.querySelectorAll('path')).map((path, index) => (
        <Path key={index} d={path.getAttribute('d') || ''} fill={color} />
      ));
      const svgCircles = Array.from(svgElement.querySelectorAll('circle')).map((circle, index) => (
        <Circle
          key={index}
          cx={circle.getAttribute('cx') || ''}
          cy={circle.getAttribute('cy') || ''}
          r={circle.getAttribute('r') || ''}
          fill={color}
        />
      ));
      setPaths([...svgPaths, ...svgCircles]);
    }
  }, [Icon, color]);

  return (
    <Svg viewBox="0 0 24 24" style={[tw(className), { width: size, height: size }]}>
      {paths}
    </Svg>
  );
};

And a usage example:

<View style={tw('flex flex-row items-center')}>
  <MaterialIcon icon={EnergySavingsLeafIcon} size={12} color="black" className="mr-1" />
  <Text style={tw('text-xs')}>Carbon emissions estimate: 384 kg</Text>
</View>