前言
在开始本文之前,我们先做一个选择题:前端开发使用构建工具的目的是什么?
A、因为现在流行node.js,都在使用构建工具
B、让前端开发变得高大上,和后端一样编译才能运行
C、让自动化工具替代重复的手工操作,比如合并代码,刷新浏览器预览效果等。
选择A、B请直接关闭此文,选择C请继续阅读。
其实使用工具的目的就一个: 自动化一些重复操作,提升工作效率。ok,明确了这一点之后再来探究有哪些方式,可以把一堆小图标合并成一个图片文件并生成相应的样式。
按照生成文件和使用方式来看,可以大致分成3类处理方式:
png sprite
合成雪碧图是历史最悠久最成熟的解决方案,把不同的png小图标拼接成一张png图片。
手动操作
有的公司甚至让UI设计师来合并小图标(UI设计师成了自动化工具,囧~),这样做减少前端工作量的同时也带来一些问题。
- 沟通问题。如果只想简单地修改某个图标颜色,大小,都要与设计师沟通,一来一回增加时间成本。
- 样式问题。设计师提供的小图标不能直接用,要配合特定的样式(偏移值,大小)才行。
- 命名问题。即使有犀利的设计师提供了css文件,样式类的命名也难以符合前端开发规范和需求(真有这样的设计师欢迎私信推荐给我(●^◡^●))
所以这种处理方式不推荐也不在我们的讨论范围之列。
自动化工具
当我们拥有了自动化工具的时候,部分问题就可以对整个流程进行优化了。
- 根据psd切出小图标(前端必备,自己动手,丰衣足食),并把小图标放入源文件夹。
- 构建工具自动生成图片和css文件,并根据小图标名生成对应的样式名。
- 代码中引入样式和图片。
配置文件
以 npm 的 gulp.spritesmith 模块为例实现整个流程。
这是 gulpfile.js 中配置的任务:
var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); gulp.task('png', function () { gulp.src('./src/*.png') .pipe($.spritesmith({ imgName: 'icon.png', //参数,生成图片文件名 cssName: 'icon.css', //参数,生成的样式文件名 cssTemplate: './src/png_template.hbs' //参数,样式文件模板的路径,默认使用的是handlerbars模板 })) .pipe(gulp.dest('dist/png')); });
功能比较强大,除了css文件外还可以生成scss和less文件,同时也可以用模板文件对其进行格式化。这里我自定义了一个 png_template.hbs 文件,内容如下:
// 主要增加了一个通用样式,给图标赋予内联块级样式 .icon { display: inline-block; } {{#sprites}} .icon-{{name}} { background-image: url({{{escaped_image}}}); background-position: {{px.offset_x}} {{px.offset_y}}; width: {{px.width}}; height: {{px.height}}; } {{/sprites}}
开发流程
配置完成之后,在源文件夹中放入两个 question.png、hook.png 两个小图标进行调试。
gulp 处理后生成了两个文件:icon.css、icon.png。 打开 icon.css,可以看到根据图标名生成了两个样式类:
.icon { display: inline-block; } .icon-hook { background-image: url(icon.png); background-position: -40px 0px; width: 16px; height: 16px; } .icon-question { background-image: url(icon.png); background-position: 0px 0px; width: 40px; height: 40px; }
在代码中使用起来很简单
// 引用生成的css文件 <link rel="stylesheet" href="./png/icon.css" charset="utf-8"> ... //直接给标签添加样式类 <i class="icon icon-hook"></i> <i class="icon icon-question"></i>
预览效果见文末截图
问题
感谢技术的进步和人民生活水平的提高,这种高效的方式马上碰到一个“天敌”:高dpr的视网膜屏幕。
用响应式判断dpr的话,前面所有的工作量都要倍增,同时还要加载多余的样式。而且随着屏幕更新换代,dpr增多就要多做一张图片和样式,想想都太磨人 -_-||
那么是否有图片可以自适应不同dpr的屏幕?css3的曙光给我们指引了新的方向。
font-face
也称作字体图标,这种技术简单来说就是把矢量图合并生成字体文件,然后在css中引用对应的字体编码即可渲染成图片。因为字体是适应各种屏幕的,所以字体图标也继承了这个优点。
手动操作
目前有不少制作字体图标的网站,比较火的有icomoon、阿里巴巴图标库等。
基本操作都是在线上编辑图标,然后下载一个压缩包,包含字体文件和样式。首先的问题是不同图标大小需要手动调整 font-size 属性;其次就是手工操作太频繁:上传 - 编辑 - 下载;最后就是依赖网络环境,没网络就没法编辑图标。既然如此,我们尝试使用自动化工具离线生成文件。
自动化工具
依然使用的是github上star数比较多的模块 gulp-iconfont ,但是要同时生成css还需另一个模块 gulp-iconfont-css。
配置文件
配置 gulpfile.js
var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); gulp.task('iconfont', function () { // 先配置样式,再配置字体文件 return gulp.src(['src/*.svg']) .pipe($.iconfontCss({ fontName: 'iconfont', //字体名 path: './src/font_template.css', //模板文件路径 cssClass: 'iconfont' //样式类名 })) .pipe($.iconfont({ fontName: 'iconfont', //字体名 formats: ['ttf', 'eot', 'woff', 'woff2', 'svg'] //输出的字体文件格式 })) .pipe(gulp.dest('dist/font')); });
此处省略模板文件~
开发流程
配置完成之后,在源文件夹中放入两个 question.svg、hook.svg 两个小图标进行调试。
gulp 处理后生成了6个文件: _icon.css、iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff、iconfont.woff2。 打开 _icon.css,可以看到根据图标名生成了两个样式类:
@font-face { font-family: "iconfont"; src: url('./iconfont.eot'); src: url('./iconfont.eot?#iefix') format('eot'), url('./iconfont.woff2') format('woff2'), url('./iconfont.woff') format('woff'), url('./iconfont.ttf') format('truetype'), url('./iconfont.svg#iconfont') format('svg'); } .iconfont:before { font-family: "iconfont"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */ text-decoration: none; text-transform: none; } .iconfont-hook:before { content: "\E001"; } .iconfont-question:before { content: "\E002"; }
在代码中使用起来也很简单
// 引用生成的css文件 <link rel="stylesheet" href="./font/_icons.css" charset="utf-8"> ... //直接给标签添加样式类 <i class="iconfont iconfont-hook"></i> <i class="iconfont iconfont-question"></i>
预览效果见文末截图
使用问题
和之前的介绍的工具一样,可以使用模板,也可以生成scss、less、css多种格式文件。蛋疼的问题是:生成的所有的字体图标都会取最高的那个图标的高度。也就是说一些图标需要重新设置高度! 自动化操作瞬间降级为半自动化~而且生成的图片还带锯齿(不知道是不是配置问题),所以只能算是失败的方案。
svg sprite
正当愁眉不展之时,看到张鑫旭一篇文章《未来必热:SVG Sprite技术介绍》
(末尾的结束语将字体图标和svg sprite做了对比,有兴趣的朋友可以看一下)才让我感觉柳暗花明:原来还有更强大的svg sprite。将svg矢量图标整合成一个svg文件,使用的时候以 symbol 或 use 等标签的形式展现。
手动操作
考虑这个方案之时就没打算用手动化,因为如果需要手动操作还不如使用字体图标,所以直接考虑自动化工具。
自动化工具
使用的是github上star数仅次于gulp-svgstrore的模块 gulp-svg-sprite 。支持scss、less、css文件格式输出。
配置文件
var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); gulp.task('svg', function () { return gulp.src('./src/*.svg') .pipe($.svgSprite({ mode: { symbol: { prefix: `.svg-`, dimensions: '%s', sprite: '../icon.svg', symbol: true, render: { css: { dest: '../icon.css' } } } } })) .pipe(gulp.dest('dist/svg')); });
开发流程
整个流程同上,配置完成之后,在源文件夹中放入两个 question.svg、hook.svg 两个小图标进行调试。
gulp 处理后生成了2个文件: icon.svg、icon.css。 打开 icon.css,可以看到根据图标名生成了两个样式类:
.svg-hook { width: 16px; height: 16px; } .svg-question { width: 40px; height: 40px; }
非常简洁有么有!!!
使用起来稍稍复杂一点:
//引用样式文件 <link rel="stylesheet" href="./svg/icon.css" charset="utf-8"> ... <svg class="svg-hook"> <use xlink:href="./svg/icon.svg#hook"></use> </svg> <svg class="svg-question"> <use xlink:href="./svg/icon.svg#question"></use> </svg>
预览效果见文末截图
相比字体图标:
- 据说SVG图标跟字体图标相比,还支持渐变,甚至彩色图标。
- 改变大小直接调整width和height属性即可,而不是调整font-size那种“曲线救国”的方式。
- 填充颜色也很简单,设置fill属性的值即可(前提是svg中不能使用fill,如果svg自带fill属性,设置失效)。
使用问题
所有的IE浏览器(包括IE11)还不支持获得外链SVG文件某个元件。但是也很好解决,使用第三方js即可——svg4everybody。
总结
文中所示代码地址:https://github.com/yalishizhude/sprite-demo 或者可以本地下载
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
前端,小图标,自动化工具
更新动态
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]