在 React 中顯示 SVG 檔案

1. 在 React 中使用 src 屬性包含 svg
2. 在 create-react-app 2.0 中包含本地託管的 svg 檔案和 React

React 經常被譽為最流行的 JavaScript 框架之一，但實際上，它只是一個用於構建使用者介面的庫。與任何其他 Web 應用程式一樣，具有影象、視訊和其他視覺內容的 React 應用程式比其他應用程式更具吸引力。

如今，越來越多的開發人員使用 .svg 圖示來顯示重要的視覺效果，例如徽標。

在 React 中使用 src 屬性包含 svg

有多種方法可以在 React 應用程式中顯示 .svg 檔案。本文討論了在 React 應用程式中包含 .svg 視覺效果的兩種方法。

使用 svg 副檔名來顯示可視檔案的一種方法是使用 <img> 元素的 src 屬性。讓我們看一個具有 .svg 檔案的示例。

export default function App() {
  return (
    <div className="App">
      <img
        src={"https://svgshare.com/i/e77.svg"}
        style={{ width: 50, height: 50 }}
      ></img>
    </div>
  );
}

如你所見，原始檔採用 svg 格式，但如果你檢視 CodeSandbox，此程式碼可以正常工作並且確實顯示了應有的視覺效果。

但是，將這些檔案顯示為 <img> 元素意味著它們將被視為普通影象並失去 svg 檔案的獨特功能。

因此，以這種方式顯示 svg 影象可能會刪除它的一些獨特屬性。最好在本地託管它們。

在 create-react-app 2.0 中包含本地託管的 svg 檔案和 React

create-react-app 包的更新版本包括必要的載入器，並允許你匯入本地儲存的 .svg 資產並在不犧牲任何屬性的情況下使用它們。

下面是使用 import 語句來顯示 .svg 檔案的示例。

import { ReactComponent as LogoSvg } from './assets/Logo.svg';

我們指定 svg 檔案的相對路徑並匯入名為 export 的 ReactComponent，儘管我們在應用程式中使用 as 語句將其引用為 LogoSvg。

最好記住 ReactComponent 名稱不是可選的，並且有必要在 create-react-app 中匯入 svg 檔案。