rn 图标库

柔光的暖阳◎ 2021-07-24 16:01 479阅读 0赞

yarn add react-native-vector-icons
    
    在node_modules里找到react-native-vector-icons->Fonts->拷贝所有ttf文件放置到->
    android->app->src->main->assets->fonts文件夹内
        如无则创建
    
    修改android->app->build.gradle
        在首行添加
        apply from:"../../node_modules/react-native-vector-icons/fonts.gradle"
        
    重启项目
    
    导入
       import xx from 'react-native-vector-icons/FontAwesome'
       
    使用
    	<xx name='图标名称' size={数值} color='颜色'/>
    ----------------------------------------------------
    
    阿里图标使用
    (1)将下载好的阿里图标文件中的iconfont.ttf放在android->app->src->main->assets->fonts
    	若无对应文件夹则创建
    	
    (2)根目录中创建react-native.config.js文件,与package.json同级
    
    	module.exports = {
    		assets: ['./src/assets/fonts/'],
    	 };
    (3)使用
    	<Text style={
       {fontFamily:'iconfont'}}>{'\ue624'}</Text>
    										
    										\u后加Unicode码后四位

代码示例:

import React,{ Component} from 'react'
    import { View,Text,StyleSheet} from 'react-native'
    import FontAwesome from 'react-native-vector-icons/FontAwesome'
    
    export default class App extends Component{ 
    
        render(){ 
            return(
                <>
                    <FontAwesome name="rocket" size={ 30} color="#900"/>
                    { /* <Text>hh</Text> */}
                </>
            )
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，479人围观）

还没有评论，来说两句吧...

相关阅读

相关图标库大全

进入www.iconfont.cn 搜索想要的图标然后把背景色改成白色,下载png格式即可. ![在这里插入图片描述][watermark_type_ZmFuZ3poZ

太过爱你忘了你带给我的痛/ 2023年02月18日 03:02/ 0 赞/ 50 阅读

相关 rn源码ios_RN - IOS 原生嵌套RN

配置RN 文件新建文件加 (项目名称) 在项目根目录下创建一个名为package.json \{ "name": "项目名字", "version": "0.0.1

朴灿烈づ我的快乐病毒、/ 2022年12月31日 10:28/ 0 赞/ 204 阅读

相关 Javascript图标库

ECharts 1ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome

灰太狼/ 2022年08月22日 03:54/ 0 赞/ 172 阅读

相关阿里的图标库

阿里的图标库 [http://iconfont.cn/plus?4rwsxfgh8=][http_iconfont.cn_plus_4rwsxfgh8] [http_ico

「爱情、让人受尽委屈。」/ 2022年07月15日 00:47/ 0 赞/ 268 阅读

相关前端图标库

bootstrap: [点击打开链接][Link 1] 几款图标库推荐： [点击打开链接][Link 2] 阿里图标库(一个很好的平台)： [点击打开链接

傷城~/ 2022年06月03日 09:26/ 0 赞/ 233 阅读

相关阿里图标库+icoMoom制作字体图标

> 1、登陆阿里字体图标库：[http://www.iconfont.cn/][http_www.iconfont.cn] > > 2、选择需要下载svg格式的字体图标 >

迈不过友情╰/ 2022年05月29日 07:14/ 0 赞/ 476 阅读

相关扩展 layui icon 图标库为阿里图标库或Font Awesome

鉴于Layui 140个图标可能不太够用，所以这里我们需要扩展下分别试了 [Font Awesome][] 和 [阿里的IconFont][IconFont] ，其他图标

r囧r小猫/ 2022年05月04日 00:25/ 0 赞/ 2134 阅读

相关 FontAwesome 字体图标库使用

Intro Font Awesome(以下简称fa)是一套绝佳的图标字体库和CSS框架。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

灰太狼/ 2022年01月30日 11:01/ 0 赞/ 497 阅读

相关 Rails使用图标库技巧

网页中经常需要使用一些小图标，这里我们想使用Font Awesome这个图标库里的图标，我们可以到rubygems.org查看是否有人将该图标库封装成gem使得我们使用更加敏捷

今天药忘吃喽~/ 2021年12月24日 02:33/ 0 赞/ 255 阅读

相关 rn 图标库

yarn add react-native-vector-icons 在node_modules里找到react-native-vector-icon

柔光的暖阳◎/ 2021年07月24日 16:01/ 0 赞/ 480 阅读