阿里icon圖標gulp插件gulp-qc-iconfont

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

阿里icon圖標gulp插件功能

gulp-qc-iconfont是一個gulp插件，可以輕松地幫你將阿里icon的圖標項目下載至本地。

阿里icon圖標gulp作者說明

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

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

阿里icon圖標gulp插件安裝

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

將自動獲取字體圖標需要的文件保存至指定位置下的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";

}