[vue]加载svg文件之svg-sprite-loader

SVG的显示

通过网上方式都没成功,引入路径，总是失败，经过多次的测试终于发现是svg的加载出了问题，记录一下，方便以后的使用

SVG的加载

工具

初始化svg加载工具

"svg-sprite-loader": "^6.0.11"

配置

vue.config.js中配置svg文件的加载

module.exports ={
    chainWebpack(config) {
        config.module.rules.delete("svg"); // 重点：删除默认配置中处理svg,
        config.module.rule('svg-sprite-loader').test(/\.svg$/)
        .include.add(resolve('src/assets/svg')) // 处理svg目录
        .end().use('svg-sprite-loader').loader('svg-sprite-loader')
        .options({//被加载svg 元素的名字变为svg-[name]
            symbolId: 'svg-[name]'
        })
    }
}

一定要注意在chainWebpack中配置的时候该配置是一直被执行的，并不是只有生产环境才执行，本人在设置的时候不小心将配置放在了 if (PROD) 条件中，导致本地调试的时候，一直无法正常加载，打印import的svg文件，打印的是加载到的是svg文件路径与文件名的hash组成，注意这个就是因为上述配置没有生效

import detail from '@/assets/svg/detail.svg';//加载单个svg

正常svg被正常加载，打印的是以下内容:

展示svg组件

<template>
  <!-- v-bind="$attrs" 存在class之外的其它属性需要继承-->
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="`#${svgname}`"/>
  </svg>
</template>

<script>
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'icon-svg',
  props: {
    svgname: {
      type: String,
      required: true,
    },
  },
})
/*
自定义 svg 的显示
  使用说明：
    1、下载或制作的svg文件，放在/src/assets/svg目录下
    2、项目根据/src/assets/svg/svgo.yml配置自动压缩精简svg，也可以独立运行 npm run svgo 压缩精简svg
    3、使用Demo：
       -----template start-----
         <!--svg文件名 为import svg文件.id-->
         <icon-svg :svgname="singleName" class="svg-sg"></icon-svg>
       ----template   end----
       ----script start ----
       import IconSvg from '@/components/icon-svg.vue'
       import { defineComponent } from "vue";
       import detail from '@/assets/svg/detail.svg';//加载单个svg
       export default defineComponent({
           components: {
               'icon-svg': IconSvg
           },
           setup() {
               let singleName=detail.id;
               return {
                 singleName,
               }
           }
       })
       ----script end ----
       */
</script>
<style lang="less" scoped>
.svg-icon {
  width: 10em;
  height: 10em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

加载一个文件夹中所有svg文件

/**
 * 用于批量加载指定文件夹下的svg文件
 * 本地src/assets/svg 下svg文件
 */
const localSvg = () => {
  try {
    const requireContext: __WebpackModuleApi.RequireContext = 
    require.context('@/assets/svg',false,/\.svg$/)

    const requireAll = requireContext => requireContext
    .keys().map(fileName=>requireContext(fileName).default);

    // 加载目录下的所有的 svg 文件
    let svgs= requireAll(requireContext);
    return svgs
  } catch (error) {
    console.error(error)
  }
}

export { localSvg }

加载svg实例

<template>
  <a-layout class="container-box" v-cloak>
    <a-card title="SVG 单个展示">
      <icon-svg :svgname="singleName" class="svg-sg"></icon-svg>
    </a-card>

    <a-card title="SVG展示 批量加载">
      <icon-svg v-for="(item, index) in svgList" :key="index" :svgname="item.id" class="svg-sg" ></icon-svg> 
    </a-card>
  </a-layout>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue';
import IconSvg from '@/components/icon-svg.vue';
import { localSvg } from '@/config/svg';//批量加载svg时单独使用
import detail from '@/assets/svg/detail.svg';//加载单个svg
export default defineComponent({
  name: 'svg-view',
  components: {
    'icon-svg': IconSvg,
  },
  setup() {
    let svgList = localSvg()
    let singleName=detail.id;
    return {
      singleName,
      svgList
    }
  },
})
</script>

<style lang="less" scoped>
.svg-sg{
  width: 100px;
  height:100px;
  color: red;
  display: inline-block;
}
</style>

vue-svg-loader方式

该方式是ant-design-vue官方提供的方式，但是测试后发现，未能成功实现展现，并且该插件已经很久没有更新了，现在的最新版本是0.16.0,vue-svg-loader测试方式启动都未成功，存在各种版本问题，所以等以后测试成功之后在补充吧

 const svgRule = config.module.rule('svg');
// 清空默认svg规则
svgRule.uses.clear();
//针对svg文件添加vue-svg-loader规则
svgRule.use('vue-svg-loader').loader('vue-svg-loader');