Nicon-支持私有部署的開源字體圖標管理平臺！

Nicon

一言不合，先上平臺Nicon。該平臺接入github登陸，採用七牛CDN存儲，歡迎你們試用。

Nicon 是一個集圖標上傳、展現、使用於一身的字體圖標管理平臺，流程簡單，符合平常開發使用習慣，適合企業在內部部署使用。採用 Iconfont 字體圖標替換項目中圖片圖標的使用，以達到縮減體積、風格統1、提升開發效率等目的。若配合設計師使用，設計師可在平臺上管理圖標，複用圖標，減小設計圖標耗費的時間，而開發只負責使用設計師維護好的圖標庫，減小了與設計師的交流成本。

優點

與其餘字體圖標管理平臺相比，它擁有如下優點：

• 使用流程簡單，符合平常開發使用習慣，無需在審覈管理流程中耗費時間
• 適合企業內部設計師與開發協同使用，保持圖標的設計、管理、使用的連貫性
• 部署簡單，平臺自帶註冊、登陸功能，還有靜態資源路由，只需數據庫配置就可部署使用
• 支持接入三方登陸、資源上傳到三方CDN服務器。使用更安全，資源更穩定
• 支持導出資源多樣化，符合多種使用場合，更有配套的導出工具nicon-tookit, 方便快捷

使用流程圖

協做使用最優解

目前圖標從設計到使用的完整流程是基本是: 設計完成->視覺使用->導出給開發->開發處理、使用。顯然，圖標是設計與開發共同使用的，雖然流程上看着很簡單，可是使用頻率高了以後小問題也會消耗不少的時間，現現在圖標的製做與使用方式都有不少高效率的工具，但都只是單方面的。

對於設計來講，製做圖標的工具衆多且功能強大，而且設計出來的圖標也會直接在這些工具上使用，而圖標是複用程度比較高的，因此有效的管理圖標能夠避免後續花時間重複設計。對於開發來講，圖標的使用方式也就那麼兩三種，只須要有個工具能把圖標處理完導出所需類型的資源加入到代碼就行，其實不太想去管圖標的前因後果。

基於以上需求，有必要作出一個能夠知足設計與開發共同協做的字體圖標管理平臺，流程圖以下：

在以上的流程中，設計師可使用平臺管理圖標方便後續複用，並且不須要在跟開發溝通中耗費時間。 對於開發，並不須要管理圖標以及圖標的處理方式，只須要適時從平臺上更新設計師管理好的圖標庫生成的資源就行。

功能介紹

該平臺的UI是參照iconfont平臺實現的，且iconfont平臺的圖標能夠無縫遷移到該平臺上。因爲我的能力有限，作出的其實就是iconfont的簡單版，是一個純粹的圖標管理平臺，更適合企業部署在內部使用

一、建立一個圖標庫

二、上傳圖標。此階段爲圖標草稿階段，可進行刪除、名稱修改，最好確保圖標名稱惟一,點擊保存上傳以後，才能夠加入圖標庫，若是不保存或者刪除，則一直存留爲草稿。

三、把圖標加入到圖標庫，會自動保存更新生成新的字體圖標庫資源。進入到指定圖標庫後，點擊添加圖標並選定須要添加的圖標，確認以後會生成新的圖標文件，完成

四、對不滿意的或不合格的圖標庫能夠從圖標庫中刪除

五、能夠收藏別人的圖標到本身 上傳圖標 列表中，而後保存成爲本身的圖標

前端使用方式

圖標管理平臺提供了三種圖標使用方式， font class、svg files、svg sprite三種方式，可導出的資源類型包括css資源文件連接， css資源文件內容，svg文件內容，svg sprite 文件內容，各個工程能夠根據本身的使用方式使用腳本導出合適的資源類型。

可使用配套的工具nicon-toolkit來從平臺上獲取資源，簡單方便、配置靈活。

一、font-class引用

• 配置腳本的資源配置type爲cssUrl(外鏈)或者cssContent(內聯)，運行腳本獲取資源文件
• 挑選相應圖標並獲取字體編碼，應用於頁面<i class="圖標前綴-圖標名稱"><i/>

二、svg文件使用

• 配置腳本的資源配置type爲svg，運行腳本獲取svg文件到指定目錄
• 通過二次處理或直接使用、好比base64或其餘方式

三、svg sprite使用方式

• 配置腳本的資源配置type爲svgSprite，運行腳本獲取svgSprite 內聯到html文件中
• 挑選相應圖標並獲取類名，應用於頁面

<svg class="icon" aria-hidden="true">
   <use xlink:href="#圖標前綴-圖標名稱"></use>
</svg>

這樣使用的方式稍微麻煩，建議封裝成組件傳id就好，好比 <icon id="圖標前綴-圖標名稱"></icon>

安裝部署

Nicon平臺是一個先後端徹底分離的項目，先後端均可以單獨啓動進行開發聯調。前端採用Vue生態相關技術，後端使用koa框架，結構及流程都比較簡單。根據需求及本身開發習慣進行架構設計，有興趣的能夠看看。Nicon 平臺所有的代碼都已經開源，而且我的會長期維護，有興趣的歡迎加入一塊兒維護。

服務安裝部署

系統要求

• linux/unix/windows

環境要求

• nodejs 7.0+
• npm 3.10.8+
• mogondb 3.2+
• redis 3.2+

在啓動工程以前，必須確保數據庫已經啓動，且已經把相應的數據庫建立好。

一、 克隆項目到本地|服務器

git clone git@github.com:bolin-L/nicon.git

二、 進入到項目工程nicon安裝依賴

