Icons are essential for any modern web application, improving usability and aesthetics. Instead of relying on third-party icon libraries, managing a custom icon system in React provides flexibility, consistency, and better performance.
In this article, we'll explore how to organize, use, and manage SVG icons efficiently in a React project using TypeScript.
Why Use Custom Icons Instead of Libraries?
Many developers default to libraries like FontAwesome or Material Icons, but using custom SVG icons has key advantages:
β
Performance: No external dependencies or extra HTTP requests.
β
Customization: Easily modify size, color, and properties dynamically.
β
Scalability: Keep your icon set consistent across the app.
Letβs set up a structured approach to managing custom icons in React.
Folder Structure for Icon Management
A well-organized folder structure improves maintainability:
src/
assets/
icons/
index.tsx // Centralized export of all icons
NotificationIcon.tsx // Example icon
UserIcon.tsx // Another example icon
This structure keeps all icons in one place, making them easy to import and reuse.
Creating an Icon Component
Each icon is an individual React component, making it reusable and customizable. Here's an example:
NotificationIcon.tsx
import React from "react";
type SVGProps = React.SVGProps<SVGSVGElement>;
export const NotificationIcon: React.FC<SVGProps> = ({ ...props }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18.3325 13.0613H17.9128C19.069 13.0613 20 13.9747 20 15.1015V15.511C20 15.9648 19.6268 16.3266 19.1661 16.3266H0.833873C0.372903 16.3266 0 15.9613 0 15.511V15.1015C0 13.9752 0.93447 13.0613 2.08717 13.0613H1.66748C2.12554 13.0613 2.49994 12.6955 2.49994 12.2442V7.34691C2.49994 3.28752 5.85782 0 10.0001 0C14.1434 0 17.5003 3.28927 17.5003 7.34691V12.2442C17.5003 12.6983 17.8729 13.0613 18.3327 13.0613H18.3325ZM7.08301 17.1429H12.9163C12.9163 18.7208 11.6104 20 9.99967 20C8.38892 20 7.08301 18.7208 7.08301 17.1429Z"
fill="currentColor"
/>
</svg>
);
Making Icons Easily Accessible
Instead of importing icons one by one, create an index.tsx
file to export all icons from one place:
index.tsx
export { NotificationIcon } from "./NotificationIcon";
export { UserIcon } from "./UserIcon";
Now, you can import icons easily:
import { NotificationIcon, UserIcon } from "@/assets/icons";
Using the Icons in Components
You can now use icons like this:
<NotificationIcon width="24" height="24" fill="blue" />
<UserIcon width="32" height="32" fill="red" />
Conclusion
Managing custom icons in React using TypeScript provides better performance, customization, and scalability than relying on third-party libraries. With a structured folder setup, reusable components, and centralized exports, your icon system will be easy to maintain and extend.
π How do you manage icons in your React projects? Share your thoughts in the comments!
Top comments (0)