在 React 中顯示 SVG 檔案
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
檔案。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn