Nicon-支持私有部署的开源字体图标管理平台！

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 集中管理异步接口配置的模块