インライン SVG を Nuxt3 Vite プロジェクトに追加する: ステップバイステップ ガイド

Question

こんにちは、インライン svgs を nuxt3 vite プロジェクトにインポートするのに問題があります。アドバイスをいただければ幸いです。

これはうまくいくことがわかりました しかし、インライン項目が必要です。したがって、

のようなことをして、次のようなことをします(requireはviteでは機能しません)。

リーリー

しかし、vite のインポート方法が奇妙であることがわかりました。結果は、v-html に表示される URL 文字列か、読み取り不可能なオブジェクトになります。

このプラグインを使用しようとしていますが、成功しません。

https://github.com/nuxt-community/svg-module

Answer 1

TS Nuxt 3 プロジェクトの状況は次のとおりです。

nuxt.config.ts ファイル:

リーリー

コンポーネントの例:

リーリー

最後の ?component は非常に重要であることに注意してください。そうしないと、TS がエラーを報告します。

プラグインのドキュメント: vite-svg-loader

Answer 2

vite は実際には @nuxtjs/svg プラグインと互換性がないようです。したがって、答えは、vite 固有のプラグインをインストールすることです。この場合、vite プラグインをインストールしてから、これを実行しました

リーリー