Wie importiere ich SVG-Dateien in Vue 3?

Question

Ich habe Folgendes versucht:
https://github /visualfanatic/vue-svg-loader/tree/master

Aber da in Vue 2 der Vue-Template-Compiler verwendet wird, gibt es einen Versionskonflikt.

Ich habe versucht:
https://github.com/visualfanatic/vue-svg -loader

Aber mir fehlt eine bestimmte Vue-Abhängigkeit.

Mir ist aufgefallen, dass es bei der Verwendung von TypeScript einen Hinweis gibt, der die Deklaration einer Typdefinitionsdatei erfordert. Ich erhalte jedoch immer noch die Fehlermeldung „Modul '../../assets/myLogo.svg' oder die entsprechende Typdeklaration kann nicht gefunden werden“.

Das habe ich hinzugefügt:

vue.config.js

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

    svgRule.uses.clear();

    svgRule
      .use('vue-loader-v16')
      .loader('vue-loader-v16')
      .Ende()
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
  configureWebpack: Process.env.NODE_ENV === 'Produktion' {} : {
    devtool: 'source-map'
  },
  publicPath: Process.env.NODE_ENV === 'Produktion'?
    '/Persönliche Webseite/' : '/'
}

shims-svg.d.ts

modul '*.svg' deklarieren {
  const-Inhalt: beliebig;
  Standardinhalte exportieren;
}

MyComponent.vue

<template>
  <div>
     <MeinLogo />
  </div>
</template>

<script lang="ts">
import * als MyLogo aus „../../assets/myLogo.svg“;

Standard exportieren defineComponent({
  Name: „MyComponent“,
  Komponenten: {
    MeinLogo
  },
  Requisiten: {
    
  },
  Setup(Requisiten)
  {
    zurückkehren {
      Requisiten
    };
  }
});


</script>

Answer 1

vue-svg-loader 不兼容 vue 3。要导入 svg 并将其用作组件，只需将文件内容包裹在 'template' 中

在组件中：

<template>
  <div class="title">
    <span>Lorem ipsum</span>
    <Icon />
  </div>
</template>

<script>
import Icon from '~/common/icons/icon.svg';

export default {
  name: 'PageTitle',
  components: { Icon },
};
</script>

Webpack：

{
   test: /\.svg$/,
   use: ['vue-loader', path.resolve(__dirname, 'scripts/svg-to-vue.js')],
}

scripts/svg-to-vue.js：

module.exports = function (source) {
  return `<template>\n${source}\n</template>`;
};

Answer 2

实际上，Vue CLI已经原生支持SVG。它内部使用file-loader。您可以通过在终端上运行以下命令来确认：

vue inspect --rules

如果“svg”被列出（应该会被列出），那么您只需要：

<template>
  <div>
    <img :src="myLogoSrc" alt="my-logo" />
  </div>
</template>

<script lang="ts">
  // 请使用`@`来引用项目的根目录“src”
  import myLogoSrc from "@/assets/myLogo.svg";

  export default defineComponent({
    name: "MyComponent",

    setup() {
      return {
        myLogoSrc
      };
    }
  });
</script>

因此，如果您的目的只是显示SVG，那么不需要任何第三方库。

当然，为了满足TypeScript编译器的类型声明要求：

declare module '*.svg' {
  // 它实际上是一个字符串，精确地说是指向图像文件的解析路径
  const filePath: string;

  export default filePath;
}