在 Sketch 中画图标，生成字体文件

jopen 9年前

Using icon font for multiple platforms

 我们经常会在项目中使用 Icon Font，比如 Font Awesome。最近做一个项目，你可以自己在 Sketch 中画图标，生成字体文件，然后在 Web， Android ，iOS 等各个平台中使用。项目配有简单明了的各个平台下的例子。
This project can make icon font files from Sketch file.

These font files can be used in Web, Android and iOS.

This project also demos how to use the font files on these platforms.

Requirements

  • Mac
  • Skecth
  • npm

How to use

  1. Clone or download this project

  2. Install

    sh manage.sh install

  3. Make icon font from Skecth file

    sh manage.sh make

    cube-icons-sample.sketch is a sample Skecth file, you can change your own one.

  4. See what we have

    1. Web

      You can open samples/web/index.html in your browser, then you will see all the icons.

      You also can open it by: 

      sh manage.sh open

    2. iOS project

      You can open XCode sample proejct under dirctory: samples/ios

    3. Android proejct

      You can open Android Studio sample proejct under dirctory: samples/android

    </li> </ol>

    Customize

    1. You can edit gulpfile.js to:

      1. Use you own Sketch icon file.

      2. Change the name of the icon files.

      3. Change the css class name.

      4. Other things you want.

      </li>

    2. All the files under dirctory dist/ are generated by gulpfile.js according the file under dirctory '/templates'

      If can customize your own template files if you want.

      3. </ol>

      License

      MIT

      Thanks

      This project is mainly based on https://github.com/cognitom/symbols-for-sketch.



      项目地址： https://github.com/liaohuqiu/icon-font-for-multiple-platforms