透明性とアニメーションを維持しながら、アニメーション SVG ファイルを Next.js 13 にインポートするにはどうすればよいですか?

Question

Next.js 13 でアニメーション SVG ファイルをインポートする

リーリー

object タグはアニメーション化された SVG を提供しますが、背景色は白です (元の SVG の背景は透明でした。画像では透明な SVG が提供されますが、アニメーションはありません)。 SVGR などを使用する必要がありますか?これは Next.js 13 に含まれています。

透明なアニメーション SVG ファイルのみをインポートしたいと考えています。 SVGR は使うべきではないと思うので、いじりたくありません。

Answer 1

React コンポーネントを作成して、次のように SVG をラップできます:

リーリー リーリー

ここでは、Tailwind CSS とテーマを組み合わせて、SVG で明るい色を使用するか暗い色を使用するかを決定しています (-light と -dark は単なるカスタム カラーです)。
SVG を React コンポーネントに自動的に変換する React SVGR Web サイト もチェックしてください。

＃＃＃＃＃＃知らせ＃＃＃＃＃＃ Typescript を使用して、本文内に

のようなタグが含まれる一部の SVG で
next build を実行するときに問題が発生します。 さまざまな解決策を試しましたが、どれも機能しなかったため、ファイル拡張子を .tsx から .jsx
に置き換えただけで、ビルドは正常に完了しました。