如何正确导入 svg 作为 VueComponent

Question

我有一个 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 的导出，如下所示。 我该如何解决这个问题

Answer 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 定义可能不起作用

你可以试试这个定义

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

Answer 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>