Deal with custom icons in TS

Following the guide to add custom icons I get an TypeScript eror that the name is not assignable.

<Icon name="custom-icon" size="20px" color="gray.400" />

Type '"custom-icon"' is not assignable to type '"link" | "time" | ...

Is there a ways to override the export type Icons .. ?

[cpouldev]

@tony (and future others who’ll face this)

this is what I do instead, without the need to load the full CDN (also tree shaking works 😃 )

A more “chakra-y” way

–

Each Font Awesome react icon is an IconDefinition which has the following format

interface IconDefinition  {
  prefix: string;
  iconName: string;
  icon: [
    number, // width
    number, // height
    string[], // ligatures
    string, // unicode
    IconPathData // svgPathData
  ];
}

So based on that data, I created a helper function which in conjunction with chakra’s createIcon helper, it accepts an IconDefinition and spits out a supported element to use with chakra’s Icon

import { Icon, createIcon } from '@chakra-ui/react'
import { faImage, IconDefinition } from '@fortawesome/pro-solid-svg-icons'

function faIcon(icon: IconDefinition) {
    let displayName = icon.iconName
    let [width, height, _, __, svgPath] = icon.icon

    return createIcon({
        viewBox: `0 0 ${width} ${height}`,
        displayName,
        path:
            typeof svgPath === 'string' ? (
                <path fill="currentColor" d={svgPath} />
            ) : (
                <g>
                    {svgPath.map((p, ix) => (
                        <path key={ix} d={p} />
                    ))}
                </g>
            ),
    })
}

Example

<Icon as={faIcon(faImage)} />

pinging @segunadebayo about this. Is it worth adding a better version of this snippet in your docs (or even better, provide an official adapter) for react-fontawesome users? FA is being used by lots and lots of people and I’m pretty sure that many will find it super useful

[tony]

In my situation, I opted to use font awesome bundles from CDN

There isn’t an easy way to do this with Icon, but here’s what I did:

import Box from "@chakra-ui/core/dist/Box";
import Icon from "@chakra-ui/core/dist/Icon";

const FaIcon = ({ name }: { name: string }) => (
  <Box
    as="em"
    className={`fas fa-${name}`}
    lineHeight="1.2rem"
    marginLeft="-.25rem"
    marginRight="0.5rem"
    verticalAlign="middle"
    display="block"
  />
);

const FaBook = () => <FaIcon name="book" />;
const FaBookmark = () => <FaIcon name="bookmark" />;
const FaDownload = () => <FaIcon name="download" />;
const FaHome = () => <FaIcon name="home" />;
const FaInfo = () => <FaIcon name="info" />;
const FaNewspaper = () => <FaIcon name="newspaper" />;

const MyComponent = () => {
  return (
    <Button leftIcon={FaBook} mr="1rem">
      Dictionary
    </Button>
  )
}