Vue3 封装svg小组件

---

前言

Vue3 来了，今天做个练习项目 想封装个svg的全局组件，百度了一波进行尝试发现都不行，经过不断尝试他重要是好了，给我显示出来了图标！！！

---

操作步骤

1.引入库

要使用SVG 首先就要引入SVG的相关依赖，代码如下（示例）：

 npm install svg-sprite-loader

2.配置SVG的加载器

光引入依赖还是不行滴，我们要进行配置，代码如下（vue.config.js）：

const {
    
     defineConfig } = require('@vue/cli-service')
const  {
    
     resolve } = require('path')
module.exports = defineConfig({
    
    
  transpileDependencies: true,
  lintOnSave:false,
  chainWebpack: config => {
    
    
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
    
    
        symbolId: 'icon-[name]'
      })
      .end()
	}
})

配置文件和我不一样的可以百度一下怎么配置（我也不太会，哈哈~）

3.创建存放SVG图标的位置和配置JS

3.1 存放位置

src/assets/icons/svg 我SVG存放的位置

3.2 创建index.js

src/assets/icons/index.js 我JS创建的位置

3.3 编写index.js

代码如下

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

这里需要注意的是，我百度的和这个很像，但是在完成后发现有问题，进行了修改
下面是原来的js代码

import Vue from 'vue'
import SvgIcon from '@/components/svgIcon'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)

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

经过我的不断尝试发现，Vue3 中组件的全局注册好像只能在main.js中注册（鄙人不是专职前端，没看文档哈~）

4.创建SVG组件

4.1 创建 svgIcon 目录

src/components/svgIcon 我创建的位置

4.2 创建index.vue文件

src/components/svgIcon/index.vue 我index.vue的位置

4.3 编写index.vue

代码如下：

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <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;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

5.在main.js中进行全局注册

代码如下：

import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router'
// svgIcon的组件
import svgIcon from '@/components/svgIcon'
import './assets/icons' // icon

// 获取app实例
const app = createApp(App)
// 全局注册svgIcon
app.component('svg-icon',svgIcon)
app.use(router).mount('#app')

6.找个页面去使用

<svg-icon icon-class="full" class-name="full"></svg-icon>

注意啦！这里的 full是src/assets/icons/svg 目录下的SVG文件的文件名

---

总结

祝大家在代码的海洋中畅快遨游！