Created icons example

fix #72
This commit is contained in:
Evan Bacon
2020-02-04 16:23:43 -08:00
parent 2f76696ebf
commit 3d2432e460
5 changed files with 100 additions and 0 deletions

25
with-icons/App.js Normal file
View File

@@ -0,0 +1,25 @@
import { FontAwesome, MaterialIcons } from '@expo/vector-icons';
import React from 'react';
import { StyleSheet, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<FontAwesome name="apple" size={25} />
<MaterialIcons name="star" color="blue" size={25} />
{/* Create a button */}
<FontAwesome.Button name="facebook" backgroundColor="#3b5998" onPress={() => {}}>
Login with Facebook
</FontAwesome.Button>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

43
with-icons/README.md Normal file
View File

@@ -0,0 +1,43 @@
# [Icons Example](https://docs.expo.io/versions/latest/guides/icons/)
<p>
<!-- iOS -->
<img alt="Supports Expo iOS" longdesc="Supports Expo iOS" src="https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff" />
<!-- Android -->
<img alt="Supports Expo Android" longdesc="Supports Expo Android" src="https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff" />
<!-- Web -->
<img alt="Supports Expo Web" longdesc="Supports Expo Web" src="https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff" />
</p>
The package `@expo/vector-icons` enables you to use most popular icon sets in a universal app. For more information please refer to the docs: [Expo Icons](https://docs.expo.io/versions/latest/guides/icons/).
## 🚀 How to use
#### Creating a new project**
- Install the CLI: `npm i -g expo-cli`
- Create a project: `expo init `
- `cd` into the project
### Using Icons
- Install the package:
```sh
expo install @expo/vector-icons
```
- Import the fonts you want to use
```js
import {
FontAwesome,
AntDesign,
Entypo,
EvilIcons,
Feather,
FontAwesome
} from '@expo/vector-icons';
```
## 📝 Notes
- [Icon directory](https://expo.github.io/vector-icons/)
- [`@expo/vector-icons` documentation](https://docs.expo.io/versions/latest/guides/icons/)

12
with-icons/app.json Normal file
View File

@@ -0,0 +1,12 @@
{
"expo": {
"name": "with-icons",
"version": "1.0.0",
"icon": "https://github.com/expo/expo/blob/master/templates/expo-template-blank/assets/icon.png?raw=true",
"splash": {
"image": "https://github.com/expo/expo/blob/master/templates/expo-template-blank/assets/splash.png?raw=true",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
}
}
}

View File

@@ -0,0 +1,6 @@
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};

14
with-icons/package.json Normal file
View File

@@ -0,0 +1,14 @@
{
"dependencies": {
"@expo/vector-icons": "10.0.0",
"expo": "36.0.0",
"react": "16.9.0",
"react-dom": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-web": "0.11.7"
},
"devDependencies": {
"@babel/core": "7.0.0",
"babel-preset-expo": "8.0.0"
}
}