转 webpack 插件 svg-sprite-loader
最近开始看 Vue 了,首先用官方的模版把项目快速搭建起来:
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
现在的项目 webpack 几乎是标配了,各种插件好用到爆。现在我们要接触的是一个叫 svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol
标签并插入 html,接下来就可以在模版中方便地使用 svg-sprite 技术了。
使用 svg-sprite 的好处
如果不知道 svg-sprite 是什么,可以参考大神张鑫旭的文章:未来必热:SVG Sprite技术介绍
- 页面代码清爽
- 可使用 ID 随处重复调用
- 每个 SVG 图标都可以更改大小颜色
安装插件
1
|
npm install svg-sprite-loader --save-dev
|
webpack 配置
装好插件之后,配置 webpack,加入处理 svg 的 loader:
1
2
3
4
5
6
7
|
{
test: /\.svg$/,
loader: 'svg-sprite?' + JSON.stringify({
name: '[name]',
prefixize: true,
}),
}
|
这时候发现还是不行啊,body
中并没有看到 symbol
标签。
细看发现,还有一个loader 中也处理了 svg 文件:
那么就把那个 svg 去掉吧,不然下面的 svg-sprite-loader 无法起效… OK,又报错了:
由于我用了 element.js 作为 UI 框架,它的包里有个 svg 文件需要刚才的 loader 处理,我们把所有的 svg 文件都交由 svg-sprite-loader 处理了,所以这里报了错。
也就是说只有我们自己引入的 svg 文件需要经过 svg-sprite-loader,那么就将这些 svg 统一放到一个目录下,我这里放到了 src/assets/svg/ ,再修改 loader 配置。
上面 loader 匹配正则中的 svg 不用去掉了,给它加上 exclude
,不去处理 src/assets/svg/ 路径下的 svg 文件:
1
2
3
4
5
6
7
8
9
10
11
|
{
test: /\.(png|jpe?g|gif)(\?.*)?$/,
exclude: [
path.resolve(__dirname, '../src/assets'),
],
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]'),
}
}
|
下面 svg-sprite-loader 的配置中加上 include
,只处理 src/assets/svg/ 路径下的 svg 文件:
1
2
3
4
5
6
7
8
9
10
|
{
test: /\.svg$/,
include: [
path.resolve(__dirname, '../src/assets'),
],
loader: 'svg-sprite?' + JSON.stringify({
name: '[name]',
prefixize: true,
}),
}
|
重新启动项目,终于在 html 中看到了 symbol
标签!
如何使用
配置好了,就可以用了。使用方法很简单,相较于原来插入 svg 图标的方法(img src 或将 svg 整个写入 html),用 svg-sprite 更加简单且清爽:
1
|
import './assets/svg/target.svg';
|
1
|
<svg><use xlink:href="#target" /></svg>
|
嗯,就这样短短一行。xlink:href
中传入 svg ID 就好了,由于在上面的配置文件中我们直接使用文件名作为 symbol
的 ID,所以这里传入的 ID 即为你想显示的图标的 svg 文件名,记得加上 #
。
自动导入
你会发现,这里要想插入某个图标,都得 import
,每用一个都要重复一遍这个流程,太麻烦,那么我们就让 src/assets/svg/ 下的 svg 文件都自动导入吧。
webpack 可以帮我们做到:
1
2
3
4
5
6
|
// requires and returns all modules that match
const requireAll = requireContext =>requireContext.keys().map(requireContext);
// import all svg
const req = require.context('./assets/svg', true, /\.svg$/);
requireAll(req);
|
关于 require.context
的详细用法,可以参考 webpack 文档:dynamic requires
这样一来,每当我们修改或增加新的 svg,只要将文件往这个目录下一扔,插件就会自动帮我们生成相应的 symbol
标签啦,接下来就只管用吧~♪(´ε` )
文章转自:https://cisy.me/webpack-svg-sprite/
转 webpack 插件 svg-sprite-loader的更多相关文章
- 在vue中使用svg sprite
概述 这几天研究了一下在vue中使用svg sprite,有些心得,记录下来,供以后开发时参考,相信对其它人也有用. 在vue中导入svg 在vue中导入svg的方法有很多种,比如在img标签的src ...
- 【vue】webpack插件svg-sprite-loader---实现自己的icon组件
引言:最近开始写vue的项目,借鉴了一下vue-element-admin源码,针对vue有一个关于icon图标的处理,最近也找了很多关于vue的icon处理的解决方案,大部分都是按照之前小程序的方式 ...
- webpack学习记录-认识loader(二)
Loader 就像是一个翻译员,能把源文件经过转化后输出新的结果,并且一个文件还可以链式的经过多个翻译员翻译. loader参考文章:https://webpack.docschina.org/loa ...
- webpack 插件拾趣 (1) —— webpack-dev-server
结束了一季的忙碌,我这封笔已久的博客也终究该从春困的咒印中复苏,想来写些实用易读的作为开篇,自然是最好不过. 新开个 webpack 插件/工具介绍的文章系列,约莫每周更新一篇篇幅适中的文章聊以共勉, ...
- 编写webpack 插件
Webpack插件为第三方开发者释放了Webpack的最大可能性.利用多级回调开发者可以把他们自己的需要的功能引入到Webpack里面来.Build插件比Build loader 更进一步.因为你需要 ...
- 从0开始编写webpack插件
1. 前言 插件(plugins)是webpack中的一等功臣.正是由于有了诸多插件的存在,才使得webpack无所不能.在webpack源码中也是使用了大量的内部插件,插件要是用的好,可以让你的工作 ...
- 【Web】阿里icon图标webpack插件(webpack-qc-iconfont-plugin)详解
webpack-qc-iconfont-plugin webpack-qc-iconfont-plugin是一个webpack插件,可以轻松地帮你将阿里icon的图标项目下载至本地 开发初衷 之前已经 ...
- 80行代码教你写一个Webpack插件并发布到npm
1. 前言 最近在学习 Webpack 相关的原理,以前只知道 Webpack 的配置方法,但并不知道其内部流程,经过一轮的学习,感觉获益良多,为了巩固学习的内容,我决定尝试自己动手写一个插件. 这个 ...
- SVG Sprite 入门(SVG图标解决方案)
关于浏览器图标解决方案,一直就有很多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优点,很多团队都已经在使用了.这篇文章主要说明 ...
随机推荐
- 数据结构与算法之二叉树 ——in dart
用dart语言实现的二叉树,实现了插入.查找.删除,中序遍历.前序.后序遍历等功能. class BinaryTree<E extends Comparable> { Node<E& ...
- Docker vs Warden
相同点: 都是依赖宿主操作系统内核的轻量级容器: 都采用了linux内核技术实现容器隔离(namespace)和资源限制(cgroup): 都使用了aufs文件系统: 不同点: 用途 warden是C ...
- Bluebox Security最新提报Android漏洞的初步探讨(转)
Bluebox Security在7月3号的时候,在官网上发布了一个据称99% Android机器都有的一个漏洞.国内最早在4号开始有媒体报道,并持续升温.该漏洞可使攻击者在不更改Android应用 ...
- REST API 开发
本文我们将使用Spring MVC 4实现 CRUD Restful WebService , 通过RestTemplate写一个 REST 客户端,定义这些服务. 我们也可以通过外部的一些客户端来测 ...
- Wannafly挑战赛18B 随机数
Wannafly挑战赛18B 随机数 设\(f_i\)表示生成\(i\)个数有奇数个1的概率. 那么显而易见的递推式:\(f_i=p(1-f_{i-1})+(1-p)f_{i-1}=(1-2p)f_{ ...
- android 动态控制状态栏显示和隐藏
方法一:(经试验无效,但网上广为流传,也许是我使用方法不当,有待进一步验证……) android想要应用运行时全屏有一种方法是在activity的onCreat方法中加入如下代码: getWindow ...
- Distributed3:SQL Server 分布式数据库性能测试
我在三台安装SQL Server 2012的服务器上搭建分布式数据库,把产品环境中一年近1.4亿条数据大致均匀地存储在这三台服务器中,每台Server 存储4个月的数据,物理机的系统配置基本相同:内存 ...
- 菜鸟vimer成长记——第2.1章、normal模式
目的 掌握normal模式下常用操作的语法和概念,这些操作对应的应用场景以及实用技巧. 通过normal模式举一反三掌握cmd-line和visual的常用文本操作. 简介 文本操作的理想状态为:一个 ...
- axios的简单使用
axios是一个通用的ajax请求库,vue 2.0以后,推荐使用axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 使用: 1.下载安装 n ...
- YouTube视频下载方法汇总
YouTube是一个视频共享网站,YouTuber们自己拍摄并制作视频,上传到YouTube,然后用户观看.分享并评论这些内容.虽然在线观看很方便,但是有些时候你却只能处于离线的状态,比如出差.旅游. ...