question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Generic icon component with type property.

See original GitHub issue

I would like to have a dynamic icon component that I can use for my card component, this way I can just pass an argument of type Icon to my card component and then use that parameter to load that icon.

For example: <Icon type={platformIcon} size={25} />

platformIcon would be a variable that holds an icon, like ReactJs, which then would become <Icon type="ReactJS" size="25" />

I currently see no way to have an icon component be dynamic, could this be added?

Edit: I know I could do this myself, but that would require me to import ALL the icons first

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:2
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
emremutlu08commented, Sep 3, 2021

If we have the same problem, I solve it like this

import * as Icons from '@icons-pack/react-simple-icons';

...

const TagName = Icons['ReactJs'];
...
<TagName className={classes.iconSize} />
3reactions
sachinrajacommented, Aug 27, 2021

That would be OK but I think a breaking change and a major version bump would be better. This package has a lot of files, I would like to avoid installing all of those if I only want one component.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I reuse a component and make it generic in react?
User will call icon component in the following way : import * as React from "react"; import AttachmentIcon from ...
Read more >
How to Create Reusable SVG Icon React Components
Here's how to create a reusable React component for icons. When it comes to icons, you can use PNG or SVG images.
Read more >
Typechecking With PropTypes - React
To run typechecking on the props for a component, you can assign the special propTypes property: import PropTypes from 'prop-types'; class Greeting extends ......
Read more >
React Icon Component - Material UI - MUI
By default, an Icon will inherit the current text color. Optionally, you can set the icon color using one of the theme color...
Read more >
Component based SVG Icon System | Varun Vachhar
Which means we can create a generic icon component. And use the type property to render inline the appropriate icon.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found