'})]}),` `,(0,n.jsx)(e.li,{children:"Use an icon library"}),` `,(0,n.jsx)(e.li,{children:"Convert them into React components"}),` `]}),` `,(0,n.jsxs)(e.p,{children:["There are ",(0,n.jsx)(e.a,{href:"https://blog.logrocket.com/how-to-use-svgs-react/",children:"multiple ways to use SVGs in React"}),", but the most flexible and powerful method is to convert them into React components. This allows you to take full advantage of React's capabilities, such as props, state, and lifecycle methods."]}),` `,(0,n.jsx)(e.p,{children:"Converting SVGs to React components offers significant advantages:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"You can dynamically change properties like size and colour"}),` `,(0,n.jsx)(e.li,{children:"You can add interactions and animations"}),` `,(0,n.jsx)(e.li,{children:"Components are reusable across your project"}),` `,(0,n.jsx)(e.li,{children:"You maintain better control over the SVG rendering"}),` `]}),` `,(0,n.jsx)(e.h2,{children:"Converting an SVG into a React Component"}),` `,(0,n.jsx)(e.p,{children:"In this section, we'll walk through the process of converting an SVG into a React component."}),` `,(0,n.jsx)(e.h3,{children:"Step 1: Obtain the SVG Code"}),` `,(0,n.jsxs)(e.p,{children:["First, you need the raw SVG code. You can get this from design tools like Figma, Sketch, or Illustrator, or download icons from icon libraries like ",(0,n.jsx)(e.a,{href:"https://lucide.dev/",children:"Lucide"}),"."]}),` `,(0,n.jsx)(e.p,{children:"For this example, let's say you have a simple hamburger menu icon:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,n.jsx)(e.h3,{children:"Step 2: Create a React Component Structure"}),` `,(0,n.jsx)(e.p,{children:"Next, create a new React component that will return the SVG:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`export const MenuIcon = () => ( // SVG code will go here ); `})}),` `,(0,n.jsx)(e.h3,{children:"Step 3: Insert the SVG Code Inside the Component"}),` `,(0,n.jsx)(e.p,{children:"Place your SVG code inside the component."}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`export const MenuIcon = () => ( ); `})}),` `,(0,n.jsx)(e.h3,{children:"Step 4: Make the SVG Dynamically Stylable with Props"}),` `,(0,n.jsxs)(e.p,{children:["To make our SVG component flexible, we'll accept props, particularly ",(0,n.jsx)(e.code,{children:"className"})," for styling:"]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`export const MenuIcon = ({ className, ...props }) => ( ); `})}),` `,(0,n.jsx)(e.p,{children:"Here, we're:"}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsxs)(e.li,{children:["Destructuring ",(0,n.jsx)(e.code,{children:"className"})," from props"]}),` `,(0,n.jsxs)(e.li,{children:["Using the spread operator ",(0,n.jsx)(e.code,{children:"{...props}"})," to pass any additional props to the SVG"]}),` `,(0,n.jsxs)(e.li,{children:["Adding the ",(0,n.jsx)(e.code,{children:"className"})," to the SVG element"]}),` `]}),` `,(0,n.jsx)(e.h3,{children:"Step 5: Use currentColor for Dynamic Colour Changes"}),` `,(0,n.jsxs)(e.p,{children:["For maximum flexibility, replace hardcoded colour values with ",(0,n.jsx)(e.code,{children:"currentColor"}),":"]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`export const MenuIcon = ({ className, ...props }) => ( ); `})}),` `,(0,n.jsxs)(e.p,{children:["Using ",(0,n.jsx)(e.code,{children:"currentColor"})," allows the SVG to inherit the text colour from its parent element through CSS, making it incredibly versatile."]}),` `,(0,n.jsx)(e.h2,{children:"How to Use the SVG Component"}),` `,(0,n.jsx)(e.p,{children:"Now that we've created our SVG component, we can use it like any other React component:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`export default function IconDemo() { return (

{/* Basic usage */} {/* With hover effect */} {/* Different size and colour */}

); } `})}),` `,(0,n.jsxs)(e.p,{children:["In this example, we're using Tailwind CSS classes to style the SVG. You can easily change the size, colour, and hover effects by modifying the ",(0,n.jsx)(e.code,{children:"className"})," prop."]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"https://res.cloudinary.com/timonwa-s-notes/image/upload/v1745358454/Article%20Images/Timonwa%27s%20Notes/How%20to%20Convert%20an%20SVG%20into%20a%20React%20Component:%20A%20Simple%20Guide/Screenshot_2025-04-22_at_10.26.11_AM_jiqhkq.png",alt:"A demonstration of converted SVGs used as React components"})}),` `,(0,n.jsx)("figcaption",{children:(0,n.jsx)(e.p,{children:`Figure 1: Example of SVGs converted into React components with dynamic styling.`})}),` `,(0,n.jsx)(e.h2,{children:"Advanced Techniques"}),` `,(0,n.jsx)(e.h3,{children:"Handling Multiple Colours"}),` `,(0,n.jsx)(e.p,{children:"SVGs often contain multiple elements with different colours. Here are progressive approaches to handle these cases:"}),` `,(0,n.jsx)(e.h4,{children:"1. Basic Approach: Using Individual Colour Props"}),` `,(0,n.jsx)(e.p,{children:"For SVGs with just a few different coloured elements:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`export const MultiColourIcon = ({ className, primaryColour, secondaryColour, ...props }) => ( ); // Usage with multiple colours export default function IconDemo() { return (

); } `})}),` `,(0,n.jsxs)(e.p,{children:["In this example, we added ",(0,n.jsx)(e.code,{children:"primaryColour"})," and ",(0,n.jsx)(e.code,{children:"secondaryColour"})," props to allow customisation of specific elements. This is useful for SVGs with only a few colourable parts."]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"https://res.cloudinary.com/timonwa-s-notes/image/upload/v1745358454/Article%20Images/Timonwa%27s%20Notes/How%20to%20Convert%20an%20SVG%20into%20a%20React%20Component:%20A%20Simple%20Guide/Screenshot_2025-04-22_at_11.35.09_AM_vpfio5.png",alt:"An SVG icon with multiple colours applied dynamically"})}),` `,(0,n.jsx)("figcaption",{children:(0,n.jsx)(e.p,{children:`Figure 2: Multi-coloured SVG icon using props for primary and secondary colours.`})}),` `,(0,n.jsx)(e.h4,{children:"2. Advanced Approach: Using a Colours Object"}),` `,(0,n.jsx)(e.p,{children:"For complex SVGs with many coloured elements, a more scalable approach uses a colours object:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`export const ComplexIcon = ({ className, colours = {}, ...props }) => { // Default colours that will be used if not overridden const defaultColours = { primary: "currentColor", secondary: "currentColor", accent: "#FF5733", background: "transparent", outline: "#333333", // Add more as needed }; // Merge default colours with provided colours const mergedColours = { ...defaultColours, ...colours }; return ( ); }; // Usage examples export default function ComplexIconDemo() { return (

{/* Using default colours with class-based text colour */} {/* Customising specific colours */} {/* Complete colour scheme override */}

); } `})}),` `,(0,n.jsx)(e.p,{children:"This approach provides several advantages:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Default colours can be established but easily overridden"}),` `,(0,n.jsx)(e.li,{children:"Colour schemes can be defined once and reused across multiple icons"}),` `,(0,n.jsx)(e.li,{children:"The component remains clean even with many colourable elements"}),` `,(0,n.jsx)(e.li,{children:"You can set theme-specific colour schemes throughout your application"}),` `]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"https://res.cloudinary.com/timonwa-s-notes/image/upload/v1745358454/Article%20Images/Timonwa%27s%20Notes/How%20to%20Convert%20an%20SVG%20into%20a%20React%20Component:%20A%20Simple%20Guide/Screenshot_2025-04-22_at_11.35.52_AM_i4pgq5.png",alt:"A complex SVG icon with a fully customized colour scheme"})}),` `,(0,n.jsx)("figcaption",{children:(0,n.jsx)(e.p,{children:`Figure 3: Complex SVG icon with a custom colour scheme applied using a colours object.`})}),` `,(0,n.jsx)(e.h3,{children:"Animating SVG Components"}),` `,(0,n.jsx)(e.p,{children:"You can animate SVG components using CSS transitions or React animation libraries:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`export const LoaderIcon = ({ className, ...props }) => ( ); // Usage with animation export default function LoaderDemo() { return (

); } `})}),` `,(0,n.jsxs)(e.p,{children:["In this example, we use the ",(0,n.jsx)(e.code,{children:"animate-spin"})," class from Tailwind CSS to create a spinning loader icon. You can also use CSS keyframes or libraries like ",(0,n.jsx)(e.a,{href:"https://www.framer.com/docs/animation/",children:"Framer Motion"})," for more complex animations."]}),` `,(0,n.jsxs)("video",{controls:!0,autoPlay:!0,children:[(0,n.jsx)("source",{src:"https://res.cloudinary.com/timonwa-s-notes/video/upload/v1745358455/Article%20Images/Timonwa%27s%20Notes/How%20to%20Convert%20an%20SVG%20into%20a%20React%20Component:%20A%20Simple%20Guide/Screen_Recording_2025-04-22_at_11.37.15_AM_w03vrw.mov",type:"video/mp4"}),(0,n.jsx)(e.p,{children:"Your browser does not support the video tag."})]}),` `,(0,n.jsx)("figcaption",{children:(0,n.jsx)(e.p,{children:"Figure 4: Animated SVG loader icon demonstrating the use of CSS animations."})}),` `,(0,n.jsx)(e.h3,{children:"Using SVG Components in Next.js"}),` `,(0,n.jsxs)(e.p,{children:["The approach works perfectly in Next.js applications as well. For optimal usage in Next.js, you might want to place your SVG components in a dedicated directory like ",(0,n.jsx)(e.code,{children:"components/icons/"}),"."]}),` `,(0,n.jsx)(e.h2,{children:"Common Issues and Troubleshooting"}),` `,(0,n.jsx)(e.h3,{children:"React SVG Icon Not Showing/Rendering"}),` `,(0,n.jsx)(e.p,{children:"If your SVG component isn't rendering at all, there are several common causes to check:"}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"JSX attribute naming"}),": SVG attributes in React need to use camelCase instead of kebab-case. For example:"]}),` `]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`// Incorrect (kebab-case)

Building a draggable slider in React

Subscribe to my newsletter 💌