cd nicon && npm install

三、配置數據庫信息與其餘環境變量

在nicon同級文件夾(or 任何地方，可是若是放在nicon文件夾中，名稱必須爲start.sh 或 start.bat, 會被ignore掉，更新不會被覆蓋)建立一個啓動腳本start.sh, 用於配置數據庫及其餘的環境變量配置，可參考examle

四、進入到nicon文件夾，執行啓動腳本命令

sh yourStartConfigPath/start.sh

若是不出什麼意外，這個時候應該已經啓動好了。服務監聽的端口是4843, 固然這只是個純服務，具體的頁面還須要部署前端工程nicon-front。

前端靜態資源部署

圖標管理平臺採用的是先後端徹底分離的開發方式，前端代碼放在獨立的icon-front。前端只須要提供完整的靜態html頁面與其餘靜態資源便可。靜態資源的訪問經過配置nginx代理實現頁面的訪問，跟服務端工程毫無關係，服務端只負責提供異步接口。

一、克隆前端項目到本地, 與nicon文件夾同級

git clone git@github.com:bolin-L/nicon-front.git

二、進入到nicon-front工程，安裝依賴

cd nicon-front && npm install

三、運行打包命令、打包輸出到nicon-front/dist文件夾下

npm run build

如今服務已經啓動，靜態資源已經輸出，接下來須要配置nginx讓請求能夠訪問到靜態資源，異步接口能夠訪問到服務。

Nginx配置

爲了在瀏覽器中訪問到頁面，須要配置Nginx代理，把對應的請求轉發到對應的服務。該平臺的請求分兩種，一種是訪問前端靜態頁面與資源，另外一種是訪問後端服務的異步接口
，請求都有必定的規則，大概配置以下：

# 靜態資源請求
    location / {
        root /home/liaobolin/app/nicon-front/dist;
        index index.html index.htm;
    }
    
    location ^~ /static {
        root /home/liaobolin/app/nicon-front/dist;
    }
    # 配置異步接口請求到服務器
    location /api {
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   Host      $http_host;
        proxy_pass http://127.0.0.1:4843;
    }

配置到此，平臺基本就能夠運行起來使用了，瀏覽器經過域名就能夠訪問到首頁

三方服務接入

雖然該平臺已經能夠提供完成的登陸、註冊，圖標庫樣式文件等靜態資源的訪問。可是對於企業來講，內部的工具平臺最好只接受內部人或只能內網訪問，對於靜態資源最理想的就是放到自家的cdn服務器上，讓平臺操做更安全，訪問所速度更快等等...

基於這樣的需求，Nicon支持接入三方登陸與字體文件資源上傳到三方服務器，登陸或上傳須要的密鑰等須要經過環境變量設置，好比放在start.sh文件中，登陸、上傳等接入代碼須要本身按照規範開發完成提PR，檢查完畢後合併到工程master分支中。目前代碼中支持一下三方服務：

三方登陸

• 網易openId登陸
• github受權登陸

三方上傳

• 網易NOS服務
• 七牛雲存儲服務

三方服務接入文件夾結構以下

├── service
│   ├── login
│   │   ├── github_qiniu
│   │   │   ├── config.js
│   │   │   └── index.js
|   |   |-- ....... 
│   │   ├── index.js   
│   └── upload
│       ├── github_qiniu
│       │   ├── config.js
│       │   └── index.js
|   |   |-- ....... 
│       ├── index.js

三方登陸、上傳服務接入步驟

一、在接入三方服務以前，必須先配置產品類型環境變量 productType。加入到start.sh文件中

export productType='github_qiniu';

好比我須要接入github三方登陸與qiniu上傳存儲服務，那麼個人productType就設置爲github_qiniu。 那麼在開發接入服務時文件夾名稱必須爲 github_qiniu。

二、 在service/login/ 文件夾下建立文件夾 github_qiniu, 而後在該文件夾下建立config.js , 與index.js, 在index.js文件中必須暴露出async login方法, 調用方法後須要返回指定格式的數據

// index.js

class GithubOpenIdLogin {
    async login (ctx) {
        // your code
        return {
            userName: tokenInfo.userName // 必須且惟一
        }
    }
}

let loginIns = new GithubOpenIdLogin();
module.exports = loginIns.login.bind(loginIns);

三、在service/upload/ 文件夾下建立文件夾 github_qiniu, 而後在該文件夾下建立config.js , 與index.js, 在index.js文件中必須暴露出async upload方法, 調用方法後須要返回指定格式的數據

// index.js

class QiniuUpload {
    async upload (dirPath) {
        // your code
        // 上傳返回數據格式
        return {
            url: cssUrl, // 必須
            cssContent: cssContent // 必須
        };
    }
}

let uploadIns = new QiniuUpload();
module.exports = uploadIns.upload.bind(uploadIns);

至此就已經配置完畢，啓動工程就行了。Nicon平臺的詳細部署流程已經寫在nicon工程中，若是須要請前往瞭解更詳細的部署流程。

後記

Nicon平臺是我本身在業餘時間作的項目，能力有限，UI方面基本是參考iconfont，技術方面也是慢慢摸索，實屬不易，在使用過程當中有任何建議或意見，歡迎指教。歡迎你們來一波star，github地址以下：

• nicon 平臺nodejs後端服務
• nicon-front 平臺前端工程

在開發過程當中，我仿照NEJ的cache使用方式基於axios封裝了axios-cache 模塊，在axios的基礎上進行一些加強，更適合平常的組織與使用方式，有興趣的話能夠試試，固然，也歡迎star。

• axios-cache 集中管理異步接口配置的模塊