2、svg文件使用

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

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

3、svg sprite使用方式

配置腳本的資源配置type為svgSprite，運行腳本獲取svgSprite 內聯到html文件中

挑選相應圖標并獲取類名，應用于頁面

這樣使用的方式稍微麻煩，建議封裝成組件傳id就好，比如

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代理，把對應的請求轉發到對應的服務。該平臺的請求分兩種，一種是訪問前端靜態頁面與資源，另一種是訪問后端服務的異步接口
，請求都有一定的規則，大概配置如下：

    # 靜態資源請求
    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.js

class 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.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 集中管理異步接口配置的模塊