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",
}],
},
}
});
Outside of Plasmic it renders correctly:
tiago
December 29, 2022, 12:00pm
3
Hey @political_magpie ! Did you try registering a as
slot instead of a children
slot?
Hi @tiago , I did try this but got an error:
as: {
type: "slot",
defaultValue: [{
type: "component",
name: "FaBeer",
}],
},
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.
But how do I change the viewBox as its an SVG parent of the actual SVG.
tiago
December 29, 2022, 8:25pm
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
Thx @tiago , maybe that will help.
Is there now an ETA for the completed chakra-ui package?
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.