Vue3 中导入 SVG 的两种方法 - 详细教程

在Vue3中，可以通过两种方式导入SVG。\n\n第一种方式是使用Vue的component方法来注册SVG组件。首先，在src目录下创建一个名为icons的文件夹，并在其中放置SVG文件。然后，在src目录下创建一个名为icons/index.js的文件，将下面的代码放入其中：\n\njavascript\nimport { createApp } from 'vue'\nimport SvgIcon from './SvgIcon.vue'\n\n// 批量导入icons文件夹下的所有.svg文件\nconst requireAll = requireContext => requireContext.keys().map(requireContext)\nconst req = require.context('./', false, /.svg$/)\nrequireAll(req)\n\n// 注册全局组件\ncreateApp().component('svg-icon', SvgIcon)\n\n\n接下来，在main.js文件中导入icons/index.js文件：\n\njavascript\nimport './icons/index.js'\n\n\n最后，在需要使用SVG的组件中，可以直接使用<svg-icon icon-class="svg文件名"></svg-icon>的方式引入SVG。例如：\n\nhtml\n<template>\n <div>\n <svg-icon icon-class="example"></svg-icon>\n </div>\n</template>\n\n\n第二种方式是使用vue-svg-loader来导入SVG。首先，安装vue-svg-loader：\n\nbash\nnpm install vue-svg-loader --save-dev\n\n\n然后，在vue.config.js文件中配置vue-svg-loader：\n\njavascript\nmodule.exports = {\n chainWebpack: config => {\n // 排除icons文件夹，不使用vue-svg-loader解析\n config.module.rule('svg').exclude.add(resolve('src/icons')).end()\n\n // 配置vue-svg-loader\n config.module\n .rule('icons')\n .test(/.svg$/)\n .include.add(resolve('src/icons'))\n .end()\n .use('vue-svg-loader')\n .loader('vue-svg-loader')\n }\n}\n\n\n接下来，在需要使用SVG的组件中，可以使用<svg-icon src="路径/文件名.svg"></svg-icon>的方式引入SVG。例如：\n\nhtml\n<template>\n <div>\n <svg-icon src="icons/example.svg"></svg-icon>\n </div>\n</template>\n\n\n需要注意的是，第二种方式需要在组件中使用<svg-icon>标签，并指定src属性来引入SVG，而不是使用component方法注册SVG组件。