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

04-21

Nicon

一言不合，先上平台Nicon。該平台接入github登錄，採用七牛CDN存儲，歡迎大家試用。

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

優勢

與其他字體圖標管理平台相比，它擁有以下優勢：

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

使用流程圖

協作使用最優解

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

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

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

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

功能介紹

該平台的UI是參照iconfont平台實現的，且iconfont平台的圖標可以無縫遷移到該平台上。由於個人能力有限，做出的其實就是iconfont的簡單版，是一個純粹的圖標管理平台，更適合企業部署在內部使用

1、創建一個圖標庫

2、上傳圖標。此階段為圖標草稿階段，可進行刪除、名稱修改，最好確保圖標名稱唯一,點擊保存上傳之後，才可以加入圖標庫，如果不保存或者刪除，則一直存留為草稿。

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

4、對不滿意的或不合格的圖標庫可以從圖標庫中刪除

5、可以收藏別人的圖標到自己 上傳圖標 列表中，然後保存成為自己的圖標

前端使用方式

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

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

1、font-class引用

- 配置腳本的資源配置type為cssUrl(外鏈)或者cssContent(內聯)，運行腳本獲取資源文件

- 挑選相應圖標並獲取字體編碼，應用於頁面<i class="圖標前綴-圖標名稱"><i/>

2、svg文件使用

- 配置腳本的資源配置type為svg，運行腳本獲取svg文件到指定目錄

- 經過二次處理或直接使用、比如base64或其他方式

3、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+

在啟動工程之前，必須確保資料庫已經啟動，且已經把相應的資料庫創建好。

1、克隆項目到本地|伺服器

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

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

cd nicon && npm install

3、配置資料庫信息與其他環境變數

在nicon同級文件夾(or 任何地方，但是如果放在nicon文件夾中，名稱必須為start.sh 或 start.bat, 會被ignore掉，更新不會被覆蓋)創建一個啟動腳本start.sh, 用於配置資料庫及其他的環境變數配置，可參考examle

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

sh yourStartConfigPath/start.sh

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

前端靜態資源部署

圖標管理平台採用的是前後端完全分離的開發方式，前端代碼放在獨立的icon-front。前端只需要提供完整的靜態html頁面與其他靜態資源即可。靜態資源的訪問通過配置nginx代理實現頁面的訪問，跟服務端工程毫無關係，服務端只負責提供非同步介面。

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

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

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

cd nicon-front && npm install

3、運行打包命令、打包輸出到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

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

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

export productType=github_qiniu;

比如我需要接入github三方登錄與qiniu上傳存儲服務，那麼我的productType就設置為github_qiniu。那麼在開發接入服務時文件夾名稱必須為 github_qiniu。

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

// index.jsclass GithubOpenIdLogin { async login (ctx) { // your code return { userName: tokenInfo.userName // 必須且唯一 } }}let loginIns = new GithubOpenIdLogin();module.exports = loginIns.login.bind(loginIns);

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

// index.jsclass 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 集中管理非同步介面配置的模塊