react-native-svg-icons
渲染svg制作的iconfont。基于react-native-svg-uri改造,依赖react-native-svg。
通过 npm
或者 yarn
安装依赖
yarn add react-native-svg react-native-svg-icons
Link react-native-svg 包
react-native link react-native-svg # not react-native-svg-icons !!!
Props
Prop | Type | Default | Note |
---|---|---|---|
icon |
String |
icon的名称,必填 | |
color |
Color |
icon的填充颜色,选填 | |
size |
Number |
icon的大小,选填 | |
style |
Object |
icon的样式 | |
value |
String |
icon的唯一标识 |
使用
简单实例示例:
// 使用内置Icon时仅需引用Icon即可,自定义时引入createIconSet// 包含业务svg的js文件// 传入业务svg的js对象,生成CIcon组件const CIcon = // 仅自定义时使用 // 使用时icon为必传字段,value实际为key,不传时默认为icon所传// 使用时CIcon为单标签,且表现为独占一行,需配合flex布局使其展现为行内// 使用时受svg源的影响,表现大小不一,当size不合适时只显示部分,目前可通过设置transform样式进行hack<Icon style=padding: 10 icon='location' value='location' size=50 color='#faebd7' />// 如star size为40时展示不全<CIcon style=transform:scale:05 icon='star' size=80 color='#FDF24A' />
输出内置svg:
;; { superprops; } { return <View style=flexDirection: 'column'justifyContent: 'center'alignItems: 'center'> <Icon style=flex:1 icon=thispropsicon value=thispropsvalue /> <Text style=flex:1>thispropsicon</Text> </View> } { return <ScrollView > <View style=flex:1flexDirection: 'row'flexWrap: 'wrap'> Object </View> </ScrollView> ; }
This will render:
生成svgs.js
svgs.js是通过svg2json的npm包生成的,大概原理是遍历Icon文件夹下的svg文件,合并生成svgs.js。 核心源码:
const fs = const path = // 读取单个文件 { return { fs }} // 读取SVG文件夹下所有svg { return { fs }} module { const cwd = process inDir = path outFile = path // 生成js文件 }