: :其他软件 2019-12-12 11:26:32
开发初衷
目前前端使用字体图标的项目很多,最常用的是阿里图标,阿里图标可以勾选图标加入购物车,然后添加进项目,项目可以分享给团队,为前端开发提供了不少便利。
我是一名UI设计兼前端开发,在开发上很多时候图标是一边设计一边开发的,因此图标增删改比较频繁,庆幸的是阿里为此提供了在线的css代码,非常的人性化。但是在生产环境我又需要去下载字体图标的相关字体文件到本地,还需要重新用一个引用本地文件的css。再有就是当图标结合vant使用时,我很希望我下载的图标能有一个显著的前缀,来和默认的vant图标区别开来,作为一个相当懒的程序员,我真的觉得自动化非常重要,于是乎,我就开始折腾了。我就想啊能不能有一个工具可以根据开发和生产环境自动的生成我需要的css文件和相关字体文件,还能轻松的修改图标前缀。于是乎便有了gulp-qc-iconfont
使用指南
安装: $ npm install gulp-qc-iconfont
使用非常简单啊,就像下面这样就可以了
接下来我对参数进行一个简单概括:var gulp = require('gulp');
var gulpQcIconFont = require('gulp-qc-iconfont');
gulp.task('default', () => {
gulpQcIconFont({
url: '//at.alicdn.com/t/font_xxxxxxx_xxxxxx.css',
isDev: true,
fontPath: './iconfont/iconfont',
iconPrefix: '.cu-icon-',
keepIconFontStyle: false,
fontExt: ['.eot', '.ttf', '.svg', '.woff', '.woff2']
}).pipe(gulp.dest('./dist/'))
});
总结/* 参数说明
* @param {String} url 必须,阿里我的图标项目中获取的css代码url
* @param {Boolean} isDev 可选,默认为 true ,是否开发环境
* @param {String} fontPath 可选,默认为 './iconfont/iconfont' ,字体图标保存路径,只有在 isDev 为false时有效
* @param {String} iconPrefix 可选,默认与源文件保持一致,字体图标统一前缀,如设置为'.cu-icon-',则图标调用为:<i class="cu-icon-XXX"></i>
* @param {Boolean} keepIconFontStyle 可选,保留css源文件中的 .iconfont{/*...*/} 样式,结合vant使用时就很需要,因为vant已经对字体进行了定义
* @param {Array} fontExt 可选,默认全部下载,需要下载的字体图标格式扩展名,如'[.svg' , '.woff' , '.ttf']等,只有在 isDev 为false时有效
*/
TAG: Web,阿里icon图标,gulp插件
10-12H5和WebGL 3D开发实战详解
10-04web服务器代码(Arduino)
10-03e2ee websocket刚学习例程
11-17web报表移动设备绑定与撤销的方法
10-08web中用opencv实现人脸检测
09-09前端开发Web前端工程师需要学多长时间
09-07APP和Web测试系统结构方面的区别
10-08本地电脑搭建成外网Web网站服务器