vitePress 怎么使用 svg 图标

说实话问题来的有点突然，只要我不使用svg图标，问题不是都解决了吗？

iconfont难道不香吗？

此事说来话长，长话短说就是：设计只认svg

「纯展示」最快最简单的办法就是插件：vue-svg-icon、svg-sprite-loader、vue-svgicon

「改变svg颜色」最简单的插件就是：svg-sprite-loader + svgo + svgo-loader

「vue-svg-icon」可显示、修改iconfont导出的svg文件；无法显示sketch导出的svg实现

「svg-sprite-loader」能正常显示svg文件，修改颜色需要搭配svgo使用

「vue-svgicon」未做尝试

---

安装依赖

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

vue.config.js（vue-cli 3.0）增加webpack配置代码：

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}


module.exports = {
  chainWebpack: config => {
    // 清除svg默认配置对./src/icons文件夹的处理
    config.module
      .rule("svg")
      .exclude.add(resolve("src/assets/icons")) // icons存放地（svg放的地方）
      .end()
    
    // 添加新的rule处理./src/icons文件夹的svg文件
    config.module
      .rule("svg-sprite")
      .test(/.svg$/)
      .include
      .add(resolve("src/assets/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
        include: ["src/assets/icons"]
      })
      .end()
      .before("svg-sprite-loader")
      .use("svgo-loader")
      .loader("svgo-loader")
      .options({
        plugins: [
          {removeAttrs: {attrs: "path:fill"}}
        ]
      })
      .end()
  }
}

配置封装 svg 组件

• 在 components 创建组件 （/SvgIcon/index.vue）

<template>
  <svg v-else :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'
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
      }
    }
  }
}
</script

• 配置引入组件（icons 目录下建立 index.js 文件）

import Vue from "vue";
import SvgIcon from "@/components/SvgIcon"; // svg component

// register globally
Vue.component("svg-icon", SvgIcon);

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

引入 svg 配置文件（main 引入）

import "@/assets/icons";

使用

//在代码中使用
<svg-icon class="arrow_right" icon-class="rightArrow" />// 这里icon-class写的就是svg文件的名字

知其所以然

svg-sprite-loader

svgo：去除svg文件中的冗余信息

造成svg无法在页面中修改颜色的原因是，svg文件中path的属性fill设置了值，只有去除或为空才能正确使用color来设置颜色。

svg优势

• 支持多色图标了，不再受单色限制。
• 支持像字体那样通过font-size,color来调整样式。
• 支持 ie9+
• 可利用CSS实现动画。
• 减少HTTP请求。
• 矢量，缩放不失真
• 可以很精细的控制SVG图标的每一部分
• svg 是一个真正的矢量，不管你再怎么的放缩它都不会失真模糊
• 现在ui设计师平时都喜欢使用 sketch 来工作，只要轻松一键就能导出 svg 了，所以 svg 也更受设计师的青睐
• svg是一个文件，只要浏览器支持它就可以显示出来，icon-font使用@font-face可能碰到浏览器不支持某种字体

iconfont

优势

• 兼容性良好，支持ie8+
• 支持按字体的方式去动态调整图标大小，颜色等等

劣势

• 不支持多色图标
• 在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响
• 使用font-class一定要注意命名空间的问题