[BUG] Logo not rendering

[fellipeamedeiros]

Describe the bug

Hi everyone im trying to change the default logo, but when i put the new one, the URL is just printed not rendered.

Steps To Reproduce

1. add new line on object <Refine at App.tsx

Example

<Refine
routerProvider={routerProvider}
notificationProvider={useNotificationProvider}
authProvider={authProvider}
resources={resources}
options={{
syncWithLocation: true,
warnWhenUnsavedChanges: true,
liveMode: "auto",
useNewQueryKeys: true,
title: {icon: "https://avataaars.io/?avatarStyle=Circle&topType=ShortHairShortFlat&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=RaisedExcitedNatural&mouthType=Default&skinColor=Light"}
}}
>

Expected behavior

Icon rendered

Packages

"@refinedev/antd": "^5.45.1",
"@refinedev/cli": "^2.16.42",
"@refinedev/core": "^4.57.1",
"@refinedev/nestjs-query": "^1.3.5",
"@refinedev/react-router-v6": "^4.6.2",

Additional Context

No response

[alicanerdurmaz]

Hello @fellipeamedeiros,

icon type is React.ReactNode, It means you need to pass React component.

You can use like this:

options={{
  title: {
    icon: (
      <img
        style={{
          width: 24,
          height: 24,
        }}
        src="https://avataaars.io/?avatarStyle=Circle&topType=ShortHairShortFlat&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=RaisedExcitedNatural&mouthType=Default&skinColor=Light%22%7D"
      />
    ),
  },
}}

[fellipeamedeiros]

Thanks @alicanerdurmaz works perfectly