passive-yellow•9mo ago

Use FontAwesome simutaneously with AntDesign

I want to use FontAwesome icon for sider menu, I'm using import type { RefineThemedLayoutV2SiderProps } from "@refinedev/antd"; This is the default refine format <Refine ... resources={[ { ... meta: { icon: <CustomIcon /> } }, ]} /> How can I use both icon libraries without causing incompatibility?

2 Replies

kapa.ai•9mo ago

Hi @lukevo.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Refine uses Ant Design System, which provides a collection of free icons that can be used to build interactive user interfaces. However, these icons are provided separately from the base package and need to be installed separately. Fortunately, Refine comes bundled with both the base package and the icon package of Ant Design, so you don't need to install them separately. To use an icon, you append the icon name to the <Icons> component and pass it to the icon prop on the desired component. For example:

<Button  
 danger  
 onClick={() => remove(field.name)}  
 style={{ position: "absolute", top: "47px" }}  
 icon={<Icons.DeleteOutlined />}  
/>

<Button  
 danger  
 onClick={() => remove(field.name)}  
 style={{ position: "absolute", top: "47px" }}  
 icon={<Icons.DeleteOutlined />}  
/>

You can find the list of icon names on Ant Design's official documentation (https://ant.design/components/icon/). However, based on the information provided, it doesn't seem like you can specify an icon in a CSS file using the content property. The icons are used as React components rather than CSS content. If you want to use FontAwesome icons, you would need to install the FontAwesome React library and then you can use the FontAwesome icons as React components in the same way. Here's an example:

import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

<FontAwesomeIcon icon={faCoffee} />

import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

<FontAwesomeIcon icon={faCoffee} />

You can then use these FontAwesome icons in your Refine application like this:

<Refine
    ...
    resources={[
        {
            ...
            meta: {
                icon: <FontAwesomeIcon icon={faCoffee} />
            }
        },
    ]}
/>

<Refine
    ...
    resources={[
        {
            ...
            meta: {
                icon: <FontAwesomeIcon icon={faCoffee} />
            }
        },
    ]}
/>

Please note that this is a general guide and the exact implementation might vary based on your specific requirements and the version of the libraries you are using. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below