# bpk-component-icon-css

> Backpack icon components.

Latest version **9.2.9** (published 2022-05-20) · Apache-2.0 license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 9.2.9 |
| Published | 2022-05-20 |
| First published | 2020-07-13 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 371 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 543 |
| Author | Backpack Design System |
| Maintainers | k0nserv, shaundon, georgegillams, tiagohngl, ojcurt |

## Links

- npm: https://www.npmjs.com/package/bpk-component-icon-css
- 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/bpk-component-icon-css

## Dependencies (5)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [bpk-mixins-css](https://npm.io/package/bpk-mixins-css.md) ^31.0.0
- [bpk-react-utils-css](https://npm.io/package/bpk-react-utils-css.md) ^4.1.1
- [@skyscanner/bpk-svgs-css](https://npm.io/package/@skyscanner/bpk-svgs-css.md) ^14.1.9
- [@skyscanner/bpk-foundations-web-css](https://npm.io/package/@skyscanner/bpk-foundations-web-css.md) ^8.0.0

## Recent versions

- 9.2.9 (latest) — 2022-05-20
- 9.2.7 — 2022-04-27
- 9.2.5 — 2022-04-14
- 9.2.4 — 2022-04-04
- 9.2.2 — 2022-03-22
- 9.2.1 — 2022-03-02
- 9.1.17 — 2022-02-17
- 9.1.14 — 2022-02-08
- 9.1.12 — 2022-02-07
- 9.1.11 — 2022-02-02
- 9.1.5 — 2021-12-09
- 9.1.3 — 2021-12-01
- 9.1.2 — 2021-11-29
- 9.1.1 — 2021-11-15
- 9.0.13 — 2021-09-13
- … 63 more at https://npm.io/package/bpk-component-icon-css/versions

## README

# bpk-component-icon

> Backpack icon components.

## Installation

```sh
npm install bpk-component-icon --save-dev
```

## Basic usage

```js
import React from 'react';
import BpkSmallFlightIcon from 'bpk-component-icon/sm/flight';
import BpkLargeAccessibilityIcon from 'bpk-component-icon/lg/accessibility';

import './icons.scss';

export default () => (
  <div>
    <BpkSmallFlightIcon className="abc-icon__flight" />
    <BpkLargeAccessibilityIcon className="abc-icon__a11y" />
  </div>
);
```

*`icons.scss`:*
```scss
@import '~bpk-mixins';

.abc-icon__flight {
  fill: currentColor; // see https://css-tricks.com/currentcolor/
}

.abc-icon__a11y {
  fill: $bpk-color-sky-blue;
}
```

### Aligning to BpkButton components

```js
import React from 'react';
import BpkButton from 'bpk-component-button';
import BpkSmallFlightIcon from 'bpk-component-icon/sm/flight';
import BpkLargeAccessibilityIcon from 'bpk-component-icon/lg/accessibility';
import { withButtonAlignment, withLargeButtonAlignment } from 'bpk-component-icon';

const AlignedBpkSmallFlightIcon = withButtonAlignment(BpkSmallFlightIcon);
const AlignedBpkLargeAccessibilityIcon = withLargeButtonAlignment(BpkLargeAccessibilityIcon);

export default () => (
  <div>
    <BpkButton>
      <AlignedBpkSmallFlightIcon />
    </BpkButton>
    <BpkButton large>
      <AlignedBpkLargeAccessibilityIcon />
    </BpkButton>
  </div>
);
```

### RTL support

```js
import React from 'react';
import BpkSmallFlightIcon from 'bpk-component-icon/sm/flight';
import { withRtlSupport } from 'bpk-component-icon';

import './icons.scss';

const RtlSupportedBpkSmallFlightIcon = withRtlSupport(BpkSmallFlightIcon);

export default () => (
  <RtlSupportedBpkSmallFlightIcon className="abc-icon__flight" />
);
```

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