在 React 中使用 SVG

問題

在 React 中可能會遇到希望 SVG 根據不同的操作行為做出變化的需求。例如，當使用者將滑鼠移到 SVG 上（hover 狀態），或是按下它（active 狀態）時，SVG 會改變顏色、大小，甚至加入一些動畫漸變效果。

直接嵌入 SVG 沒有辦法處理，因此我們通常將 SVG 轉換成 React 的 JSX 組件，這樣可以使用更多 React 的功能來控制行為。

解法

透過將 SVG 轉換成 React 的 JSX 組件，能夠更加靈活地操控樣式與行為。可以將顏色、尺寸等屬性作為 props 傳入，讓 SVG 在不同的情況下做出不同的反應。另外需要注意的是，當將 SVG 轉換為 JSX 時，SVG 的屬性需要使用 CamelCase 格式，比如 stroke-width 應改成 strokeWidth。

範例檔案

type Props = {
  width?: number;
  height?: number;
  color?: string;
};

export default function DownloadIcon({
  width = 20,
  height = 20,
  color = "currentColor",
}: Props) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width={width}
      height={height}
    >
      <circle cx="12" cy="12" r="10" fill={color} />
      <path
        d="M12 16V8M8 12l4 4 4-4"
        stroke="#fff"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <line
        x1="8"
        y1="18"
        x2="16"
        y2="18"
        stroke="#fff"
        strokeWidth="2"
        strokeLinecap="round"
      />
    </svg>
  );
}

透過傳入 width、height 和 color props，可以更方面更改 SVG 樣式。默認的顏色設為 currentColor，會繼承父元素的文本顏色。

使用方式

import DownloadIcon from "./DownloadIcon";

export default function App() {
  return (
    <div className="flex justify-center items-center h-screen">
      <DownloadIcon width={50} height={50} color="#FF5733" />
    </div>
  );
}