Nicon意见不合，先上站台Nicon。平台连接github登录，使用七牛CDN存储。欢迎您试用。nicon是一个集图标上传、展示、使用为一体的字体图标管理平台。流程简单，符合日常开发使用习惯，适合企业内部部署。在项目中使用Iconfont字体图标替代图片图标的使用，达到缩小体积、统一风格、提高开发效率的目的。如果与设计师一起使用，设计师可以在平台上管理图标并重复使用图标，减少设计图标的时间，而开发只负责使用设计师维护的图标库，减少与设计师的沟通成本。优势与其他字体图标管理平台相比，具有以下优势：使用过程简单，符合日常开发和使用习惯，无需在审核管理过程中花费时间，适合内部设计人员协同使用开发、维护图标设计、管理、使用的一致性，易于部署。该平台有自己的注册和登录功能，以及静态资源路由。它只能通过数据库配置来部署和使用。支持第三方登录接入，将资源上传到第三方CDN服务器。使用更安全，资源更稳定支持导出资源多样化，适合多种使用场合，更多支持导出工具nicon-tookit，使用方便快捷流程图协同使用最优方案目前图标从设计到使用的完整流程基本是：设计完成->可视化使用->导出到开发->开发流程，使用。显然，图标是设计和开发共同使用的。虽然过程看起来很简单，但是小问题在使用频率高之后会消耗很多时间。如今，有许多制作和使用图标的高效工具。但都是片面的。对于设计来说，制作图标的工具很多而且功能强大，设计好的图标也会直接在这些工具上使用，而且图标的复用性很高，所以对图标进行有效的管理可以避免后续耗时的重复设计。对于开发来说，图标的使用方式只有两三种。你所需要的只是一个工具，可以在图标处理导出后，在代码中添加所需类型的资源。事实上，我不想关心图标的来龙去脉。基于以上需求，需要打造一个能够满足设计与开发协同的字体图标管理平台。浪费在沟通上的时间。对于开发，不需要管理图标和图标的处理方式。只需要及时从平台更新设计师管理的图标库生成的资源即可。功能介绍本平台UI参照iconfont平台实现，iconfont平台的图标可以无缝迁移到本平台。由于个人能力有限，我做的其实是一个简单版的iconfont。是一个纯图标管理平台，更适合企业部署和内部使用。1.创建图标库2.上传图标。该阶段为图标草稿阶段，可以进行删除和修改名称。最好确保图标名称是唯一的。点击保存并上传后，才能添加到图标库中。如果未保存或删除，它将保留为草稿。3、将图标添加到图标库中，会自动保存更新生成新的字体图标库资源。进入指定的图标库后，点击添加图标，选择需要添加的图标。确认后，将生成一个新的图标文件并完成。4、不满意或不合格的图标库可以从图标库中删除。5.可以收藏将别人的图标上传到自己的图标列表，然后保存为自己的图标。前端使用图标管理平台提供了三种图标使用方式，fontclass，svgfiles，svgsprite。可以导出的资源类型包括css资源文件链接、css资源文件内容、svg文件内容、svgsprite文件内容，每个项目可以根据自己的使用情况使用脚本导出合适的资源类型。可以使用配套工具nicon-toolkit从平台获取资源，简单方便，配置灵活。1、font-class引用配置脚本的资源配置类型为cssUrl（外链）或cssContent（内联），运行脚本获取资源文件，选择对应图标并获取字体代码，应用到page2、svg文件配置脚本的资源配置类型为svg。运行脚本获取svg文件到指定目录进行二次加工或直接使用，如base64或其他方式3.svgsprite使用配置脚本资源配置类型为svgSprite，运行脚本获取svgSprite内联到html中文件选择对应的图标并获取类名，应用到页面这种使用方式有点麻烦，建议打包成组件并传入id，如install部署的Nicon平台是一个完全独立的前后端项目，前后端均可单独启动，共同开发调试。前端采用Vue生态相关技术，后端采用koa框架。结构和工艺都比较简单。根据自己的需求和自己的开发习惯来设计架构。如果你有兴趣，你可以看看。Nicon平台所有代码均已开源，个人将长期维护。欢迎有兴趣者加入，共同维护。服务安装部署系统要求linux/unix/windows环境要求nodejs7.0+npm3.10.8+mogondb3.2+redis3.2+启动项目前，必须确保数据库已经启动，并创建了对应的数据库。1、将项目克隆到本地|服务器gitclonegit@github.com:bolin-L/nicon.git2。进入项目工程nicon安装依赖cdnicon&&npminstall3。在nicon同级文件夹（或任意位置，但如果放在nicon文件夹下，名称必须是start.sh或start.bat，会被忽略，更新时会忽略数据库信息和其他环境变量不会被覆盖）创建启动脚本start.sh，用于配置数据库，其他环境变量配置请参考example4。进入nicon文件夹，执行启动脚本命令shyourStartConfigPath/start.sh。如果没有意外的话，这时候应该已经开始了。服务监听的端口是4843。当然这只是一个纯服务，具体页面需要部署前端项目nicon-front。前端静态资源部署图标管理平台采用前后端完全分离的开发方式，前端代码放在一个独立的icon-front中。前端只需要提供完整的静态html页面和其他静态资源即可。访问静态资源是通过配置nginx代理访问页面实现的，与服务端项目无关。服务器只负责提供异步接口。1、将前端工程克隆到本地，gitclonegit@github.com:bolin-L/nicon-front.git与nicon文件夹同级。2、进入nicon-front项目，安装依赖cdnicon-front&&npminstall3、运行package命令，将输出打包到nicon-front/dist文件夹中。npmrunbuild现在服务已经启动，静态资源已经输出，接下来需要配置nginx，让请求可以访问静态资源，异步接口可以访问服务。Nginx配置为了在浏览器中访问页面，需要配置Nginx代理，将相应的请求转发给相应的服务。平台的请求分为两种，一种是访问前端静态页面和资源，另一种是访问后端服务的异步接口。请求有一定的规则，配置大致如下：#静态资源请求位置/{root/home/liaobolin/app/nicon-front/dist;indexindex.htmlindex.htm;}location^~/static{root/home/liaobolin/app/nicon-front/dist;}#配置异步接口请求到服务器位置/api{proxy_set_headerX-Real-IP$remote_addr;proxy_set_header主机$http_host;proxy_passhttp://127.0.0.1:4843;这样配置之后，平台基本可以运行使用了，浏览器可以通过域名访问首页三方服务访问虽然平台已经可以提供登录、注册、登录等静态资源的访问图标库样式文件。但是对于企业来说，内部工具平台最好只接受内部人员或者内网访问。静态资源最理想的是放在自己的CDN服务器上，这样平台运行更安全，访问速度更快等等……基于这样的需求，Nicon支持访问第三方登录和上传字体文件资源到第三方服务器。登录或者上传需要的key需要通过环境变量设置，比如在start.sh文件中，登录，上传访问代码需要按照规范开发提交PR，合并到master分支检查后的项目。目前代码支持以下三方服务：三方登录网易openId登录github授权登录三方上传网易NOS服务七牛云存储服务三方服务访问文件夹结构如下├──service│├──登录││├──github_qiniu│││├──config.js│││└──index.js|──config.js││└──index.js|||--......│├──index.js三方登录、上传服务接入步骤1.在接入三方服务之前，必须先配置商品类型环境变量productType。在start.sh文件中添加exportproductType='github_qiniu'；比如我需要接入github三方登录和七牛上传存储服务，那么我的productType设置为github_qiniu。那么开发接入服务时，文件夹名称必须是github_qiniu。2.在service/login/文件夹下创建文件夹github_qiniu，然后在该文件夹下创建config.js和index.js。异步登录方法必须在index.js文件中公开。调用该方法后，需要返回指定格式的Data//index.jsclassGithubOpenIdLogin{asynclogin(ctx){//你的代码return{userName:tokenInfo.userName//requiredandunique}}}letloginIns=新GithubOpenIdLogin();module.exports=loginIns.login.bind(loginIns);3.在service/upload/文件夹下创建文件夹github_qiniu，然后在该文件夹下创建config.js，以及index.js，index.js文件中必须暴露异步上传方法，调用方法后需要返回指定格式的数据//index.jsclassQiniuUpload{asyncupload(dirPath){//你的代码//上传返回数据格式return{url:cssUrl,//requiredcssContent:cssContent//required};}}letuploadIns=newQiniuUpload();module.exports=uploadIns.upload.bind(uploadIns);至此配置已经完成，直接启动项目。Nicon平台的详细部署过程已经写在Nicon项目中，如有需要请前往了解更详细的部署过程。后记Nicon平台是我业余时间做的一个项目，能力有限。UI基本参考iconfont，技术也在慢慢摸索。这不简单。欢迎在使用过程中提出任何建议或意见。欢迎大家来一波star，github地址如下：nicon平台nodejs后端服务nicon-front平台前端项目在开发过程中，我基于axios模仿NEJ的缓存使用方式，封装了axios-cache模块，基于axios进行了一些增强，更适合日常组织使用。如果您有兴趣，可以尝试一下。当然也欢迎明星。axios-cache是??一个集中管理异步接口配置的模块
