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

时间 2019-11-08

标签 nicon 支持私有部署开源字体图标管理平台繁體版

原文原文链接

Nicon

一言不合，先上平台Nicon。该平台接入github登陆，采用七牛CDN存储，欢迎你们试用。css

Nicon 是一个集图标上传、展现、使用于一身的字体图标管理平台，流程简单，符合平常开发使用习惯，适合企业在内部部署使用。采用 Iconfont 字体图标替换项目中图片图标的使用，以达到缩减体积、风格统1、提升开发效率等目的。若配合设计师使用，设计师可在平台上管理图标，复用图标，减小设计图标耗费的时间，而开发只负责使用设计师维护好的图标库，减小了与设计师的交流成本。html

优点

与其余字体图标管理平台相比，它拥有如下优点：前端

使用流程简单，符合平常开发使用习惯，无需在审核管理流程中耗费时间
适合企业内部设计师与开发协同使用，保持图标的设计、管理、使用的连贯性
部署简单，平台自带注册、登陆功能，还有静态资源路由，只需数据库配置就可部署使用
支持接入三方登陆、资源上传到三方CDN服务器。使用更安全，资源更稳定
支持导出资源多样化，符合多种使用场合，更有配套的导出工具nicon-tookit, 方便快捷

使用流程图

协做使用最优解

目前图标从设计到使用的完整流程是基本是: 设计完成->视觉使用->导出给开发->开发处理、使用。显然，图标是设计与开发共同使用的，虽然流程上看着很简单，可是使用频率高了以后小问题也会消耗不少的时间，现现在图标的制做与使用方式都有不少高效率的工具，但都只是单方面的。node

对于设计来讲，制做图标的工具众多且功能强大，而且设计出来的图标也会直接在这些工具上使用，而图标是复用程度比较高的，因此有效的管理图标能够避免后续花时间重复设计。对于开发来讲，图标的使用方式也就那么两三种，只须要有个工具能把图标处理完导出所需类型的资源加入到代码就行，其实不太想去管图标的前因后果。linux

基于以上需求，有必要作出一个能够知足设计与开发共同协做的字体图标管理平台，流程图以下：ios

在以上的流程中，设计师可使用平台管理图标方便后续复用，并且不须要在跟开发沟通中耗费时间。对于开发，并不须要管理图标以及图标的处理方式，只须要适时从平台上更新设计师管理好的图标库生成的资源就行。nginx

功能介绍

该平台的UI是参照iconfont平台实现的，且iconfont平台的图标能够无缝迁移到该平台上。因为我的能力有限，作出的其实就是iconfont的简单版，是一个纯粹的图标管理平台，更适合企业部署在内部使用git

一、建立一个图标库github

二、上传图标。此阶段为图标草稿阶段，可进行删除、名称修改，最好确保图标名称惟一,点击保存上传以后，才能够加入图标库，若是不保存或者删除，则一直存留为草稿。redis

三、把图标加入到图标库，会自动保存更新生成新的字体图标库资源。进入到指定图标库后，点击添加图标并选定须要添加的图标，确认以后会生成新的图标文件，完成

四、对不满意的或不合格的图标库能够从图标库中删除

五、能够收藏别人的图标到本身 上传图标 列表中，而后保存成为本身的图标

前端使用方式

图标管理平台提供了三种图标使用方式， 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 集中管理异步接口配置的模块