Vue 3 に svg ファイルをインポートするにはどうすればよいですか?

Question

次のことを試しました:
https://github.com /visualfanatic/vue-svg-loader/tree/master

しかし、vue-template-compiler は Vue 2 で使用されているため、バージョンの競合が発生します。

試してみました:
https://github.com/visualfanatic/vue-svg -loader

しかし、特定の Vue 依存関係がありません。

TypeScript を使用する場合、型定義ファイルを宣言する必要があるという注意事項があることに気付きました。ただし、依然として「モジュール '../../assets/myLogo.svg' またはそれに対応する型宣言が見つかりません」というエラーが表示されます。

これは私が追加したものです:

vue.config.js

module.exports = {
  chainWebpack: (config) =>
  {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgルール
      .use('vue-loader-v16')
      .loader('vue-loader-v16')
      。終わり（）
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  }、
  configureWebpack: process.env.NODE_ENV === 'production' ? {} : {
    開発ツール: 'ソースマップ'
  }、
  publicPath: process.env.NODE_ENV === 'production' ?
    '/パーソナルウェブサイト/' : '/'
}

shims-svg.d.ts

モジュール '*.svg' を宣言 {
  定数の内容: 任意;
  デフォルトのコンテンツをエクスポートします。
}

MyComponent.vue

<テンプレート>
  <div>
     <マイロゴ />
  </div>
</テンプレート>

<script lang="ts">
import * as MyLogo from "../../assets/myLogo.svg";

デフォルトのエクスポートdefineComponent({
  名前: "MyComponent"、
  コンポーネント: {
    マイロゴ
  }、
  小道具: {
    
  }、
  セットアップ(小道具)
  {
    戻る {
      小道具
    };
  }
});


</script>

Answer 1

vue-svg-loader は vue 3 と互換性がありません。 svg をインポートしてコンポーネントとして使用するには、ファイルの内容を「テンプレート」で囲むだけです

コンポーネント内:

リーリー

ウェブパック：

リーリー

scripts/svg-to-vue.js：

リーリー

Answer 2

実際、Vue CLI はすでに SVG をネイティブにサポートしています。内部では file-loader を使用します。ターミナルで次のコマンドを実行して確認できます:

リーリー

「svg」がリストされている場合 (そうであるはずです)、必要なのは次のことだけです。

リーリー

したがって、目的が SVG を表示することだけであれば、サードパーティのライブラリは必要ありません。

もちろん、TypeScript コンパイラーの型宣言要件を満たすために:

リーリー