react-native-bpk-component-icon
v3.0.1
Published
Backpack React Native icon component.
Downloads
48
Maintainers
Keywords
Readme
react-native-bpk-component-icon
Backpack React Native icon component.
Installation
npm install react-native-bpk-component-icon --save-dev
iOS installation
The most reliable way to install the file on iOS is manually, three simple steps are required:
update the
Info.plist
file by adding<key>UIAppFonts</key> <array> <string>BpkIcon.ttf</string> </array>
if the entry
UIAppFonts
it's already there, just add<string>BpkIcon.ttf</string>
inside the<array>
like so<array> ... existing entries <string>BpkIcon.ttf</string> </array>
In the
Build Phases
of your project, in the sectionCopy Bundle Resources
add a reference to theBpkIcon.ttf
file path like/path/to/node_modules/bpk-svgs/dist/font/BpkIcon.ttf
Rebuild the app
Android installation
This method has the advantage of fonts being copied from this module at build time so that the fonts and JS are always in sync, making upgrades painless.
Edit android/app/build.gradle
( NOT android/build.gradle
) and add the following:
apply from: "node_modules/react-native-bpk-component-icon/fonts.gradle"
Usage
import { View } from 'react-native';
import React, { Component } from 'react';
import BpkIcon, { icons } from 'react-native-bpk-component-icon';
import { spacingBase, colorSkyBlue } from 'bpk-tokens/tokens/base.react.native';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: spacingBase,
}
});
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<BpkIcon
icon={icons.beer}
style={{ color: colorSkyBlue }}
small
/>
<BpkIcon
icon={icons.beer}
style={{ color: colorSkyBlue }}
/>
</View>
);
}
}
withRtlSupport
HOC
import { View } from 'react-native';
import React, { Component } from 'react';
import BpkIcon, { icons, withRtlSupport } from 'react-native-bpk-component-icon';
import { spacingBase, colorSkyBlue } from 'bpk-tokens/tokens/base.react.native';
const BpkIconwithRtlSupport = withRtlSupport(BpkIcon);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: spacingBase,
}
});
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<BpkIconwithRtlSupport
icon={icons.beer}
style={{ color: colorSkyBlue }}
/>
</View>
);
}
}
Props
| Property | PropType | Required | Default Value | | --------- | --------- | -------- | ------------- | | icon | string | true | - | | small | bool | false | false |