【SVG】Vue项目中使用SVG作为图标的组件（svg-sprite-loader）

本文目标

在Vue的前端项目开发中，我们在很多地方都会使用到图标，而当前SVG格式的图标被越来越多的采用。

在开发中，我们一般需要将SVG的图片存放到特定位置，然后再进行调用。需要有一套有效的方式对SVG进行存储和调用。本文的主要目的就是介绍这套方法。预期可以帮助您实现以下开发需求：

1. 将下载下来的SVG格式图标存放到特定目录；
2. 在VUE中进行调用；
3. 可以对icon进行配置；

为什么会采用SVG作为图标格式？

1. 为了能兼容电脑、手机，同时面对各种浏览器的分辨率，传统的图标早已经无法满足设计需求。SVG矢量图完美的解决了这一点。
2. SVG的图标资源非常的丰富而且灵活，请参见文章《常用的免费SVG资源地址》

实际效果

image

安装及配置方法

一、安装组件svg-sprite-loader

npm install svg-sprite-loader --save-dev

二、在src/components下新建文件夹及文件SvgIcon/index.vue，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>

三、在src下新建icons文件夹，及icons文件夹下svg文件夹、index.js文件， index.js文件内容如下

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件
      
// register globally
Vue.component('svg-icon', SvgIcon)
      
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)

四、在main.js中引入svg

 import './icons'

五、修改根目录的vue.config.js（主要是为打包进行设置）

module.exports = {
  chainWebpack: config => {
    config.plugin("define").tap(args => {
      const argv = process.argv;
      const icourt = argv[argv.indexOf("--icourt-mode") + 1];

      args[0]["process.env"].MODE = `"${icourt}"`;

      return args;
    });

    // svg rule loader
    const svgRule = config.module.rule("svg"); // 找到svg-loader
    svgRule.uses.clear(); // 清除已有的loader, 如果不这样做会添加在此loader之后
    svgRule.exclude.add(/node_modules/); // 正则匹配排除node_modules目录
    svgRule // 添加svg新的loader处理
      .test(/\.svg$/)
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      });

    // 修改images loader 添加svg处理
    const imagesRule = config.module.rule("images");
    imagesRule.exclude.add(resolve("src/icons"));
    config.module.rule("images").test(/\.(png|jpe?g|gif|svg)(\?.*)?$/);
  },

  devServer: {
    host: "0.0.0.0",
    port: 8081,
    proxy: {
      // 配置跨域
      "/api": {
        target: "http://127.0.0.1:7001",
        ws: true,
        changOrigin: true,
        pathRewrite: {
          "^/api": "/"
        }
      }
    }
  }
};

现在就可以正式使用

1、下载SVG文件，然后将svg文件放置到src/icons/svg

2、在页面具体要使用的地方进行应用，方式如下：

    <svg-icon icon-class="your-icon"></svg-icon>

your-icon是保存在src/icons/svg下面的icon文件名称。比如可以修改为home, check, cart, back等

3、svg最大的特点是矢量，也是为什么我们会选择svg的原因，所以一定会有对svg进行自定义的情况。此时，您只需要在对应vue文件中写代样式即可

<svg-icon icon-class="more" class-name="moreIcon "/>

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

具体案例

1. 目标效果

2. 分析

这个地方是作为标签使用，icon是需要缩小的，所以需要自定义icon的样式，同时需要对svg进行自定义颜色

3. 代码

 <span style="font-size:0px;">
        <i class="inline-block text-jpcolor-500">
            <svg-icon icon-class="check" class-name="serviceIcon"/>
        </i>
        <span class="inline-block relative" style="padding-left:2px;font-size:12px;top:-1px;">免费送货</span>
</span>

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

4. 注：svg有的时候并不是符合需求，在缩小以后总会出现差强人意的地方，但基本上可以满足95%以上的使用需求。

如图：

这个时候就要多一些耐心去找更适合的svg样式，或者是自己修改svg（不在此文范畴）。

[本文到底啦]