Upgrading to Chakra-UI v1.0 🚀
AkashRajpurohit opened this issue · comments
Hi @leerob, opening a separate issue for this. For the follow up on issue #194, the plan is to upgrade to v1.0 of chakra-ui.
My suggestion was to keep both the PR different, one for upgrading the dependency and resolve the breaking changes during migration and then have another PR for the dark theme persistence.
Let me know if this makes sense and should we go ahead with this method. 😄
I'll be happy to work on both migration and feature as well. 🚀
That would be perfect! Thanks again for the help.
The open pr #238 addresses this issue.
Currently the core chakra package has been upgraded to 1.0.0-rc5.
In the initial setup, we have already fixed this issue #194 out of the box with the v1 migration 🚀
Next thing to fix is the icons issue.
Issue with Icons
In v1 we no longer can add icons directly by passing the name prop to the <Icon /> component, Instead we have to pass an icon component exported by @chakra-ui/icons package (which I have installed to support the existing look and feel of icons).
Now the issue is with minor refactoring we can simply swap out the name prop with and Icon component and get it done, but the problem is with external icons which we have like twitter, github etc for which svg data is added in theme.js.
According to chakra docs we can either use third party icons like react-icons or create icons using the Icon component/createIcon function.
Since we have only a few external icons, my suggestion would be that we export these icons from a folder lets say customIcons and create Icons like SpotifyIcon, GithubIcon etc using createIcon function.
The reason behind my suggestion is that.,
- We don't have to install additional third party package like react-icons since we already have svg data of the external icons we want.
- The
@chakra-ui/iconshas small bundle size and is also tree-shakeable whereas other lib like react-icons has large bundle size and is not tree-shakeable
Let me know your views on this @leerob 😄
Definitely don't want to install any third party packages, since the SVGs were already defined in the theme.
I'd say probably just use the Icon component since I don't think most of the icons are shared in many places. Most are in the footer, so they can be put directly in that file. Almost every one can just be a sub-component inside of the related file. Does that make sense?
https://next.chakra-ui.com/docs/components/icon#creating-icons-using-the-icon-component
Almost every one can just be a sub-component inside of the related file.
I did not got this exactly
Rather than sharing a component across multiple files (e.g. a new component for each icon), these can just be used inside of the component that consumes them.
For example, the social media SVGs can become Icons inside of the Footer component.
Got it 👍🏽
Working here, just dependent on a PR for MDX -> #239
@leerob out of curiosity, why did you decide to go with tailwind instead of updating to Chakra v1?
Just to try something new, plus next-mdx-remote doesn't work with CSS-in-JS (yet). PR in flight.