vue-cli3使用svg的最佳实践

目录

iconfont的三种使用方式及其优缺点
封装svg组件
svg雪碧图
自动导入svg图标

封装svg组件

代码都是基于 vue 的实例(ps: react 也很简单，原理都是类似的)

//components/Icon-svg
<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'icon-svg',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    }
  }
}
</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

使用svg组件

//引入svg组件
import IconSvg from '@/components/IconSvg'

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

//在代码中使用
<icon-svg icon-class="password" />

svg雪碧图

通过这篇文章 iconfont的三种使用方式及其优缺点，我们已经能在项目中使用svg图标了，但是有一个麻烦是，eg：我们会在iconfont上面创建一个项目，然后把需要的图标添加到项目里，接下来再生成文件，然后把文件保存下来。然而当我再去添加几个图标的时候，上面的动作我们需要重来一遍，这个太麻烦了，所以我们会用到svg-sprite(svg雪碧图,跟以前的css-sprite类似)。具体操作如下：

在vue项目中配置svg-sprite-loader
请参考文章vue-cli3中新添加svg-sprite-loader和file-loader
使用svg
配置好以后，我们把svg文件都放到根目录的icons下面，使用的时候，需要那个就加载那个，举例：(这里的svg-icon是我们上面封装的svg组件)

<template>
  <div id="app">
    <svg-icon iconClass="me"></svg-icon>
  </div>
</template>

<script>
import '@/icons/svg/me.svg'
export default {
  
}
</script>

我们在项目中使用了很多svg图标，svg-sprite-loader能帮我们把这些图标合成一张大的雪碧图，就像这样

自动导入所有图标

经过上面的一波操作，我们实现了按需加载，如果我们要添加图标，直接往icons里放就好了，这个svg的图标可以是你们ui制作的，也可以是从iconfont图标库download下来的。不过，这里还有两个地方可以再优化一下。

自动导入所有图标
首先我们创建一个专门放置图标 icon 的文件夹如：@/src/icons，将所有 icon 放在这个文件夹下。之后我们就要使用到 webpack 的 require.context。很多人对于 require.context可能比较陌生，直白的解释就是

require.context("./test", false, /.test.js$/);
这行代码就会去 test 文件夹（不包含子目录）下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。
更直白的说就是 我们可以通过正则匹配引入相应的文件模块。

require.context有三个参数：

directory：说明需要检索的目录
useSubdirectories：是否检索子目录
regExp: 匹配文件的正则表达式
了解这些之后，我们就可以这样写来自动引入 @/src/icons 下面所有的图标了

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

复制代码之后我们增删改图标直接直接文件夹下对应的图标就好了，什么都不用管，就会自动生成 svg symbol了。

批量下载单个svg文件
我们上面的操作，在icons里面，一个svg文件就是一个图标，而阿里图标库下载下来的文件是把所有的图标都合在一个文件里面，这显然不符合我们的要求，但是一个一个去下载也觉得麻烦，这时可以这样操作

点击批量操作，选择要添加的图标，点击批量加入到购物车，去购物车页面，点击下载素材，出现以下页面，点击svg即可

参考文章：

最后编辑于：2019.01.29 07:27:47