Q225- How you implemented svg image in your project.

Here are the most common and professional ways to implement SVG images in a React project, along with when to use each method.

---

✅ 1. Using SVG as an Image File

Best for static icons, logos, simple decorative images.

import React from "react";
import Logo from "../assets/logo.svg";

function Header() {
  return <img src={Logo} alt="Website Logo" width="120" />;
}

export default Header;

✔ Pros:

• Easy to use
• Good for normal images/icons
• Browser handles rendering

---

✅ 2. Using SVG Inline (Directly as JSX)

Best for styling SVG with CSS, animations, or customizing fill/stroke.

function ArrowIcon() {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="black"
      strokeWidth="2"
    >
      <path d="M5 12h14M12 5l7 7-7 7" />
    </svg>
  );
}

✔ Pros:

• Full control with CSS
• Animations possible
• Best for icons/buttons

---

✅ 3. Import SVG as a React Component (CRA/Vite/Webpack)

Best for dynamic color styling, reusable components.

import { ReactComponent as IconSearch } from "../assets/search.svg";

function SearchBar() {
  return <IconSearch className="search-icon" />;
}

export default SearchBar;

✔ Pros:

• You can add props, classes, events
• Change colors easily with CSS
• Treat SVG like a component

🔧 Requirement:

Add this plugin if using Vite

npm i -D vite-plugin-svgr

vite.config.js

import svgr from "vite-plugin-svgr";

export default {
  plugins: [svgr()],
};

---

✅ 4. SVG as Background Image in CSS

Best for decorative icons, repeated patterns, or backgrounds.

.icon {
  width: 40px;
  height: 40px;
  background-image: url("../assets/user.svg");
  background-size: cover;
}

<div className="icon"></div>

---

✅ 5. Loading SVG from External CDN

Useful for icons libraries or when SVG is stored on S3/server.

<img src="https://cdn.example.com/icons/check.svg" alt="Check Icon" />

---

🎯 Which Method Did I Use in My Projects?

I usually implement SVG in 3 different ways depending on the use case:

✔ For logos → img src="logo.svg"

✔ For icons & styling → Imported as React Component (ReactComponent as Icon)

✔ For animations → Inline SVG (<svg>…</svg>)

This gives the best flexibility + performance.