在vue3中怎么导入svg

在Vue3中，可以通过两种方式导入SVG。

第一种方式是使用Vue的component方法来注册SVG组件。首先，在src目录下创建一个名为icons的文件夹，并在其中放置SVG文件。然后，在src目录下创建一个名为icons/index.js的文件，将下面的代码放入其中：

import { createApp } from 'vue'
import SvgIcon from './SvgIcon.vue'

// 批量导入icons文件夹下的所有.svg文件
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./', false, /\.svg$/)
requireAll(req)

// 注册全局组件
createApp().component('svg-icon', SvgIcon)

接下来，在main.js文件中导入icons/index.js文件：

import './icons/index.js'

最后，在需要使用SVG的组件中，可以直接使用<svg-icon icon-class="svg文件名"></svg-icon>的方式引入SVG。例如：

<template>
  <div>
    <svg-icon icon-class="example"></svg-icon>
  </div>
</template>

第二种方式是使用vue-svg-loader来导入SVG。首先，安装vue-svg-loader：

npm install vue-svg-loader --save-dev

然后，在vue.config.js文件中配置vue-svg-loader：

module.exports = {
  chainWebpack: config => {
    // 排除icons文件夹，不使用vue-svg-loader解析
    config.module.rule('svg').exclude.add(resolve('src/icons')).end()

    // 配置vue-svg-loader
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  }
}

接下来，在需要使用SVG的组件中，可以使用<svg-icon src="路径/文件名.svg"></svg-icon>的方式引入SVG。例如：

<template>
  <div>
    <svg-icon src="icons/example.svg"></svg-icon>
  </div>
</template>

需要注意的是，第二种方式需要在组件中使用<svg-icon>标签，并指定src属性来引入SVG，而不是使用component方法注册SVG组件