How to register an ICon on a Button in Plasmic?

Plasmic Studio Questions
1

How do I register an Icon on a Button in Plasmic. I have this AccordionIcon example in plasmic-host.tsx with a children prop:

children: {
    type: "slot",
    defaultValue: [
       ...
      {
        type: "component",
        name: "AccordionIcon",
      },
    ],
  },

But the Button uses a leftIcon prop of Type
React.ReactElement

Which give a Plasmic error:

Type error while registering code components
> Failed to register code component named "Button". Unknown type for prop leftIcon. Received: React.ReactElement
2

Hi @political_magpie!

You can find the available prop types here: https://docs.plasmic.app/learn/code-components-ref/#prop-types

In this case the appropriate type would probably be "slot"

3

like this…

leftIcon: {
          type: "slot",
          name: <CheckCircleIcon/>,
  },
4

As I see this:

image.png

5

can you paste the whole registerComponent call?

6

Do you mean CheckCircleIcon?

7 
registerComponent(CheckCircleIcon, {
name: "CheckCircleIcon",
importPath: "@chakra-ui/react",
parentComponentName: "Button",
props: {
  children: 'slot',
  name: 'string'
}
});
8 
registerComponent(Button, {
name: "Button",
importPath: "@chakra-ui/react",
parentComponentName: "ButtonGroup",
props: {
  size: {
    type: "choice",
    options: ["xs", "sm", "md", "lg"],
  },
  variant: {
    type: "choice",
    options: ["sm", "primary", "secondary", "negative", "ghost", "outline", "solid", "link", "unstyled"],
    defaultValue: "solid",
  },
  colorScheme: {
    type: "choice",
    options: [
      "whiteAlpha",
      "blackAlpha",
      "gray",
      "red",
      "orange",
      "yellow",
      "green",
      "teal",
      "blue",
      "cyan",
      "purple",
      "pink",
      "linkedin",
      "facebook",
      "messenger",
      "whatsapp",
      "twitter",
      "telegram",
    ],
  },
  iconSpacing: "number",
  isActive: {
    type: "boolean",
  },
  isDisabled: {
    type: "boolean",
  },
  isLoading: {
    type: "boolean",
  },
  leftIcon: {
    type: "slot",
    name: <CheckCircleIcon/>,
},
}
});
9

hi @political_magpie! that box in the image is the slot placeholder, you should be able to drag contents into it similar to slots of Plasmic components in general

10

Yes. So In that case leftIcon should just have type slot and no name?
What if I want a particular icon or a set or icons as options?

11

Or ideally preset an slots content with an icon that can be switched out with another icon.
This is my main use case and it’s not clear how.

12

got it - if those icons are code components you can both restrict the allowed values with allowedComponents and provide a preset / default value for the slot with defaultValue.

For example, if CheckCircleIcon is the name you used to register it as a code component, you could do:

leftIcon: {
  type: "slot",
  allowedComponents: ["CheckCircleIcon"],
  defaultValue: {
    type: "component",
    name: "CheckCircleIcon",
  },
},
13

you can find more details about the interface of slot defaultValue in the “Element types” documentation: https://docs.plasmic.app/learn/code-components-ref/#element-types

14

Did try before. Will give it another go, but just incase can you provide correct syntax please? As currently away from computer.

15

I believe the code above should work assuming CheckCircleIcon is registered as a code component

16

Oh i see now. Didn’t see your code above . Thx heaps will give it a go.

17

OK. And what about the icon registration syntax? Currently I have:

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

I current get this error:

image.png

19

A dev here, is pointing me to:
https://docs.plasmic.app/learn/code-components-ref/#prop-control-function
While saying :
“there are 2 samples there that might be something similiar what you need …the thing is there’s no sample of what you exactly need”

20

OMG, I simply needed to :

import {
  CheckCircleIcon,
} from "@chakra-ui/icons";

What through me was that the AccordionIcon icon was being imported from react, so just tried importing from there and I ignored the typescript error:

import {
...
AccordionIcon,
CheckCircleIcon,
...
} from "@chakra-ui/react";

and of course needed to also:

yarn add @chakra-ui/icons