创建svgIcon组件

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

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

2. 下载svg-sprite-loader@4.1.3 

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 

 ``` <template> <svg class="svg-icon" :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> <script> export default { name: 'svg-icon', props: { iconClass: { type: String }, className: { type: String } }, computed: { iconName () { return `#icon-${this.iconClass}` }, svgClass () { if (this.className) { return `svg-icon ${this.className}` } return `svg-icon` } } } </script> <style lang="scss" scoped> .svg-icon { width: 16px; height: 16px; vertical-align: middle; fill: currentColor; overflow: hidden; } </style> ```

 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) ```