阿里icon圖標(biāo)gulp插件gulp-qc-iconfont

阿里icon圖標(biāo)gulp插件gulp-qc-iconfont，由吾愛大神自制分享的一個(gè)插件工具，可以將阿里icon圖標(biāo)導(dǎo)出并下載到本地，一鍵獲取需要的圖標(biāo)資源，本次帶來對(duì)應(yīng)的源碼工具下載，需要調(diào)試后使用，有相關(guān)阿里icon圖標(biāo)gulp插件使用需求的朋友們可以試試哦！

阿里icon圖標(biāo)gulp插件功能

gulp-qc-iconfont是一個(gè)gulp插件，可以輕松地幫你將阿里icon的圖標(biāo)項(xiàng)目下載至本地。

阿里icon圖標(biāo)gulp作者說明

目前前端使用字體圖標(biāo)的項(xiàng)目很多，最常用的是阿里圖標(biāo)，阿里圖標(biāo)可以勾選圖標(biāo)加入購物車，然后添加進(jìn)項(xiàng)目，項(xiàng)目可以分享給團(tuán)隊(duì)，為前端開發(fā)提供了不少便利。

我是一名UI設(shè)計(jì)兼前端開發(fā)，在開發(fā)上很多時(shí)候圖標(biāo)是一邊設(shè)計(jì)一邊開發(fā)的，因此圖標(biāo)增刪改比較頻繁，慶幸的是阿里為此提供了在線的css代碼，非常的人性化。但是在生產(chǎn)環(huán)境我又需要去下載字體圖標(biāo)的相關(guān)字體文件到本地，還需要重新用一個(gè)引用本地文件的css。再有就是當(dāng)圖標(biāo)結(jié)合vant使用時(shí)，我很希望我下載的圖標(biāo)能有一個(gè)顯著的前綴，來和默認(rèn)的vant圖標(biāo)區(qū)別開來，作為一個(gè)相當(dāng)懶的程序員，我真的覺得自動(dòng)化非常重要，于是乎，我就開始折騰了。我就想啊能不能有一個(gè)工具可以根據(jù)開發(fā)和生產(chǎn)環(huán)境自動(dòng)的生成我需要的css文件和相關(guān)字體文件，還能輕松的修改圖標(biāo)前綴。于是乎便有了gulp-qc-iconfont

阿里icon圖標(biāo)gulp插件安裝

將自動(dòng)獲取css源文件保存至指定位置，并將圖標(biāo)引用路徑自動(dòng)更改為fontPath本地路徑，如定義iconPrefix，則會(huì)自動(dòng)批量替換源文件的前綴.icon-為設(shè)定的前綴。

將自動(dòng)獲取字體圖標(biāo)需要的文件保存至指定位置下的fontPath路徑中

Gulpfile

gulpQcIconFont({

  url: '//at.alicdn.com/t/font_xxxxxxx_xxxxxx.css',

  isDev: false,

  iconPrefix: '.cu-icon-'

}).pipe(gulp.dest('./dist/'))

Output:

將在dist文件夾下輸出如下文件：

- dist

  - iconfont

    - iconfont.eot

    - iconfont.ttf

    - iconfont.svg

    - iconfont.woff

    - iconfont.woff2

  - iconfont.css

iconfont.css 生成結(jié)構(gòu)如下：

@font-face {font-family: "iconfont";

  src: url('./iconfont/iconfont.eot?t=xxx'); /* IE9 */

  src: url('./iconfont/iconfont.eot?t=xxx#iefix') format('embedded-opentype'), /* IE6-IE8 */

  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgA...') format('woff2'),

  url('./iconfont/iconfont.woff?t=xxx') format('woff'),

  url('./iconfont/iconfont.ttf?t=xxx') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

  url('./iconfont/iconfont.svg?t=xxx#iconfont') format('svg'); /* iOS 4.1- */

}

.cu-icon-waimai1:before {

  content: "\e6c3";

}