DEV Community

Discussion on: Easiest Way To Use Icons In React

Collapse
 
afsaa03 profile image
Andres Fernando Saa

Thanks! Really appreciate your post.
Here I live you a component that receives any type of icon. You're welcome.

import React from 'react';
import PropTypes from 'prop-types';
import { IconContext } from 'react-icons';

const Icon = ({ icon, fontSize, color }) => {
  return (
    <>
      <IconContext.Provider value={{ style: { fontSize, color } }}>
        <div>{icon}</div>
      </IconContext.Provider>
    </>
  );
};

Icon.propTypes = {
  icon: PropTypes.node.isRequired,
  fontSize: PropTypes.string,
  color: PropTypes.string,
};

Icon.defaultProps = {
  fontSize: '20px',
  color: 'black',
};

export default Icon;
Enter fullscreen mode Exit fullscreen mode