Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature]: Icon parent wrapper element/component #719

Open
bombillazo opened this issue Apr 20, 2023 · 2 comments · May be fixed by #720
Open

[Feature]: Icon parent wrapper element/component #719

bombillazo opened this issue Apr 20, 2023 · 2 comments · May be fixed by #720

Comments

@bombillazo
Copy link
Contributor

bombillazo commented Apr 20, 2023 •
edited

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.

// not fun having to do this for every icon...
<span class="ui-pkg-icon-class">
  <IoMdLogOut />
</span>

Solution

Have new props to the IconContext so that all Icons are automatically wrapped with the parent component.

type NewProps = {
  parent?: JSX.Element | null; // not sure if this is the best choice for type safety...
  parentClass?: string | string[];
}

 <IconContext.Provider value={{ parent: <span>, parentClass: 'ui-pkg-icon-class' }}>

// so now:
<IoMdLogOut />

// renders to : 
<span class="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
<IoMdLogOut parent={<div>} parentClass=['another-class',' icon-wapper']/>

// resets to default behavior, ignoring context provider settings
<IoMdLogOut parent={null}/>

Minimal sample repository URL

No response

Additional context

No response
@bombillazo
Copy link
Contributor Author

Created a PR with a potential solution: #720

@bombillazo bombillazo linked a pull request May 30, 2023 that will close this issue
Open
@bombillazo
Copy link
Contributor Author

Hey @kamijin-fanta any chance to check it now?

@kamijin-fanta kamijin-fanta mentioned this issue Jan 16, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

FEAT: Icon parent wrapper element/component bombillazo/react-icons
1 participant
@bombillazo