如何在 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 依赖项。我注意到使用打字稿有一个警告，您需要声明类型定义文件。但是，我仍然得到“找不到模块 '../../assets/myLogo.svg' 或其相应的类型声明”。这是我添加的内容：视图.config.jsmodule.exports = {  chainWebpack: (config) =>   {    const svgRule = config.module.rule('svg');    svgRule.uses.clear();    svgRule      .use('vue-loader-v16')      .loader('vue-loader-v16')      .end()      .use('vue-svg-loader')      .loader('vue-svg-loader');  },  configureWebpack: process.env.NODE_ENV === 'production' ? {} : {    devtool: 'source-map'  },  publicPath: process.env.NODE_ENV === 'production' ?    '/PersonalWebsite/' : '/'}垫片-svg.d.tsdeclare module '*.svg' {  const content: any;  export default content;}我的组件.vue<template>  <div>     <MyLogo />  </div></template><script>import * as MyLogo from "../../assets/myLogo.svg";export default defineComponent({  name: "MyComponent",  components: {    MyLogo  },  props: {      },  setup(props)  {    return {      props    };  }});</script>

Answer 1

实际上，Vue CLI 开箱即用地支持 SVG。它在内部使用文件加载器。您可以通过在终端上运行以下命令来确认：

vue inspect --rules

如果列出了“svg”（应该是），那么您所要做的就是：

<template>

  <div>

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

  </div>

</template>

<script>

  // Please just use `@` to refer to the root "src" directory of the project

  import myLogoSrc from "@/assets/myLogo.svg";

  export default defineComponent({

    name: "MyComponent",

    setup() {

      return {

        myLogoSrc

      };

    }

  });

</script>

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

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

declare module '*.svg' {

  // It's really a string, precisely a resolved path pointing to the image file

  const filePath: string;

  export default filePath;

}

Answer 2

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>

网页包：

{

   test: /\.svg$/,

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

}

脚本/svg-to-vue.js：

module.exports = function (source) {

  return `<template>\n${source}\n</template>`;

};

Answer 3

不能肯定地说，因为我还没有尝试过 ts，

declare module '*.svg' {

    import type { DefineComponent } from 'vue';

    const component: DefineComponent;

    export default component;

}

我看到你正在使用：

import * as MyLogo from "../../assets/myLogo.svg";

我认为应该是：

import MyLogo from "../../assets/myLogo.svg";

Answer 4

全新安装的 vue.js 3.2 的示例：

<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125"/>