Handling Icons in React: Best Practices

Throughout my experience developing websites with React, I frequently encountered challenges with icons (especially those not sourced from libraries). One key question was: How can I handle my icons more efficiently in code?

Why I Switched to SVGs

Initially, I used PNG and JPEG files for icons, but quickly realized their limitations. Switching to SVG files offered several advantages:

• Scalability: SVGs can scale without losing quality.
• Faster Loading: SVG files are lightweight, improving load times.
• CSS Styling: SVGs can be easily styled directly in CSS.

Creating Icon Components

After adopting SVGs, I structured my icon components like this:

export const ExampleIcon: React.FC = () => {
  return (
    <svg>
      { /* svg code here */ }
    </svg>
  );
};

While this worked, I wanted more flexibility in styling and leveraging React’s component power. To achieve that, I added props to my icon components:

export const ExampleIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
  return (
    <svg {...props}>
      { /* svg code here */ }
    </svg>
  );
};

This allows us to pass all standard svg element props to our icons.

Organizing Icons in React

To keep my icons organized, I created an icons folder and added a new component whenever I needed a new icon. This method worked for a while, but I wondered—is there a more efficient approach?

Discovering @svgr/cli

After researching best practices, I came across @svgr/cli, a game-changing tool for handling SVGs in React. This CLI tool automatically generates React components from SVG files, saving time and improving maintainability.

Generating Icon Components Automatically

Instead of manually creating icon components, I could now run a single command to generate them:

npx @svgr/cli icons/svgs --out-dir icons/components --typescript

This command converts all SVG files in the svgs folder into TypeScript React components, placing them in the icons/components folder.

Building a Flexible Icon Component

To streamline the use of icons, I built a reusable Icon component. Here’s the folder structure I used:

src/
  components/
    icons/
  svgs/
  types/

• components/icons/: Contains generated icon components.
• svgs/: Stores raw SVG files.
• types/: Holds TypeScript types, including icon-type.ts.

Step 1: Define Icon Type

In src/types/icon-type.ts, I defined the type for our icon components:

import type * as Icons from '../components/icons';

export type IconType = keyof typeof Icons;

This type ensures that IconType corresponds to the names of the generated components, such as Logo for a Logo.tsx component.

Step 2: Create the Icon Component

Next, I created the Icon.tsx file in src/components/:

import React, { type SVGProps } from 'react';
import type { IconType } from '../types/icon-type';
import * as Icons from './icons';

export type IconProps = SVGProps<SVGSVGElement> & {
  icon: IconType;
};

export const Icon: React.FC<IconProps> = ({ icon, ...props }) => {
  const Component = React.createElement(Icons[icon], props);

  return (
    <span className="custom-icon">
      {Component}
    </span>
  );
};

This component dynamically renders the appropriate icon based on the icon prop. For instance, to display the Logo icon, you would use:

export const TestComponent: React.FC = () => {
  return (
    <div>
      <Icon icon="Logo" />
    </div>
  );
};

Step 3: Styling the Icons

To ensure icons inherit the current text color, add the following to your global CSS file:

.custom-icon path, .custom-icon rect {
  stroke: currentColor;
}

Automating Icon Generation

To simplify the process, I added the following script to my package.json file:

"icons:generate": "npx @svgr/cli src/svgs --out-dir src/components/icons --typescript"

The Final Flow

Whenever you need to add a new icon to your project, simply:

1. Place the SVG file in the svgs folder.
2. Run npm run icons:generate.
3. Use the new icon by referencing it in the <Icon/> component with autocomplete support for icon names.

---

I hope this article helps you handle icons more effectively in your React projects. Feel free to ask any questions — I'd love to help! 😊