矢量图标(react-native-vector-icons)19-11-03

到Github搜索react-native-vector-icons打开,到installation中查看如何安装
https://github.com/oblador/react-native-vector-icons
打开图标库:https://oblador.github.io/react-native-vector-icons/

iOS安装如下:

npm install --save react-native-vector-icons
或者
yarn add react-native-vector-icons
2.到项目ios文件夹下/你的项目名/Image.ecassets/Info.plist中,将下面代码复制进去

<key>UIAppFonts</key>
<array>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>EvilIcons.ttf</string>
  <string>Feather.ttf</string>
  <string>FontAwesome.ttf</string>
  <string>FontAwesome5_Brands.ttf</string>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
</array>

然后在项目下将目标切换到ios 安装目标库
cd ios
pod install

屏幕快照 2019-11-03 16.10.43.png

Android安装如下:

到项目中android文件夹下android/app/build.gradle下将
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
放入在该文件的第二行。
就安装好了库,接下来就是安装使用了

安装使用

打开Github中的如下链接,可以查看图标库,公司的设计人员也可以将自己设计的图标添加到图标库中。

屏幕快照 2019-11-03 16.19.31.png

引入要使用的图标库,比如Ionicons
import AntDesign from 'react-native-vector-icons/AntDesign

<View style={styles.sectionContainer}>
              <Text>矢量图标</Text>
              <AntDesign
                name={'customerservice'}
                size={50}
                style={{color:'red'}}
              />
</View>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容