字體圖標制作

  1. 生成網站https://icomoon.io/app/#/select

  2. 導入已有的字體文件 import to Set (可以單選或多選導入獨立的svg文件或上次打包后生成的集合svg文件)，如圖：


    2.png

  3. 選擇要打包的字體圖標Select All


    3.png

  4. 選擇好要打包的字體圖標（紅色矩形區域）以后，進行下一步操作，點擊Generate Font


    4.png

  5. 進入當前頁面，給每個字體圖標命名


    5.png

  6. 命名完成后即可，點擊Download按鈕下載即可，如需設置前綴或樣式格式，下載前點擊Download旁邊的設置按鈕可見下圖所示界面：


    6.png

  7. 按需要設置后，下載獲取到一個zip文件，解壓即可見您需要的字體圖標和一個demo，生成字體圖標完成。

  8. 生成react-native中react-native-vector-icon支持的字體圖標引入文件：進入APP的node_modules文件夾，在.bin文件下，命令行下輸入 generate-icon D:\work\YDT\icons\style.css --prefix=icomoon- --componentName=icomoon --fontFamily=icomoon >Icommoon.js
    D:\work\YDT\icons\style.css字體圖標css的目錄，prefix字體前綴，fontFamily字體名，Icommoon.js生成的js文件

8.1.png

注意前綴與后綴和命令的匹配

generate-icon D:\work\YDT\icons\style.css --prefix=icomoon- --componentName=icomoon --fontFamily=icomoon >Icommoon.js

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 公司現在已有一整套的Icon，那我們應該如何繪制一個Icon，讓其風格與之前的保持統一呢。 | 在設計icon時，...
    六六Ewa閱讀 3,728評論 0贊 0
  • 前言 對于前端開發者來說，學習圖標字體的制作的非常有必要的。 敲黑板：推薦使用第二種方式（使用 Iconfont ...
    yimi珊閱讀 1,083評論 0贊 2
  • 設計師將圖標上傳到 icoMoon 平臺，用戶可以自定義下載多種格式的 icon，平臺也可將圖標轉換為字體，便于前...
    李世鏗閱讀 408評論 0贊 0
  • 首先說明，我是web前端開發的新手，高手忽噴！。最近開發一個微信商城，要用到很多圖標，之前我都是用@×2雪碧圖。但...
    Cola丶ZYQ閱讀 2,202評論 1贊 2
  • ——木偶人的內心獨白 1 我是木偶， 我只有笑臉， 你看不到我的哭泣。 多少年后， 我佇立在和你相遇的那條羊腸小路...
    haimingway閱讀 709評論 2贊 5