RN笔记-icon图标的使用和阿里图标的使用

安装react-native-vector-icons

npm i react-native-vector-icons

关联 react-native-vector-icons

react-native link react-native-vector-icons

关联react-native-vector-icons也可以手动关联

找到 android/settings.gradle 添加如下代码

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

关联完毕后需要去android文件夹下引用

在 android/app/build.gradle 文件中找到dependencies 在里面添加如下代码

dependencies {...// 配置图标implementation project(':react-native-vector-icons')...
}

使用官方内置图标

import Icon from 'react-native-vector-icons/FontAwesome';
<Icon name="rocket" size={30} color="#900" />

★ 官方图标地址

使用阿里图标库的图标

进入阿里图标库自己的项目中并下载文件

得到一个压缩文件 , 解压后得到以下文件

我们需要的就两个 iconfont.ttf字体文件和iconfont.json配置文件

将iconfont.ttf放到 android/app/src/main/assets/fonts/中 , 没有该文件的话自己创建

然后就要用到iconfont.json了

创建一个自己的Icon组件 , 比如: Components/MyIcon

// 如果是TS 要install @types/react-native-vector-icons
import {createIconSet} from 'react-native-vector-icons';
// 引入json
import iconfont from './iconfont.json';
// 图标对象
// 图标对象的格式为:
// { 图标名:图标值(十进制) }
let icons:any = {};
(iconfont as any).glyphs.forEach((item:any) => {// icon- 是前缀icons["icon-"+item.font_class] = item.unicode_decimal;
})
const Icon = createIconSet(icons, 'iconfont', 'iconfont.ttf');
export default Icon;

自定义前缀

更改前缀后重新下载啊, 替换ttf文件, 然后在上面代码中更改前缀

使用方式

import MyIcon from "./Components/MyIcon"
function Test(){return <View><MyIcon name={"icon-tianqi-yintian"} size={24} color={"gray"} /></View>
}

3. RN笔记-icon图标的使用和阿里图标的使用相关推荐

如何将自己设计的图标或通过网上下载的图标上传到阿里图标图库中使用方法教程
如何将自己设计的图标或通过网上下载的图标上传到阿里图标图库中使用方法教程作者:张国军_Suger 开发工具与关键技术:Win10.项目.图标对于编程人员来说,有一个不可获取的图库就是阿里图标库,这 ...
java怎么引入矢量图标库,阿里图标库怎么使用?阿里图标库iconfont如何使用
阿里图标库怎么使用?阿里图标库iconfont如何使用网际网络测评网络评测 2020-3-17 2581 0评论阿里图标库Iconfont-国内功能很强大且图标内容很丰富 ...
【微信小程序-原生开发】添加自定义图标（以使用阿里图标库为例）
方式一 : 下载svg导入优点:操作方便,支持多彩图标缺点:会增加源代码大小下载 svg 格式的图标图片,放入源码中使用小程序项目中的路径为 assets\icon\美食.svg 使用时-代码 ...
前端字体图标的使用（阿里、icomoon）
阿里字体图标使用首先去阿里图标库官网:http://www.iconfont.cn/ 搜索需要的图标库 -->加入购物车-->点击购物车-->添加到项目(如果有项目直接加入需要的项 ...
vue项目中阿里图标的使用
vue项目中阿里图标的使用在项目中使用阿里图标,先去阿里图标网站(https://www.iconfont.cn/),找到自己想要的图标,添加到一个新建项目中,然后选择Font class,点击下载 ...
uni-app引入阿里图标
个人博客今天刚好用uni-app在开发一个多端应用,在开始引用图标时不知道如何引入多端应用的图标,后来用阿里图标解决了,在此记录下解决的方法去阿里图标官网下载阿里图标,选择unicode 2.复制 ...
amazeui学习笔记--css（常用组件6）--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
前端学习笔记系列一：5 在项目中引入阿里图标icon
进入到阿里的图标库网站,里面有上百万种icon,https://www.iconfont.cn,需要注册一个帐号,然后进入到这个页面,在这里点击右下角的带加号的图标,创建一个新的项目,名称与你要使用图 ...
阿里图标icon二次引入+ 图标引入后是黑色解决办法。
阿里图标icon二次引入第一到第三步. 第四步找到文件夹复制代码阿里图标icon二次引入 , 引入后你就会发现是黑色没有原来图标的颜色就像这种如何让本来的颜色出来呢 ? 1.找到项目设置 ...
使用阿里图标库icon图标 ttf字体文件转化成base64格式
iconfont-阿里巴巴矢量图标库下载代码字体文件上传到下面网站 Online @font-face generator - Transfonter 下载转好的文件将以下代码复制到css 阿里 ...

3. RN笔记-icon图标的使用和阿里图标的使用

RN笔记-icon图标的使用和阿里图标的使用

使用阿里图标库的图标

3. RN笔记-icon图标的使用和阿里图标的使用相关推荐

最新文章

热门文章