【搭建/全套解决方案/部署】vue3的后台管理系统-08-Icon 图标处理方案2：内部图标

1 src 新建 icons 文件夹

2 资料文件中，直接复制svg的文件夹到icons

3 在 icons 下创建 index.js 文件，该文件中需要完成两件事情：

1.  导入所有的 `svg` 图标
2.  完成 `SvgIcon` 的全局注册

这样就不需要写这个了：import SvgIcon from '@/components/SvgIcon/index.vue'

导入后，还可以直接使用这些本地的svg

解决方案：

import SvgIcon from '@/components/SvgIcon'

// https://webpack.docschina.org/guides/dependency-management/#requirecontext
// 通过 require.context() 函数来创建自己的 context
const svgRequire = require.context('./svg', false, /\.svg$/)
// 此时返回一个 require 的函数，可以接受一个 request 的参数，用于 require 的导入。
// 该函数提供了三个属性，可以通过 require.keys() 获取到所有的 svg 图标
// 遍历图标，把图标作为 request 传入到 require 导入函数中，完成本地 svg 图标的导入
svgRequire.keys().forEach(svgIcon => svgRequire(svgIcon))

export default app => {
  app.component('svg-icon', SvgIcon)
}

在 main.js 中引入该文件

...
// 导入 svgIcon
import installIcons from '@/icons'
...
installIcons(app)
...

删除 views/login 下 局部导入 SvgIcon 的代码 注释不必要的import

在 login/index.vue 中使用 SvgIcon 引入本地 svg

换成这个：

// 用户名   
<svg-icon icon="user" />
// 密码
<svg-icon icon="password" />
// 眼睛
<svg-icon icon="eye" />

此时 处理内容 svg 图标的代码 已经完成

打开浏览器，我们发现 图标依然无法展示！ 这又是因为什么原因呢？

来看下一节 《使用 svg-sprite-loader 处理 svg 图标》