SVG动态引入和组件封装

背景：

svg引入大量的项目不使用的图标，所以修改为单个引入，然后通过下载单独的svg通过打包的形式优化

环境

安装插件

npm i svg-sprite-loader -D

配置vue.config.js

1. 全局svg配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    // 添加要替换的 loader
    svgRule.use('svg-sprite-loader').loader('svg-sprite-loader').options({ symbolId: 'icon-[name]' })
  },
  transpileDependencies: true,
  devServer: {
    port: 8080, // 设置每次打开本地的端口号
    headers: {
      'Access-Control-Allow-Origin': '*' // 设置允许跨域请求，否则会因为在其他端口号获取资源报错
    }
  }
})

2. 配置指定文件夹

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

module.exports = defineConfig({
  chainWebpack: (config) => {
    // 内置的svg处理排除指定目录下的文件
    // eslint-disable-next-line no-undef
    config.module.rule('svg').exclude.add(resolve('src/assets/svg')).end()
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      // eslint-disable-next-line no-undef
      .include.add(resolve('src/assets/svg'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
  transpileDependencies: true,
  devServer: {
    port: 8080, // 设置每次打开本地的端口号
    headers: {
      'Access-Control-Allow-Origin': '*' // 设置允许跨域请求，否则会因为在其他端口号获取资源报错
    }
  }
})

开发公共组件

<template>
  <svg class="svg-icon"  v-on="attrs">
    <use :xlink:href="`#icon-${props.name}`" />
  </svg>
</template>

<script setup lang="ts">
  import { defineProps, useAttrs } from 'vue'
  interface ITIcon{
    name: string
  }

  const props = defineProps<ITIcon>()
  const attrs = useAttrs()
</script>

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

导入全部svg到全局

创建index.ts 通过require.context导入全量的svg

export default function importAllSvgIcons () {
  try {
    const request: __WebpackModuleApi.RequireContext = require.context('../../assets/svg', false, /\.svg$/)
    request.keys().forEach(request)
  } catch (err) {
    console.log(err)
  }
}