How to register Chakra UI avatar with an icon prop?

Developer Support
1

I’m trying to register a ChakraUI Avatar with an icon Prop.

registerComponent(Avatar, {
name: "Avatar",
importPath: "@chakra-ui/react",
parentComponentName: "AvatarGroup",
props: {
  icon: {
    type: "slot",
    hidePlaceholder: true,
    allowedComponents: ["CheckCircleIcon"],
    defaultValue: {
      type: "component",
      name: "CheckCircleIcon",
    },
  },
  name: {
    type: "string",
    defaultValue: "",
  },
  src: {
    type: "string",
    defaultValue: "",
  },

"
Their Avatar docs say:
icon
Description
The default avatar used as fallback when name, and src is not specified.
Type
React.ReactElement
"
so if I have no defaultValue for name and src, this should work right?

But I get this error:

image.png

2

@political_magpie I would put your defaultValue in your slot in an array. The docs describe it here. Also, not sure you need defaultValue name and src if those are empty?

registerComponent(Avatar, {
name: "Avatar",
importPath: "@chakra-ui/react",
parentComponentName: "AvatarGroup",
props: {
  icon: {
    type: "slot",
    hidePlaceholder: true,
    allowedComponents: ["CheckCircleIcon"],
    defaultValue: [
      {
        type: "component",
        name: "CheckCircleIcon",
      }
    ],
  },
  name: {
    type: "string",
  },
  src: {
    type: "string",
  },
3

Thx @heavy_caribou. Just tried and got same error.

Note that icon is an attribute:

<Avatar icon={<CheckCircleIcon />} />

and this works on a Button without having to add defaultValue: [...]

<Button leftIcon={<CheckCircleIcon />}...
4

Anyone got any more ideas how to fix this Avatar Icon registration issue?

5

Chakra UI’s IconButton has the same issue.
I can register it, see it in Plasmic, but I can’t assign an Icon to the icon prop.

registerComponent(IconButton, {
  name: "IconButton",
  importPath: "@chakra-ui/react",
  props: {
    icon: {
      type: "slot",
      hidePlaceholder: true,
      allowedComponents: ["CheckCircleIcon"],
      defaultValue: {
        type: "component",
        name: "CheckCircleIcon",
      },
    },
...

The Icon is registered:

registerComponent(CheckCircleIcon, {
  name: "CheckCircleIcon",
  importPath: "@chakra-ui/react",
  props: {
    children: 'slot',
    name: 'string'
  }
  });

And again this works for Buttons leftIcon and rightIcon props.

image.png

6

@verbal_sparrow Did you face the same issue and is that why these were not registered in the code base you gave me?

7

@political_magpie just to sanity check a few things,

• If you remove that icon prop, does the Avatar component work and you don’t get the error?
• The check circle button is a registered component, correct?
• If you register the icon prop without a default value, does it work? Are you able to manually insert a check circle component into that slot?

8

•Yes the avatar appears without icon. There is infact a placeholder icon that auto appears if no content provided.
• The checkcircle icon is indeed registered
• Will try this in 30mins

9

Placeholder:

image.png

10 
registerComponent(CheckCircleIcon, {
  name: "CheckCircleIcon",
  importPath: "@chakra-ui/icons",
  props: {
    children: 'slot',
    name: 'string'
  }
  });
11

Avatar with no default value:

image.png

12

Icon:

image.png

13

Error is drag into slot:

image.png
image.png795×174 22.5 KB

14

Also tried removing slot in Icon but got same error:

registerComponent(CheckCircleIcon, {
  name: "CheckCircleIcon",
  importPath: "@chakra-ui/icons",
  props: {}
  });
15

Okay, so the Avatar component just throws an error whenever you pass it anything in its icon prop?

16

If I do the same with IconButton, it seems to accept Icon with no error - but I can’t see it:

image.png

image.png

17

Yes - Avatar component throws an error whenever you pass it anything in its icon prop.

18

I recommend you test the component in stackBlitz, then you can be sure wether it is the components’ fault or else

19

Good idea @verbal_sparrow

20

I got Avatar and IconButton working within a Nextjs App (independent of Plasmic) and icon prop works fine for both.

import { Avatar, IconButton, Flex } from '@chakra-ui/react'
import { FaBeer } from 'react-icons/fa'
const IndexPage = () => {
    return (
    <Flex height="100vh" alignItems="center" justifyContent="center">
    <IconButton aria-label='Search database' icon={<FaBeer />} />
    <Avatar bg='red.500' icon={<FaBeer fontSize='1.5rem' />} />
    </Flex>  
    )  
  }

export default IndexPage

So could this be a Plasmic issue?

image.png