zoukankan      html  css  js  c++  java
  • 在 react native expo 中使用 iconfont 自定义图标

    1. 下载 iconfont 文件

    把在 https://www.iconfont.cn/ 上下载好的图标解压

    2. 用 node.js 生成 iconfont.json 映射

    在解压好的文件夹里增加一个新文件 genJson.js

    genJson.js 中写入以下内容

    const fs = require('fs')
    const path = require('path')
    
    const lineReader = require('readline').createInterface({
      input: require('fs').createReadStream(path.join(__dirname, './iconfont.svg')),
    })
    
    const names = []
    console.log('create...')
    lineReader.on('line', function (line) {
      let words = line.split(' ')
      if (words[4] === '<glyph') {
        let [key, value] = [words[5].slice(12, -1), words[6].slice(11, -2)]
        if (value) {
          names.push('    "' + key + '":' + value)
        }
      }
    })
    lineReader.on('close', function () {
      return fs.writeFile(
        path.resolve(__dirname, './iconfont.json'),
        '{
    ' + names.join(',
    ') + '
    }',
        function (err) {
          if (err) {
            throw new Error(err)
          } else {
            console.log('create successe.')
          }
        }
      )
    })
    

    运行命令 node genJson.js 生成 iconfont.json

    生成后的 iconfont.json 文件内容如下格式:

    3. 配置 自定义图标

    components 文件夹下新建文件夹 iconfont, 复制 步骤1 中 iconfont.ttf 和 步骤2 中的 iconfont.json, 并新建 index.ts

    index.ts 中写入以下内容:

    import { createIconSet } from '@expo/vector-icons';
    import glyphMap from './iconfont.json';
     
    export default createIconSet(glyphMap, "iconfont", require('./iconfont.ttf'));
    

    4. 使用方法

    import Icon from '../components/iconfont';
    
    export default function TabHot() {
      return (
        <View style={styles.container}>
          <Text style={styles.title}>Tab Hot</Text>
          <Icon
            name="fire"
            size={26}
            style={{ marginBottom: -3 }}
            color="red"
          />
        </View>
      );
    }
    

    图标name的名字,打开步骤1中下载的 demo_index.html 查看

    以后图标有删改的,只需重新生成 iconfont.json, 然后 替换 componentsiconfont 下的 iconfont.ttf 和 iconfont.json 即可。

  • 相关阅读:
    Python基础知识
    Oracle 总结
    Linux基本命令
    测试理论
    计算机基础
    http常见的状态码,400,401,403状态码分别代表什么?
    html
    day21 包
    day20 模块引入的一些说明
    我又回来了???
  • 原文地址:https://www.cnblogs.com/unclefang/p/13857824.html
Copyright © 2011-2022 走看看