# react-native-bpk-component-icon

> Backpack React Native icon component.

Latest version **3.0.1** (published 2020-02-26) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install react-native-bpk-component-icon
pnpm add react-native-bpk-component-icon
yarn add react-native-bpk-component-icon
bun add react-native-bpk-component-icon
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2020-02-26 |
| First published | 2017-10-02 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 43.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 543 |
| Author | Backpack Design System |
| Maintainers | georgegillams, k0nserv, ojcurt, shaundon, tiagohngl |

## Links

- npm: https://www.npmjs.com/package/react-native-bpk-component-icon
- Repository: https://github.com/Skyscanner/backpack
- Homepage: https://github.com/Skyscanner/backpack#readme
- Issues: https://github.com/Skyscanner/backpack/issues
- npm.io page: https://npm.io/package/react-native-bpk-component-icon

## Dependencies (3)

- [bpk-svgs](https://npm.io/package/bpk-svgs.md) ^8.2.0
- [bpk-tokens](https://npm.io/package/bpk-tokens.md) ^32.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8

## Recent versions

- 3.0.1 (latest) — 2020-02-26
- 2.2.4-alpha.1 (canary) — 2019-12-03
- 3.0.0 — 2020-02-19
- 2.2.11 — 2020-02-13
- 2.2.10 — 2020-01-30
- 2.2.9 — 2020-01-22
- 2.2.8 — 2020-01-20
- 2.2.7 — 2019-12-17
- 2.2.6 — 2019-12-12
- 2.2.5 — 2019-12-06
- 2.2.4 — 2019-12-04
- 2.2.3 — 2019-11-29
- 2.2.2 — 2019-11-28
- 2.2.1 — 2019-11-26
- 2.2.0 — 2019-11-14
- … 120 more at https://npm.io/package/react-native-bpk-component-icon/versions

## README

# react-native-bpk-component-icon

> Backpack React Native icon component.

## Installation

```sh
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:
1. 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>
    ```
2. In the `Build Phases` of your project, in the section `Copy Bundle Resources` add a reference to the `BpkIcon.ttf` file path like `/path/to/node_modules/bpk-svgs/dist/font/BpkIcon.ttf`

3. 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

```js
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

```js
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         |

---
_Source: https://npm.io/package/react-native-bpk-component-icon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._