vue3 封装svg组件，全局使用svg

npm i svg-sprite-loader

vue.config.js：黑体字部分

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = {
    transpileDependencies: true,
        lintOnSave: false,
    chainWebpack: config => {
            config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
            config.module
                .rule('svg-sprite-loader')
                .test(/\.svg$/)
                .include
                .add(resolve('src/icons')) //处理svg目录
                .end()
                .use('svg-sprite-loader')
                .loader('svg-sprite-loader')
                .options({
                    symbolId: 'icon-[name]'
                })
            config
                .plugin('html')
                .tap(args => {
                    args[0].title = "MetrologyWorks";
                    return args;
                }).end()
            config.module
                .rule('pdf')
                .test(/\.pdf$/)
                .use('pdf')
                .loader('file-loader')
                .end()
    },
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true
        }
    }
}

src下新建目录结构 icons：

 

 index.js:

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

 

SvgIcon.vue:

<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'
                }
            },
        }
    }
</script>

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

 

 

main.js:

import './icons'
import SvgIcon from '@/icons/SvgIcon'

async function startup() {

    await configure();

    const app = createApp(App)

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

    app.use(ElementPlus)
    app.use(router)

    app.mount('#app')
}

 

使用方式：

<template>
  <div class="real-time-data">
    <svg-icon icon-class="realData"></svg-icon> <span>实时数据</span>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<style lang="scss" scoped>
.real-time-data {
  line-height: 45px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}
</style>