美文网首页
字体图标制作

字体图标制作

作者: 一wei渡江 | 来源:发表于2017-12-29 17:55 被阅读31次
    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

    相关文章

      网友评论

          本文标题:字体图标制作

          本文链接:https://www.haomeiwen.com/subject/olhwgxtx.html