You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Many UI libraries wrap their own Icon components in divs with special classes to format icons correctly.
At the moment, one has to add these divs and classes manually to any icon imported from react-icons.
// not fun having to do this for every icon...<spanclass="ui-pkg-icon-class"><IoMdLogOut/></span>
Solution
Have new props to the IconContext so that all Icons are automatically wrapped with the parent component.
typeNewProps={parent?: JSX.Element|null;// not sure if this is the best choice for type safety...parentClass?: string|string[];}<IconContext.Providervalue={{parent: <span>, parentClass: 'ui-pkg-icon-class' }}>// so now:<IoMdLogOut/>
// renders to :
<spanclass="ui-pkg-icon-class"><svg.../></span>
These could also be overridden at the component level if necessary:
// override context provider settings with locally set props<IoMdLogOutparent={<div>}parentClass=['another-class',' icon-wapper']/>// resets to default behavior, ignoring context provider settings<IoMdLogOutparent={null}/>
Minimal sample repository URL
No response
Additional context
No response
The text was updated successfully, but these errors were encountered:
Describe
Many UI libraries wrap their own Icon components in divs with special classes to format icons correctly.
At the moment, one has to add these divs and classes manually to any icon imported from
react-icons
.Solution
Have new props to the
IconContext
so that all Icons are automatically wrapped with the parent component.These could also be overridden at the component level if necessary:
Minimal sample repository URL
No response
Additional context
No response
The text was updated successfully, but these errors were encountered: