在react-native中添加高可维护的iconfont字体

CarterLi 发布于2019-08-26 12:00 / 3631人阅读

摘要：没关系，笔者已经为你们准备好了，请保存到文件中，假设你的文件名叫和你刚才保存的字体文件在一起，方便管理复制字体这个插件包有好多套字体，我们可以需要把自己的也复制到包中对应文件夹，当然了，不可能手动复制，笔者从来都是解放双手的。

字体图标盛行的年代，在项目里使用一套不失真又可以随意改变大小颜色的图标，是多么舒服的一件事。这里要推荐iconfont.cn，超多免费图标，当然了，你的专属美工也可以自己建个项目并上传自己的字体图标。

但是有一件很悲伤的事情，iconfont字体，在RN中不能像web端一样直接使用。所以有了下面的教程（福利：比一般教程都精简，笔者用shell脚本替你手动处理了很多事情）

1、下载

假设你已经在iconfont网站建好项目，那么进入项目页面，点击下载按钮

下载完之后，解压，将其中的iconfont.css和iconfont.ttf复制到你的项目中，假设你是放到项目根目录的static/目录下面。

2、安装插件

想了解细节的点击传送门

npm install react-native-vector-icons --save

3、JSON映射

研究源码你会发现，每套字体都会附上一个json文件，就是名称和位置之间的关系。而iconfont是没有提供json文件的。没关系，笔者已经为你们准备好了，请保存到文件中，假设你的文件名叫create-iconfont-json.js

const fs = require("fs");
const generateIconSetFromCss = require("react-native-vector-icons/lib/generate-icon-set-from-css");
// 和你刚才保存的iconfont字体文件在一起，方便管理
const cssDir = __dirname + "/static/";
const iconSet = generateIconSetFromCss(cssDir + "iconfont.css", "icon-");

fs.writeFileSync(cssDir + "iconfont.json", iconSet);

4、复制字体

这个插件包有好多套字体，我们可以需要把自己的iconfont也复制到包中对应文件夹，当然了，不可能手动复制，笔者从来都是解放双手的。
给大家准备了一个shell脚本，你需要保存到根目录，假设你命名为copy-font.sh

# 先生成json文件
node create-iconfont-json.js

# 包自带的字体10几套，占空间，如果你需要那些字体库，把下面这行注释
rm -rf node_modules/react-native-vector-icons/Fonts/*
cp -f static/iconfont.ttf node_modules/react-native-vector-icons/Fonts/

# 链接到android和ios
react-native link react-native-vector-icons

然后执行

sh copy-font.sh

此时，你看看static/目录下面，应该多出了一个iconfont.json了，这个文件后面有用。

5、创建react组件

这个才是你最终需要用到的东西，保存到文件中，假设你保存到文件 src/components/IconFont.js

import createIconSet from "react-native-vector-icons/lib/create-icon-set";
import json from "../../static/iconfont.json";
const Icon = createIconSet(json, "iconfont", "iconfont.ttf");

// export {Icon};
// export default Icon;

export class IconFont extends Icon {
  static defaultProps = Object.assign({}, Icon.defaultProps, {
    size: 18,
  });
}

你也可以直接export default Icon，它本身也是component，接下来你就可以像react正常组件一样使用它。

import React, {Component} from "react";
import {View} from "react-native";
import {IconFont} from "./IconFont.js"

export class Test extends Component {
    render() {
      return ;
    }
}

更多用法请移步：github上的介绍，这边只是抛砖引玉

维护

用脚本维护就是舒服，如果你的字体有变更，那么重复第一步的下载，接着执行sh copy-font.sh，就完事了。

可以把执行命令放到npm start 中，这样对于自己和团队，都是无缝更新的。然后你就可以大胆的把iconfont.json放进.gitignore了

说明

使用这套方案，字体图标原先的色彩会被覆盖，意思就是你的图标只能有单色。如果要用多色，你需要使用另一个插件（传送门），缺点就是一个图标需要提供一个svg文件。

GPU云服务器云服务器在装配体中添加配合在云服务器中添加网页 js 在json中添加数据 js在表格中添加数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107984.html

在 React Native 使用阿里 iconfont 图标

摘要：熟悉前端开发的大家都一定知道，在网站下载图标集，会自带教程告诉你如何在网页使用。但是在中，跟网页使用的步骤就不同了。熟悉前端开发的大家都一定知道 iconfont.cn，在网站下载图标集，会自带教程告诉你如何在网页使用 iconfont。但是在 React Native 中，跟网页使用的步骤就不同了。我最开始百度出来的文章，不少都推荐借用 react-native-vector-ic...

young.li 2019-08-23 12:42 评论0 收藏0
像打字一样插入图标-iconfont

摘要：简介是什么就像名字一样，就是图标字体，像雅黑字体，思源字体一样，这种字体就是由图标构成有何优势轻量性一个图标字体比一系列的图像特别是在屏中使用双倍图像要小。问题很小创作自已的字体图标很费时间，重构人员后期维护的成本偏高。简介 - iconfont是什么？就像名字一样，iconfont就是图标字体，像雅黑字体，思源字体一样，这种字体就是由图标构成~ - 有何优势？ 1、轻量性：一个图...

warkiz 2019-08-29 16:58 评论0 收藏0
iconfont实践小结

摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...

bitkylin 2019-08-29 13:00 评论0 收藏0
svgtofont.js 自动生成图标字体和彩色图标文件

摘要：使用说明图标字体只能被渲染成单色，不能生成彩色图标。自动生成预览网站，预览字体文件。创建最大输入图标宽度的等宽字体。输出的字体高度默认为最高输入图标的高度。自动生成样式和。一般情况我通过 iconfont 或者 icomoon 来实现图标管理生成字体，导入到项目中使用。 ┌────────┐ ┌────────────...

objc94 2019-08-23 12:04 评论0 收藏0