vue3 svg图标全局使用

vue3 svg图标使用

1.配置插件

需要用到 svg-sprite-loader

npm install svg-sprite-loader -D

2.配置vue.config ,处理svg目录

const path = require('path')

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

3.创建svg component 组件

<template>
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName" />
    </svg>
</template>

<script>
export default {
    name: "svgIcon",
    props: {
        iconClass: {
            type: String,
            required: true,
        },
        className: {
            type: String,
            default: '',
        },
    },
    computed: {
        iconName() {
            return `#icon-${this.iconClass}`
        },
        svgClass() {
            if (this.className) {
                return 'svg-icon ' + this.className
            } else {
                return 'svg-icon'
            }
        },
    },
    setup(){
    	//创建icons/svg目录，存放svg图标
		//加载所有svg图标
        const requireAll = requireContext => requireContext.keys().map(requireContext)
        const req = require.context('@/icons/svg', false, /\.svg$/)
        requireAll(req)
    }
}
</script>

<style scoped>
.svg-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: hidden;
}
</style>

4.将svg组件注册为全局组件

vue3中在main.js中使用app.component()

//SvgIcon为svg公共组件
import SvgIcon from '@/components/svgIcon'

const app = createApp(App)

app.component('svg-icon', SvgIcon)

5.组件中使用

       <svg-icon icon-class="user"></svg-icon>
       <svg-icon icon-class="downs"></svg-icon>