如何正确导入 svg 作为 VueComponent答案

【问题标题】：How to properly import svg as a VueComponent如何正确导入 svg 作为 VueComponent
【发布时间】：2021-03-13 23:10:04
【问题描述】：

我有一个 SVG，我打算将其作为 VueComponent 从图标目录导入到我的组件中，

这里是图标 index.ts 文件：

import { VueComponent as Spinner } from './spinner.svg'

export { Spinner }

这是我导入 Spinner SVG 的方式：

import { Spinner } from '../assets/icons'

export default defineComponent({
  components: { Spinner },
  setup () {}
})

我收到一条错误消息，指出请求的模块未提供名为 VueComponent 的导出，如下所示。我该如何解决这个问题

【问题讨论】：

标签： svg import vue-component vuejs3

【解决方案1】：

应该可以用vue-svg-loader做到这一点

安装加载器

npm i -D vue-svg-loader@beta

在项目中创建一个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')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
};

MySvgComponent.js

import MySvgFile from "../assets/mySvgFile.svg";
export { MySvgFile };

然后使用...

<script>
import {MySvgFile} from "./components/MySvgComponent";

export default {
  name: "App",
  components: {
    MySvgFile
  }
};
</script>

请注意，svg 定义可能不起作用

您可以尝试this 定义

declare module '*.svg' {
    import type { DefineComponent } from 'vue';
    const component: DefineComponent;
    export default component;
}

【讨论】：

【解决方案2】：

另一种解决方案是为每个图标创建一个 Vue 组件。例如， AddIcon.vue 是一个带有 + 号的图标。文件内容：

<template>
  <g>
    <rect
      id="Rectangle_1"
      data-name="Rectangle 1"
      width="100"
      height="22"
      rx="4"
      transform="translate(0 39)"
      fill="currentColor"
    />
    <rect
      id="Rectangle_2"
      data-name="Rectangle 2"
      width="100"
      height="22"
      rx="4"
      transform="translate(61) rotate(90)"
      fill="currentColor"
    />
  </g>
</template>

然后你可以像任何vue组件一样将图标导入到父组件中。 import AddIcon from "@/components/icons/AddIcon.vue" 然后在组件内注册图标

components: {
...
AddIcon,
...
}

并在父组件的模板内使用如：

<template>
   <div>
     <svg>
       <add-icon />
     </svg>
   </div>
</template>

【讨论】：