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代理实现页面的访问，跟服务端工程毫无关系，服务端只负责提供异步接口。