Wrap custom icons around chakra UI's icon component for better customization

[karthik-Jay]

https://chakra-ui.com/docs/components/icon#using-the-icon-component https://chakra-ui.com/docs/components/icon#using-the-createicon-function

[abhinit2050]

From a cursory view, I understood there is a createIcon feature present. From what I understand, it can be used to wrap around 'icon' component. So, what exactly is to be done to resolve this issue? Could you please elaborate a little?

[karthik-Jay]

From a cursory view, I understood there is a createIcon feature present. From what I understand, it can be used to wrap around 'icon' component. So, what exactly is to be done to resolve this issue? Could you please elaborate a little?

Hi @abhinit2050 nice to meet you! Currently we have some icons mapped to various enums via utility functions in /src/utiliites/icon-mappings.tsx. We would like to use chakra ui's createIcon wrapper so that we can use these icons as a chakra component. This task can be broken down into the following:

• [ ] reduce the size of the svg and minify markup for the icons imported in icon-mappings.tsx. The chakra ui docs provide some tips: https://chakra-ui.com/docs/components/icon#tips-for-generating-your-own-icons
• [ ] replace static svg files with the createIcon wrapped svg
• [ ] update functions in icon-mappings.tsx to use the updated icons.
• [ ] add boxSize parameter to each function with default set to 12px.

Feel free to assign yourself to the issue if you are interested in taking on this task. And reach out if you need any further clarifications or assistance. Thanks!