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開源項目推薦