How to register a Chakra tag with an icon in the as prop?

Developer Support
1

How do I register a Chakra Tag with an icon in the ‘as’ prop:

<TagLeftIcon boxSize='12px' as={AddIcon} />

If I use children prop then the icon appear, but it’s in the wrong x,y coordinates.

  registerComponent(TagLeftIcon, {
    name: "TagLeftIcon",
    importPath: "@chakra-ui/react",
    props: {
      boxSize: {
        type: "string",
        defaultValue: "20px",
      },
      children: {
          type: "slot",
          defaultValue: [{
            type: "component",
            name: "FaBeer",
          }],
        },

    }
  });

image.png

2

Outside of Plasmic it renders correctly:

image.png

3

Hey @political_magpie! Did you try registering a as slot instead of a children slot?

4

Hi @tiago, I did try this but got an error:

as: {
  type: "slot",
  defaultValue: [{
  type: "component",
  name: "FaBeer",
  }],
},

image.png
image.png930×132 19.6 KB

5

If I remove the prop:

boxSize: {
  type: "string",
  defaultValue: "20px",
},

The icon is now in the x and y. In inspect its show 16x16 yet the code says viewBox="0 0 24 24"
changing inspect to viewBox="0 0 16 16" works.

image.png

image.png

6

But how do I change the viewBox as its an SVG parent of the actual SVG.

image.png

7

I’m not experienced with chakra-ui, but maybe you can try for TagLeftIcon the same approach that is being used here to register AccordionIcon? https://github.com/plasmicapp/plasmic/blob/master/plasmicpkgs/chakra-ui/src/registerAccordion.ts

8

Thx @tiago, maybe that will help.
Is there now an ETA for the completed chakra-ui package?

9

Fixed spacing , not sure how exactly, maybe something to do with the new registered icon approach and it’s use in Tag via:
name: getPlasmicComponentName("GolfIcon"),
The Icon size was related to mis matched viewBox sizes.

image.png