Use SVG icons in React.js

Hey there, React developers! We all know icons are a vital part of any user interface. But managing individual SVGs for each icon can quickly lead to code clutter and maintenance headaches. That's where this post swoops in to show you a stellar way to use SVG icons in React – with reusability and efficiency at the forefront!

The Not-So-Stellar Way (We've All Been There)

Let's face it, the first instinct might be to simply import individual SVG code directly into your components. Here's an example:

export const HeroiconsArrowUpRight = (props) => (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        width="1em"
        height="1em"
        viewBox="0 0 24 24"
        {...props}
    >
        <path
            fill="none"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="1.5"
            d="m4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"
        ></path>
    </svg>
);

This works, but imagine having dozens of icons! Your components will become bloated, and maintaining styles across icons becomes a chore. There's a better way!

Enter the Reusable Icon Component Paradise

Here's the magic trick: create a dedicated .js file, let's call it icons.js, to house all your icon components. Each icon component will import its specific SVG code and handle any styling.

Here's how icons.js might look:

import React from 'react';

export const HeroiconsArrowUpRight = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
    <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="m4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"></path>
  </svg>
);

// Add more icons following the same structure

export const OtherIcon = (props) => (
  // Import and render your other SVG here
);

Importing and Using Your Fancy New Icons

Now, using icons in your components becomes a breeze! Simply import the desired icon from icons.js:

import React from 'react';
import { HeroiconsArrowUpRight } from './icons'; // Import the icon

const MyComponent = () => {
    return (
        <div>
            <HeroiconsArrowUpRight /> {/* Use the icon component */}
        </div>
    );
};

The Benefits of This Approach

This approach offers several advantages:

• Reusability: Icons are defined once and used throughout your application, promoting clean and maintainable code.
• Centralized Management: All your icons live in one place, making updates and styling changes a breeze.
• Scalability: Adding new icons is as simple as creating a new component in icons.js.

Taking it a Step Further: Styling and Customization

You can further enhance your icon components by accepting props for customization:

export const HeroiconsArrowUpRight = ({ color, size, ...props }) => (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        width={size || '1em'}
        height={size || '1em'}
        viewBox="0 0 24 24"
        {...props}
    >
        <path
            fill="none"
            stroke={color || 'currentColor'}
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="1.5"
            d="m4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"
        ></path>
    </svg>
);

Now you can use your icons like this:

<HeroiconsArrowUpRight
    color="red"
    size="2em"
/>

So there you have it! This approach to using SVG icons in React promotes code organization, maintainability.

Search more than 200,000 open source svg icons here.