目录

前言

一、安装svg-sprite-loader

二、封装组件

1.在components路径下新建svg/svgIcon.vue

2.在src目录下新建icons文件夹，包括一下文件

三、配置svg-sprite-loader

四、使用svg-icon组件

五、配置被选中时的颜色

1.检查svg源文件

2.配置选中后得颜色

总结

---

前言

网页中经常会遇到一些自定义得小图标，为了保证图标不失真，我们经常使用svgIcon实现。接下来一起看看如何安装和配置把~

---

一、安装svg-sprite-loader

安装命令：npm install svg-sprite-loader -D  

二、封装组件

1.在components路径下新建svg/svgIcon.vue

代码如下：

<template>
  <div
    v-if="isExternal"
    :style="styleExternalIcon"
    class="svg-external-icon svg-icon"
    v-on="$listeners"
  />
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
import { isExternal } from '@/utils/validate'

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: '',
    },
  },
  computed: {
    isExternal() {
      return isExternal(this.iconClass)
    },
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`,
      }
    },
  },
}
</script>

<style lang="stylus" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor; /*  currentColor 表示一个变量，若未赋值color，则继承父级color */
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>

2.在src目录下新建icons文件夹，包括一下文件

index.js 代码如下：

import Vue from 'vue'
import SvgIcon from '@/components/svg/svgIcon' // svg组件

// 注册到全局
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

svgo.yml代码如下：

# replace default config

# multipass: true
# full: true

plugins:

  # - name
  #
  # or:
  # - name: false
  # - name: true
  #
  # or:
  # - name:
  #     param1: 1
  #     param2: 2

- removeAttrs:
    attrs:
      - 'fill'
      - 'fill-rule'

 

三、配置svg-sprite-loader

找到vue.config.js ，添加以下配置：

 chainWebpack: (config) => {
    config.module.rules.delete('svg')
    config.resolve.symlinks(true)
    config.resolve.alias
      .set('@', resolve('src'))
      .set('~@', resolve('src/assets'))
      .set('@c', resolve('src/components'))
      .set('static', resolve('src/static'))
    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]',
      })
  },

四、使用svg-icon组件

 <svg-icon :icon-class="item.icon" class="icon_padding" />

五、配置被选中时的颜色

1.检查svg源文件

这里注意查看 icons/svg  下面得文件，fill属性需要改成currentColor（当前颜色，如果没有则继承父节点颜色)

如下：

 注意：

1. a不需要改变，默认是svg背景色，只需要改变.b就可以
2. 如果是行内元素则直接写： fill="currentColor"

2.配置选中后得颜色

这里我得使用场景是侧边栏，所以我会直接改变填充颜色：

.el-menu-item.is-active.icon_padding{
    fill:#2F51FF !important
    }

就这样就可以啦，是不是非常简单鸭~

对了，如果你要改变svg大小，推荐你使用上述方式，而不要直接改变组件里面得大小~

如下：

 .icon_padding{
  width: 16PX !important;
  height: 16PX !important;
    margin-right: 8PX

    }

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了安装、封装svg图标、使用及配置，很简单啦，试起来吧，宝子们~