在 Next.js 13 中匯入動畫 SVG 檔案
import Image from "next/image"; export default function Home() { return ( <main className="flex h-screen flex-col items-center"> <div className="container mt-12 flex flex-col items-center justify-center gap-4 px-4 py-8"> <object type="image/svg+xml" data="/images/blaze-hero-animation.svg"> svg hero animation </object> </div> <Image src="/images/blaze-hero-animation.svg" alt="hero animation" width={500} height={500} /> </main> ); }
物件標籤為我提供了動畫 svg,但背景顏色為白色(原始 svg 具有透明背景。圖像為我提供了透明 svg,但沒有任何動畫。 我需要使用 SVGR 還是其他東西?這是 Next.js 13 中的內容。
我只想導入我的透明動畫 svg 檔案。 id 不想搞亂 SVGR,因為我認為我不應該使用它。
您可以建立一個 React 元件來封裝您的 SVG,如下所示:
這裡我使用 Tailwind CSS 與主題結合,以確定 SVG 應該使用淺色還是深色(
-light
和-dark
是只是自訂顏色)。另請參閱 React SVGR 網站,它會自動將 SVG 轉換為 React 元件。
注意
我在使用 Typescript 在某些 SVG 上執行
next build
時遇到了問題,這些 SVG 的主體內有## 等標籤。
我嘗試了不同的解決方案,但似乎都無法正常工作,因此我只是將文件擴展名從.tsx
替換為
.jsx並且構建順利.