做一个有情怀的程序员
在项目开发中，为了提高项目的逼格和美观度，我们经常需要使用的各式各样的图标，常用的手段就是美工帮我们切好图，也就是使用图片去实现，如果项目太大会导致图片资源太多，占用体积，怎么办？今天给大家推荐一个github上比较受欢迎的一个强大的icons库——“react-native-vector-icons”。废话不多说，直接上教程。
第一步：使用Terminal进入到项目根目录中安装react-native-vector-icons，执行命令npm install react-native-vector-icons --save等待安装完成。
第二步：由于Android和iOS平台不一样，所以需要分别对待，首先先配置iOS。
使用Terminal进入到项目根目录中执行命令react-native link,执行完成后，使用Xcode打开工程目录下的ios文件夹下的 xxxx.xcodeproj 文件,(xxxx是你的项目名称)，查看 Resources 文件夹以及右侧名为 Fonts provided by application 数组，如图1；
至此为止ios的配置工作就全部结束了。其中
react-native link很重要react-native link很重要react-native link很重要（重要的事情说三遍），注意如果在执行react-native link的时候控制台报错，请在项目根目录先执行npm install后再执行react-native link命令即可。
第三步：在项目中使用（ios）。
1.在项目文件中导入组件import Icon from 'react-native-vector-icons/Ionicons';
import {AppRegistry,View,StyleSheet} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Ionicons from 'react-native-vector-icons/Ionicons';
export default class icons extends Component {
render() {
return (
<View style={styles.container}>
<FontAwesome name={'telegram'} size={26} color="red" style={styles.icon} />
<FontAwesome name={'search'} size={26} color="red" style={styles.icon} />
<FontAwesome name={'map-marker'} size={26} color="red" style={styles.icon} />
<Ionicons name={'ios-home'} size={26} color="blue" style={styles.icon} />
<Ionicons name={'ios-cart'} size={26} color="blue" style={styles.icon} />
<Ionicons name={'ios-navigate'} size={26} color="blue" style={styles.icon} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:"row",
marginTop:50
},
icon:{
marginLeft:10
}
});
AppRegistry.registerComponent('icons', () => icons);
2.<FontAwesome name={'telegram'} size={26} color="red" style={styles.icon} />name就是图标的名称，size控制图标的大小，style控制图标的样式，color控制图标的颜色。
3.如果你引入的是import Icon from 'react-native-vector-icons/Ionicons';,你可以去ionicons.com上去找图标，图标的名称就是name的值，但是注意需要去掉前面的“ion-”,如图；
import Icon from 'react-native-vector-icons/FontAwesome';,你可以去fontawesome.io上去找图标，图标的名称就是name的值，但是注意需要去掉前面的“fa-”,如图；
最后：我们来看一看效果吧；
结语：
好了，今天的教程就到这里，至于Android平台怎么配置，在这里就不说了，如果有需要就给我留言，抽时间我再出一篇关于Android平台的，其实像这种教程网上搜一下会有很多，但是我发现很多都说的不太清楚，所以我今天站在小白的立场上出的这篇教程，希望给新手提供更友好的帮助。说的不对的地方请提出且包涵，谢谢！
