vue中使用svg-sprite-loader处理svg图片

实现内容：1.vue载入svg   2.能够更改svg样式   3.封装组件

1.使用的loader：svg-sprite-loader、svgo-loader

我们在vue.config.js文件里找到chainWebpack属性，添加如下代码：

chainWebpack: config =>{
    const dir = path.resolve(__dirname, 'src/assets/icons')

    config.module
      .rule('svg-sprite')
      .test(/\.svg$/)
      .include.add(dir).end() // 包含 icons 目录
      .use('svg-sprite-loader-mod').loader('svg-sprite-loader-mod').options({extract:false}).end()
    config.plugin('svg-sprite').use(require('svg-sprite-loader-mod/plugin'), [{plainSprite: true}])
    config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录

  }

2.需要安装的loader：svg-sprite-loader、svgo-loader

npm i svg-sprite-loader svgo-loader -D

3.引入svg图片

我们在src/assets下新建icons文件夹，文件夹里再新建svg文件夹，将svg图片放至svg文件夹里。（具体路径可根据自己习惯配置）

4.统一引入svg图片

在src下新建icons文件夹，新建index.js文件（要注意路径的配置）：

  let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
  try {importAll(require.context('../assets/icons', true, /\.svg$/));} catch (error) {console.log(error);}

5.在main.js中引入

import './icons';

6.在组件中使用

<!-- #icon-  为icon的前缀，XXX为icon名称 -->
<svg>
    <use xlink:href="#icon-XXX"></use>
</svg>

这样，我们就能在界面上看到svg图片了。

7.优化

但是这样子使用有点麻烦，我们希望能够像那些ui组件库一样，直接name：XX标签就能使用，所以我们可以自定义一个组件.
在components文件夹下新建Icon.vue文件：

记得在组件里统一引入svg图片，上方有例子

<template>
  <svg class="icon" @click="$emit('click',$event)">
    <use :xlink:href="'#' + name" />
  </svg>
</template>

<script lang='ts'>
  let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
  try {importAll(require.context('../assets/icons', true, /\.svg$/));} catch (error) {console.log(error);}
  export default {
    props: ['name'],
    name: 'Icon'
  };
</script>

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

8.继续优化

使用的时候发现，有时候我们无法修改svg图片的颜色，比如在icon-font网站上下载的svg图片颜色无法更改。发现我们需要删掉svg原有的path中的fill属性，但是如果icon图标多的话一个个删会很麻烦，所以要使用svgo-loader配置自动删除svg原有的path中的fill属性：

修改vue.config.js为如下代码：

chainWebpack: config =>{
    const dir = path.resolve(__dirname, 'src/assets/icons')

    config.module
      .rule('svg-sprite')
      .test(/\.svg$/)
      .include.add(dir).end() // 包含 icons 目录
      .use('svg-sprite-loader-mod').loader('svg-sprite-loader-mod').options({extract:false}).end()
      .use('svgo-loader').loader('svgo-loader')
      .tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})).end()
    config.plugin('svg-sprite').use(require('svg-sprite-loader-mod/plugin'), [{plainSprite: true}])
    config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录

  }

功能总结：

1.通过svg-sprite-loader引入svg，并进行封装组件

2.通过svgo-loader对svg的fill属性的颜色进行自动清除