Vue 中 SVG 学习

W3C SVG教程：http://www.w3school.com.cn/svg/index.asp
W3C XLink教程：http://www.w3school.com.cn/xlink/index.asp
SVG手册：http://know.webhek.com/svg/svg-home.html

 

1. 如何在vue项目中使用iconfont：https://www.jianshu.com/p/0cf10d836991

 

2. webpack 插件 svg-sprite-loader 详解：https://cisy.me/webpack-svg-sprite/

svg-sprite-loader 用来根据导入的 svg 文件自动生成 symbol 标签

但是，自动导入的一段代码让我很费解：

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

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

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

我又参考了另一篇文章：

3. 带你优雅的使用 icon： http://www.mamicode.com/info-detail-2111873.html

这篇文章讲述了 svg 的演进史，对于使用 svg-sprite-loader 的起因、经过，思路更加清晰，其中有几点可以注意一下：

使用 iconfont 的 js 的缺点：不直观，不能按需加载，自定义性差，添加不友善

svg-sprite-loader 可以将多个 svg 打包成 svg-sprite，即生成多个 symbol

svg-sprite-loader 只会获取 svg 中path 的内容，其他信息一概不取 

 

到此为止，我对 Vue 中使用 svg 已经很清楚了，但是唯独对自动导入这段代码，还是费解，直到我看到这篇文章：

4. vue 之 require.context：https://blog.csdn.net/viewyu12345/article/details/83012970

摘出一些重点：

require.context上下文导出（返回）一个（require）函数，该函数接受一个参数 req

真相大白：

webpackContext.keys() 返回所有上下文的请求，通过遍历每个请求（req），webpackContext 接受参数 req，调用webpackContextResolve 解析得到模块 id，最后通过 __webpack_require__ 导入

__webpack_require__ 这个函数，它的功能是根据传入的模块 id，返回模块 export 的内容

 

占坑

webpack：https://webpack.docschina.org/guides/dependency-management/

拓展、延伸：https://juejin.im/post/5ab8bcdb6fb9a028b77acdbd