將 Sketch icons 轉成 web icon fonts

在之前轉web font icons 通常是使用Icomoon，他提供不錯的介面以及大量的icons供開發者使用，但有些時候Icomoon並不符合我們的需求，例如：

公司專案，不宜上傳到第三方空間
有版本控管需求時
設計師控制慾很強時(?

而萬能的Sketch及Gulp再合體之後，就有了Sketch to icon fonts 的功能，只要轉一次，同時提供了：

icon fonts 字型檔
寫好的css檔
還有HTML使用範本

對於前端以及設計師簡直接就是一大福音。

如何使用

寫得很清楚的開發文件：https://github.com/cognitom/symbols-for-sketch

在開始前，請先確認有以下環境：

Mac
正版的Sketch
Node.js
有gulp更好

Sketch 是這次主要來輸出icons的繪圖軟體，由於只能在Mac上運行，所以Mac也是必須的，本文最後會在介紹直接使用.svg轉icon fonts的方法；Node.js是用來運行gulp的環境，如果還沒安裝可以直接到官網下載https://nodejs.org/en/；Gulp是這次的主角，負責將sketch轉成icon fonts的工具，如果熟悉javascript的開發者將會很容易上手，當然不熟也沒關係，本文會用圖文說明以下的步驟。

安裝Node.js

如果你還沒安裝Node.js，就到官網找到下載點，目前的版本有4.2.2及5.1.0，不管你是哪個版本，與本次的實作影響都不大。

install node js

安裝完以後再打開 Terminal 輸入以下指令，只要有跳出版本號就算成功了(我的版本追不上時代啊～)。

$ node -v

如果還沒安裝gulp，可以順便安裝，指令如下：

$ npm install gulp -g
如果不行請加 `sudo` 在前方
$ sudo npm install gulp -g

在npm 前方加入sudo代表最高權限，通常只有在安裝全域(-g, -global)才有可能使用。

下載專案

接下來到https://github.com/cognitom/symbols-for-sketch把專案抓下來，如果熟悉git的開發者可以使用git指令將repo抓下來；另一種更潮的方式，就是直接選擇網站上下角的Download zip。

download repo

下載後請解壓縮它。

再次打開你的 Terminal，剩下簡單的三步驟就完成了

打開Terminal後，請到剛剛下載的資料夾，如果不熟可以參考以下這個指令(我常常把檔案丟桌面，所以以下指令是針對放在桌面上的)。

$ cd /Users/*****/Desktop/symbols-for-sketch-master

安裝node gulp 相依套件

這個步驟是要將gulp相依的套件從網路上抓下來，相依套件同時會放在這個資料夾(node_modules)。

$ npm install

安裝Sketch tool

這有兩個方法，其中一種是使用指令，但在測試時沒有成功，所以這邊是使用方法二。

方法一：直接輸入以下指令，我沒成功…

$ npm run installtool

方法二：先下載http://sketchtool.bohemiancoding.com/sketchtool-latest.zip，解壓縮後到該資料夾，輸入以下指令：

$ cd ~/Downloads/sketchtools/
$ sudo ./install.sh

將Sketch轉成icon fonts

最後，透過gulp指令結束這個回合吧！

$ gulp symbols

到剛剛的資料夾，資料夾內增加了dist以及編譯完成的字型檔、CSS以及範例的html。

範例的HTML可以看到成果。

將.svg 轉成icon fonts

以上的Sketch轉icons如果有成功，接下來的.svg轉icons也是相當容易，只要用相同的模組改幾行程式碼就可以運行。不過要注意的是這有可能編譯失敗(原因很多，包含svg的檔案也有可能造成編譯失敗)。

這邊是使用Google Material Design 所提供的 icon，直接放在剛剛的資料夾內即可。

接下來打開gulpfile.js，找到以下幾行替換成gulp.src(['./svg/*.svg']) (路徑可以自行決定)。

gulp.task('symbols', function(){
  //gulp.src('symbol-font-14px.sketch') // 將原本轉換sketch的改成轉svg
    //.pipe(sketch({
    //  export: 'artboards',
    //  formats: 'svg'
    //}))
  gulp.src(['./svg/*.svg'])
})

和先前的一樣，在 Terminal 輸入 $ gulp symbols 就可以了。

$ gulp symbols

完成～

在以前都是使用 Icomoon 的服務再轉 web fonts，最早的時候還忘記要登入，結果整份 web fonts資料都要重建，透過這樣的工具可以自己轉、自己做版控，除了CDN的問題外，倒是挺方便的。