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.