github开源推荐项目：ant-design-icons

项目介绍：

经过请求 github上ant-design-mobile项目中引用的icon文件, 单独导出icon，供其余框架使用，好比vue;

支持多种引入方式：svg、webFont

项目地址：github.com/fjc0k/ant-d…

技术栈：

• vue+vuepress 搭建web基本框架，使用md来生成网页

• webfonts-generator 把svg文件转成font字体图标

• element-ui 样式支持

• vue-clipboards 点击复制文件名

• axios 发起请求，动态获取ant design的css文件中引用的icon

项目启动

cnpm i   //安全装依赖包
npm run serve   //启动服务
npm run build  //打包项目，供其余项目引入使用
复制代码

项目架构：

vuepress框架优势介绍

• 经过markdown文件，自动建立路由，生成静态网页
• 支持关键词搜索：md三级目录内的标题
• 特殊的vue+md语法： 标签是vue语法， 其余部分=vue模板渲染语法+markdown语法；
• 内置样式模板配置文件，json文件，能够修改导航栏
• 支持热更新

项目结构

│  package.json                          //项目依赖包
├─dist                                  //打包后的文件
│  │  anticons.css                      //经过样式引入文件
│  │  anticons.json                     //全部支持的图标列表
│  │  anticons.min.css                  //经过样式引入文件min版本              
│  │  index.js                          //项目引用文件入口/列表
│  │
│  ├─font                              //打包后的svg能够使用font字体引入
│  ├─mobile                            //引入到项目中的文件
│  │  │  anticons.json                 //全部svg,json对象名称
│  │  │  index.js                      //所在导出地svg引用列表
│  │  │
│  │  └─svg                           //引要导出的svg文件列表
│  │          check-circle-o.svg        //svg文件
│  │
│  ├─standalone                             
│  └─svg                               //项目中全部svg文件
│          alipay-circle.svg│
├─docs                                  //docs下的md文件会自动生成路由，同时支持vue+md语法
│  │  guide.md
│  │  README.md                         //默认是首页                                   
│  └─.vuepress                         //vuepress框架自带配置文件
│      │  app.styl                      //框架样式文件,vuepress框架集成了，能够在/yarn.lock 文件查看到依赖
│      │  config.js                     //能够配置导航相关信息，KWD相关信息
│      │  enhanceApp.js                 //vuepress框架入口文件，功能：引入依赖库，引入样式，全局注册组件，为原型添加新方法
│      │
│      └─public                        //资源文件夹
│              hero.png
│
├─scripts                               //脚本命令：导出指定的icon图标到文件夹中
│  │  config.js
│  │  extractIcons.js                   //导出icon   
│  │  extractMobileIcons.js             //导出mobile icon
│  │  extractStandaloneIcons.js         //导出独立的icon
│  │  generateFonts.js                  //生成字体，主要经过webfonts-generator 库来把svg文件转成font字体文件
│  │
│  └─templates                         //build以后，导出css文件的模板，内置变量
│          anticons.hbs
│
└─src                                   //主要目录工程文件夹
    │  anticons.json                     //svg名称，unicode，id对应表
    │  index.js                          //导出全部的svg文件
    │
    ├─mobile                            //移动端独立的svg文件夹
    │  │  anticons.json
    │  │  index.js
    │  │
    │  └─svg                          //移动端所的svg文件
    │          check.svg
    │
    ├─standalone
    └─svg                             //全部svg文件列表
            alipay.svg
    
复制代码

每周更新欢迎star：github开源项目推荐