创建svgIcon组件

1. 在svg图片的目录创建index.js 

``` const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context('./svg', true, /\.svg$/) requireAll(req) ``` 

2. 下载[email protected] 

3. 修改vue.config.js

 ``` chainWebpack:config => { const svgRule = config.module.rule('svg') // 清除已有的所有 loader,如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。 svgRule.uses.clear() // 添加要替换的 loader svgRule .test(/\.(svg)(\?.*)?$/) .exclude .add(/node_modules/) // 正则匹配排除node_modules目录 .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) } 重启项目 ```

 4. 创建组件 SvgIcon.svg 

 ``` ```

 5. main.js 引入组件 还有svg目录下的index.js

 vue3在main.js中全局注册组件

 ``` import '@/assets/index.js' // 注册svgicon import SvgIcon from '@/components/SvgIcon.vue' const app = createApp(App) app.component('svg-icon', SvgIcon) ```