expo-fontawesome
v0.1.2
Published
React Native component for Font Awesome 5 in managed Expo app
Downloads
16
Readme
expo-fontawesome
React Native component for Font Awesome 5 in managed Expo app
Introduction
If you have trouble trying react-native-fontawesome with Expo, maybe you should try this. Since managed Expo app have react-native-svg
pre-installed, using react-native-svg
might cause an Error:
Error: tried to register two views with the same name rnsvgrect
This repository rewrites the component with Expo svg components in TypeScript, hopefully solving the problem for you.
Installation
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save expo-fontawesome
or
$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add expo-fontawesome
Usage
See more details at react-native-fontawesome
You can use Font Awesome icons in your React Native components as simply as this:
<FontAwesomeIcon icon="coffee" />
Explicit Import
import React, {Component} from 'react';
import {View} from 'react-native';
import {FontAwesomeIcon} from 'expo-fontawesome';
import {faCoffee} from '@fortawesome/free-solid-svg-icons';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View>
<FontAwesomeIcon icon={faCoffee} />
</View>
);
}
}
Color
Priority: The color prop takes priority over setting color via StyleSheet. So if you end up with both set, the prop wins.
In fact, when provided a style object (suppose you've declared other style properties other
than color
), if the color prop has been specified, then any color property on the style object is removed
before the style object is passed through to the underlying SVG rendering library. This is to avoid ambiguity.
Using the color prop should be preferred over using the StyleSheet.
Color Prop
<FontAwesomeIcon icon={faCoffee} color={'red'} />
Color StyleSheet property
To set the color of an icon, provide a StyleSheet
like this:
import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import {FontAwesomeIcon} from 'expo-fontawesome';
import {faCoffee} from '@fortawesome/free-solid-svg-icons';
type Props = {};
const style = StyleSheet.create({
icon: {
color: 'blue',
},
});
export default class App extends Component<Props> {
render() {
return (
<View>
<FontAwesomeIcon icon={faCoffee} style={style.icon} />
</View>
);
}
}
Size
Default: 16
To adjust the size, use the size
prop:
<FontAwesomeIcon icon={faCoffee} size={32} />
Note: the height
and width
props have been deprecated.
Features
Masking
<FontAwesomeIcon icon="coffee" mask={['far', 'circle']} />
Power Transforms
<FontAwesomeIcon icon="arrows" transform="shrink-6 left-4" />
<FontAwesomeIcon icon="arrow-rightr" transform={{ rotate: 42 }} />
License
MIT, see the LICENSE file for details.