VUE3.0使用SVG图标

1.开发环境安装依赖

npm install svg-sprite-loader -D

2.vue.config.js 配置

module.exports ={
    chainWebpack: config => {
        config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
        config.module
            .rule('svg-sprite-loader')
            .test(/\.svg$/)
            .include
            .add(resolve('src/assets/svg')) //处理svg目录
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
    }
}

3.创建SVG组件库

<template>
    <svg aria-hidden="true">
        <use :href="'#icon-'+iconName"/>
    </svg>
</template>

<script>
    export default {
        name: "Index",
        props:{
            iconName:{
                type: String,
                default: '',
                require: true
            }
        },
        setup(){
            //获取当前svg目录下的所有svg文件
            const req = require.context('@/assets/svg',false,/\.svg$/);
            //解析
            const requireAll = (requireContext) =>{
                return requireContext.keys().map(requireContext);
            }
            requireAll(req)
        }
    }
</script>

4.调用组件

<svg-icon iconName="home"/>

注意：1.首先引入组件或组件设置成全局组件。2.样式可以和其他元素一样随便设置