mirror of
https://github.com/zhigang1992/examples.git
synced 2026-01-12 22:47:03 +08:00
25
with-icons/App.js
Normal file
25
with-icons/App.js
Normal 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
43
with-icons/README.md
Normal 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
12
with-icons/app.json
Normal 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"
|
||||
}
|
||||
}
|
||||
}
|
||||
6
with-icons/babel.config.js
Normal file
6
with-icons/babel.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
module.exports = function(api) {
|
||||
api.cache(true);
|
||||
return {
|
||||
presets: ['babel-preset-expo'],
|
||||
};
|
||||
};
|
||||
14
with-icons/package.json
Normal file
14
with-icons/package.json
Normal 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"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user