vue-cli3使用svg的最佳实践

目录

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

封装svg组件

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

//components/Icon-svg

使用svg组件

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

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

//在代码中使用

svg雪碧图

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

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

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

   
   
   

自动导入所有图标

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

1. 自动导入所有图标
   首先我们创建一个专门放置图标 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了。

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

   
   
   
   
   

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

   
   
   

参考文章：

• 手摸手，带你优雅的使用 icon
• 懒人神器：svg-sprite-loader实现自己的Icon组件
• vue-cli3.0配置详解
• Vue Cli 3.0 svg-sprite-loader 配置整理
• 详解如何配置vue-cli3.0的vue.config.js
• webpack-chain配置文档
• vue-cli3中webpack 相关配置