reactnative 自定义项目的图标库

更新日期: 2020-11-17阅读: 1.9k标签: 图标

前言:

github比较火的有如react - native -vector- icons等图标库,为什么提到这些第三方库。首先明确一个点,你是否需要现成的第三方图标库?

优点:开箱即用,内容丰富
缺点:难以定制,占用打包空间

所以拥有自身项目的字体图标库也是一种不错的选择。


一、拥有自身的图标库

其拥有的大量图标以及可定制化的选择,简直就是图标菜市场。
1、注册阿里爸爸的矢量图标库账号 https://www.iconfont.cn/
2、建立项目 ,并搜索对应的图标增加入图标库。
3、将图标文件下载到本地。资源管理->我的项目->【选择对应的项目】-> 下载到本地。
4、解压下载的压缩包,找到里面的ttf文件 -- 字体图标文件。
5、记住里面的Unicode编码。


二、项目增加图标库

1、打开安卓目录下的assets里的fonts文件夹。
路径 android->app->src->main->assets->fonts,不同版本的react-native目录可能不同,但是本质都在main目录里,没有则自己创建

2、将上诉所说的ttf文件,拷贝到assets文件夹中
原因:安卓会将main中的assets打包进apk中。


三、书写代码

1、最简单的字体图标。

iconfont的unicode编码,如等,具体查看第一步。style里必须设置字体类型为iconfont, 否则将显示空白

import { Text } from 'react-native';

function Icon() {
return (
// unicode
<Text style={{fontFamily: 'iconfont'}}>unicode编码</Text>
)
}

2、封装

上诉例子只是一个简单的字体图标,Unicode编码写死的情况下,也只是一个图标,并不好复用。

而Unicode编码不能作为参数传入,由于react的机制,{unicode} 会完完全全变成字符串,导致无法使用。即:

错误示范:

import { Text } from 'react-native';

function Icon(unicode) {
return (
// 出错。
<Text style={{fontFamily: 'iconfont'}}>{unicode}</Text>
)
}

这里需要做一层转换,将Unicode编码转一下形式,以\ue 开头,如&#xe715; -> \ue715

以此类推,当然正常不太可能将这些编码作为参数传输。更希望通过名字等方式来确认自身使用哪种icon,就像react - native -vector- icons那样。很可惜,react-native原生不支持类名。

所以可以使用一个配置文件来工作。如:

// 编码
const iconConfig = {
determine: "\ue673",
userselector: '\ue774',
}

// 通用方法
export const getIconCode = (iconName) => {
return iconConfig[iconName];
}
import { Text } from 'react-native';

function Icon(name) {
return (
<Text style={{fontFamily: 'iconfont'}}>{getIconCode(name)}</Text>
)
}

好,现在就可以愉快的玩耍了。

附:

这里有个有趣的东西,既然是字体文件,那么在fonts目录下增加其他字体,就可以使用各种美容美奂的文字效果了。


链接: https://www.fly63.com/article/detial/9842

html中为何经常使用<i>标签来作为小图标呢?

很多网站都是习惯使用<i></i>来代表小图标?而实际上用 <i> 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写),那么用<i>表示小icon,是出于好记的原因吗,还是看上去有点像icon?这样不是违背了语义化的原则吗?

微信分享图标设置,以及wx.config配置

页面分享微信显示小图和描述的功能,微信就会抓取这张图片做为分享图片,微信对自定义分享内容作了限制,于是最终还是得回到配置wx.config上来。

利用伪元素:before和:after插入图标

如果你想在网页的某些文字前加图标或者想改变li元素默认的图标,你会如何做?本文价绍一种不用再额外添加html标签,存粹利用css就能插入或者自作图标的方式。

HTML中title前面小图标的实现_如何给网页标题添加icon小图标

今天给大家分享的是如何在网页标题中加入小图标,你的图标格式最好是.ico格式的,为了兼容性考虑,使用的颜色不要超过16色,这里这个图标的命名要求必须为favicon.ico

css图标库_css常用的矢量图标大全

这篇文章主要介绍前端常用的css图标库有哪些?比如:阿里巴巴矢量图标库Iconfont、Font Awesome、Cikonss、Glyph Icons、Simple Line Icons等等,使用css图标,可以通过样式对他进行设置字体颜色,大小等

网页中favicon.ico图标的作用、尺寸、制作

网站favicon.ico文件的用途很简单,就是在浏览器标签里,最前面显示的那个logo,对于网站 favicon.ico 图标的大小,建议大家选择 16x16 或者 32x32,再大也是完全没有必要的。favicon.ico

图标使用新姿势- react 按需引用 svg 的实现

图标是前端在业务开发中不得不写的一个东西,以我司的几个部门为例,每个组在写图标上都有不一样的方式:用户平台:单色图标用 iconfont 上提供的字体文件,彩色图标用 img 引入代替或者使用iconfont 上提供的 symbol.js 。

font-awesome图标转为图片

font-awesome图标是字体,专业术语叫 Icon Font,本质上是使用 PUA ( Private Unicode Area )码位 Unicode 编码的字符,所以font-awesome图标、Bootstrap 的图标和 Wingdings 字体都是一样的,不一样的无非是编码。

Bootstrap图标

小图标icon是一个优秀Web中不可缺少的一部分,起到画龙点睛的效果。在Bootstrap框架中也为大家提供了250多个不同的icon图片。本文将详细介绍Bootstrap图标,Bootstrap框架中的图标都是字体图标

纯css制作电闪雷鸣的天气图标

使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案;after伪元素写下面的投影样式;before伪元素写黄色闪电的样式;用两个嵌套的div容器就可以了,父容器来控制图标显示的位置

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!