Building a Versatile React Icon Component: Handling SVG, JPG, and PNG with Ease

One common practice among developers is to create a dedicated file for exporting all images and icons, ensuring accessibility throughout the project. This file serves as a centralized repository, consolidating the import of necessary icons and images and exporting them for universal access within the project.

// iconExporter.js
import  leetcode from "../assets/leetcode.svg";
import  png from "../assets/cup.png";
import  jpg from "../assets/dam.jpg";

export {
    leetcode,
    png,
    jpg
}

// App.js
import React from 'react';
import './App.css';
import { jpg, png, leetcode } from './components/iconexporter';

function App() {
  const styles ={
    width: '200px',
    height: '200px',
  }
  return (
    <div className="App">
      <img src={jpg} style={styles}  alt="JPG Icon" />
      <img src={png} style={styles} alt="png Icon" />
      <img src={leetcode} style={styles} alt="leetcode Icon" />
    </div>
  );
}

export default App;

The drawback of this approach is that even SVG icons are rendered as image tags, potentially limiting the flexibility and interactivity that SVGs offer. Additionally, the importing file can become lengthy and cumbersome, especially when dealing with a large number of icons and images. This may hinder code reusability and require more effort when adding new assets, as each one must be individually imported at the top of the file before being utilized in the code below.

A more efficient way to manage icons and images in a React project is by creating an Icon component. This component serves as a centralized hub for accessing various icons and images, offering greater flexibility and code reusability.

Implementation:

// IconComponent.js
import React from 'react';
import { ReactComponent as LeetcodeIcon } from '../assets/leetcode.svg';
import PngIcon from '../assets/cup.png';
import JpgIcon from '../assets/dam.jpg';

/*
 Define a mapping of icon names to their respective components or 
 image paths
*/
const IconComponents = {
    leetcode: LeetcodeIcon,
    png: PngIcon,
    jpg: JpgIcon
};

/*
 Icon component that dynamically renders the appropriate icon based 
 on the provided iconName
*/
export const Icon = ({ iconName, styles, className }) => {
    // Retrieve the corresponding IconComponent based on the provided iconName
    const IconComponent = IconComponents[iconName];

    // Handle scenarios where the IconComponent is not found
    if (!IconComponent) {
        console.error(`Icon component not found for iconName: ${iconName}`);
        return null;
    }

    // If the IconComponent is an SVG icon, render it with provided styles
    if (typeof IconComponent !== 'string') {
        const MergedStyles = {
            cursor: 'pointer', // Example of default styling
            ...styles,
        };

        return <IconComponent 
                  className={className} alt={iconName} 
                  style={MergedStyles} 
                />;
    }

    // For PNG or JPG images, render them as img elements
    return <img className={className} 
              src={IconComponent} alt={iconName} style={styles} 
           />;
};

In the provided code snippet, an Icon component is created with a collection of icon mappings stored in the IconComponents object. Each icon is imported and assigned a unique key corresponding to its name or type.

here is how you can use the component in Any file :

// App.js
import React from 'react';
import './App.css';
import { Icon } from './components/Icon';

function App() {
  const styles ={
    width: '200px',
    height: '200px',
  }
  return (
    <div className="App">
      <Icon iconName={"png"} />
      <Icon iconName={"leetcode"} styles={styles} className={'component-icon'} />
    </div>
  );
}

export default App;

Benefits:

1. Modularization: By centralizing icon management within the Icon component, developers can easily add, remove, or update icons without scattering import statements throughout the project. This promotes better organization and maintainability of the codebase.
2. Abstraction: The Icon component abstracts away the complexity of handling different types of icons and images. Developers only need to specify the icon name when using the component, simplifying usage and reducing the risk of errors.
3. Dynamic Rendering: The Icon component dynamically renders the appropriate icon based on the provided iconName, whether it's an SVG, PNG, or JPG file. This ensures consistent rendering across different icon types without the need for separate handling in the code.
4. Error Handling: The component includes error handling to gracefully handle cases where an icon component is not found for a given iconName. This helps in debugging and ensures a smooth user experience even in exceptional circumstances.

By adopting the Icon component approach, developers can streamline icon management, improve code readability, and enhance the flexibility of their React projects. This method promotes efficient resource utilization and facilitates smoother development workflows, ultimately contributing to the overall quality and scalability of the application.