vue3 封装icon图标组件

这里记录一下搭项目的时候遇到的问题

如果想要svg文件能全部导入到body我们需要一个插件

 npm i svg-sprite-loader    //这里百度到一个插件

在vue.config.js文件里新增一个配置项

const path = require('path')

const { defineConfig } = require('@vue/cli-service')

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

 module.exports = defineConfig({
  chainWebpack: (config) => {    //这里是svg-sprite-loader插件的用法
    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()
  },

})

接下来我们开始封装一个组件

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

<script lang="ts">
import { defineComponent } from 'vue'
import { ref, computed } from 'vue'
export default defineComponent({
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const iconName = computed(() => {
      return `#icon-${props.iconClass}`
    })
    const svgClass = ref(
      computed(() => {
        if (props.className) {
          return 'svg-icon ' + props.className
        } else {
          return 'svg-icon'
        }
      })
    )
    return {
      iconName,
      svgClass
    }
  }
})
</script>

<style lang="less">
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

接下来在我们的项目里新建一个icons文件
svg文件夹放入我们要使用的本地svg文件就可以了

由于我们项目使用的vue3 + ts , 所以这里index.ts里这样来写

 import SvgIcon from '@/components/SvgIcon/index.vue' 
 //根据上面封装的svg组件变化
  
 // 导入所有的svg图标 
 
 //1.方法一  
 const svgRequire = require.context('./svg', false, /\.svg$/)
 svgRequire.keys().forEach((svgIcon) => svgRequire(svgIcon))

 export default (app: any) => {
  app.component('svg-icon', SvgIcon)
}
//2.方法二
const req = require.context('./svg', false, /\.svg$/)
const requireAll = (requireContext: any) =>
  requireContext.keys().map(requireContext)
requireAll(req)

//接着去main.ts注册一下          

import installIcons from '@/icons'

installIcons(app)

最后去页面里使用

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