Procedure for using a third party icon library according to documentation not possible with TypeScript and Font Awesome

[manuelpoelzl]

Description

When using a third party icon library (FontAwesome) in the "as" of the Chakra UI icon component, a type error occurs

Link to Reproduction

https://codesandbox.io/s/modest-leaf-qlk5kd?file=/src/index.tsx

Steps to reproduce

1. Install the React resources for FontAwesome
2. Import an icon from FontAwesome this way: import {faHouse} from "@fortawesome/free-solid-svg-icons";
3. Add a Chakra UI component to the React app
4. Set the "as" property to the previously imported icon

Chakra UI Version

1.8.5

Browser

Microsoft Edge 98.0.1108.56

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[TimKolberger]

The linked codesandbox looks empty, could you kindly check?

[manuelpoelzl]

The linked codesandbox looks empty, could you kindly check?

Here is a new link, it can be viewed there now.
https://codesandbox.io/s/silly-leavitt-y3v8cl?file=/src/index.tsx

[TimKolberger]

Kindly see the docs how to use react-icons with Chakra UI. I am not familiar with the package "@fortawesome/free-solid-svg-icons", but it looks like the imported faHouse is not a React component, which is a requirement to use the as prop.

[manuelpoelzl]

Thanks for your response!
I will try react-icons as described in the documentation. Maybe I can find a way to make it work with FontAwesome as well, but it shouldn't be necessary since FontAwesome is included in react-icons anyway.

Anyway, thanks for looking into this!

[DonaldLouch]

Probably not the best or optimal code but what I do for FontAwesome is:

// config/fontAwesome

import { library } from '@fortawesome/fontawesome-svg-core'

import { fab } from '@fortawesome/free-brands-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'

library.add(
    fab,
    far,
    fas
)

// Component FIle

import { 
  Box,
  useColorModeValue
} from '@chakra-ui/react'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import '../config/fontAwesome'

...

export default function Component() {
  return (
    <Box
      color={useColorModeValue('LIGHTMODECOLOUR', 'DARKMODECOLOUR')} // To make it dark mode compatible/Change the colour of the icon
      fontSize="1.5rem" // Control the size of the icon
    >
      <FontAwesomeIcon icon={['{TYPE}', '{ICONNAME}']} width="100%" />
    </Box>
  )
}

[manuelpoelzl]

Thank you for your detailed example. I have tried it locally and it works fine.

However, I have now come to the conclusion that considering the effort involved, the react-icons package is currently the best option to use icons in Chakra UI, as it also supports the "as" property and no further steps are needed to get it running.

But it's good that we now have an example how it works without this package, should someone ask the same question in the future!

[DonaldLouch]

Very true 😊

[Pixelworlds]

In case anyone still needs this - @DonaldLouch has a great solution but it doesn't work when trying to use a Font Awesome icon with the as prop. For example, neither of the following work

<ListIcon as={<FontAwesomeIcon icon={faCircleSmall} />} />

<ListIcon as={faCircleSmall} />

However, you can use the createIcon method Chakra exposes to relatively easily convert the icon to something that as likes.

const convertIcon = faIcon => {
  const { icon, iconName } = faIcon;

  return createIcon({
    displayName: iconName,
    viewBox: `0 0 ${icon[0]} ${icon[1]}`,
    d: icon[4],
  });
};

and then implement it

<ListIcon as={convertIcon(faCircleSmall)} />

[Jelle-vz]

What I did and what requires almost no configuration is the wrap FontAwesomeIcon in a chakra wrapper chakra(FontAwesomeIcon). After that you can use it as you would normally.

import { chakra } from '@chakra-ui/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars } from '@fortawesome/pro-solid-svg-icons';

export const myAwesomeComponent = () => {
  const Icon = chakra(FontAwesomeIcon);

  return (
      <Icon icon={faBars} marginRight={5} />
  )
}

[tecorraltd]

A couple helpers I find useful:

import { chakra } from "@chakra-ui/react";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const FaIcon = ({ icon }: { icon: IconDefinition }) => {
    const Icon = chakra(FontAwesomeIcon);

    return (
        <Icon icon={icon} />
    )
}

export default FaIcon;

import { IconButton, IconButtonProps } from "@chakra-ui/react"
import { IconDefinition } from "@fortawesome/fontawesome-svg-core"
import FaIcon from "./fa-icon"

type FaIconButtonProps = Omit<IconButtonProps, "icon"> & {
    icon: IconDefinition
}

const FaIconButton = (props: FaIconButtonProps) => {
    const {
        icon,
        ...otherProps
    } = props;

    return (
        <IconButton 
            icon={<FaIcon icon={icon} />}
            {...otherProps} 
        />
    )
}

export default FaIconButton;

[bhainesva]

Just adding a note based on some of the other answers. Using the createIcon helper function compared to using the normal chakra factory function will apply some different classes to the resulting output so the icon can render slightly differently depending on the approach.

Some examples here: CodeSandbox