react-native-vector-icons 和 自定义字体图标

安装和配置react-native-vector-icons

  1. 根目录下使用npm install react-native-vector-icons --save
  2. 安装完成后运行react-native link react-native-vector-icons命令link这个库
  3. Android端的配置:
    打开android /app/src/main中并建立了assets/fonts的目录 黏贴node_modules/react-native-vector-icons/Fonts的文件

    接着咱们要在android/app/build.gradle文件中添加如下内容:
    dependencies {
        .....
        compile project(':react-native-vector-icons')
        ....
    }

     

阿里矢量图标库iconfont的使用

  1. 选择须要下载的图标,下载svg格式 前往
  2. 解压zip文件,能够看到文件夹中有如下文件 其中demo_unicode.html包含了全部图标对应的unicode字符,咱们就是用它来显示图标。
  3. 将iconfont.ttf文件分别copy到Android和iOS工程目录下。
    Android放置在app/src/main/assets/fonts文件夹中
  4. 生成iconfont.json 直接使用unicode编码的方式引用字体图标不怎么直观,毕竟都是unicode编码,还容易拼写出错。这边咱们须要使用个脚本工具
    iconfont_mapper.sh脚本文件和iconfont.svg放到同一目录中,打开命令行或终端,执行如下命令:
    ./iconfont_mapper.sh iconfont.svg
    ​​​​​​​
    ​​​​​​​
相关文章
相关标签/搜索