图文实操详解前端处理小图标的那些解决方案
|
// 引用生成的css文件 <link rel="stylesheet" href=http://www.jb51.net/web/"./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=http://www.jb51.net/web/"./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 或者可以本地下载
（编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
