Update for Chakra v3

[LanesGood]

I believe that the new chakra v3 system is incompatible with collecticons-chakra.

What seems to work is using the icon from collecticons-react instead - and wrapping in the chakra <Icon asChild> wrapper.

I'm unclear what updates are needed.

cc @danielfdsilva

[danielfdsilva]

What sort of error are you getting @LanesGood? Can you list steps to reproduce the problem?

[LanesGood]

I see the below error consistently when including a collecticons-chakra icon - nested in any other component or by itself.

Uncaught Error: React.Children.only expected to receive a single React element child.
    at Object.onlyChild [as only] (react.development.js:1229:1)
    at factory.js:168:1
    at emotion-element-489459f2.browser.development.esm.js:34:1
    at renderWithHooks (react-dom.development.js:15486:1)
    at updateForwardRef (react-dom.development.js:19245:1)
    at beginWork (react-dom.development.js:21675:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27490:1)Understand this error
hook.js:608 The above error occurred in the <chakra(svg)> component:

    at http://localhost:3000/static/js/bundle.js:31156:66
    at Icon2 (http://localhost:3000/static/js/bundle.js:7928:21)
    at http://localhost:3000/main.0ea363bc254df82999fc.hot-update.js:281:7
    at a
    at LinkWithRef (http://localhost:3000/static/js/bundle.js:173010:7)
    at http://localhost:3000/static/js/bundle.js:31156:66
    at Button2 (http://localhost:3000/static/js/bundle.js:6727:24)
    at div

When I use the icon from the collecticons-react package, I do not see this error.

Here are the current versions of chakra, collecticons-chakra and collecticons-react from the package.json:

"@chakra-ui/react": "^3.21.0",
"@devseed-ui/collecticons-chakra": "^3.0.2",
"@devseed-ui/collecticons-react": "^4.0.0",

I've found what works instead is import the collecticon from collecticons-react, wrapping it in the Chakra UI Icon component, and using the asChild prop per the "Custom SVG" instructions from the docs - https://chakra-ui.com/docs/components/icon#custom-svg. (Though now inspecting the element, it actually looks like asChild is not needed). Attempting the same wrapper with the collecticons-chakra icon still results in the error I pasted above

<Icon asChild>
    <CollecticonChevronDownSmall /> // only works if from collecticons-react
</Icon>

In the codebase I'm working in, we also have a few custom icons. These seem to be easily handled with the new ChakraUI createIcon utility - and I wonder if that is what the collecticons-chakra library needs to use for v3?

[LanesGood]

🤦 after pasting that comment and seeing the package version, I checked the releases and understand that I'm not using the updated package for chakra v3!!! Will update and report back.