bpk-component-icon

bpk-component-icon

Backpack icon components.

Installation

Check the main Readme for a complete installation guide.

Basic usage

import BpkSmallFlightIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/flight';
import BpkLargeAccessibilityIcon from '@skyscanner/backpack-web/bpk-component-icon/lg/accessibility';

import './icons.scss';

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

icons.scss:

@import '~@skyscanner/backpack-web/bpk-mixins/index.scss';

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

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

Aligning to BpkButton components

import { BpkButtonV2, SIZE_TYPES } from '@skyscanner/backpack-web/bpk-component-button';
import BpkSmallFlightIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/flight';
import BpkLargeAccessibilityIcon from '@skyscanner/backpack-web/bpk-component-icon/lg/accessibility';
import { withButtonAlignment, withLargeButtonAlignment } from '@skyscanner/backpack-web/bpk-component-icon';

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

export default () => (
  <div>
    <BpkButtonV2>
      <AlignedBpkSmallFlightIcon />
    </BpkButtonV2>
    <BpkButtonV2 size={SIZE_TYPES.large}>
      <AlignedBpkLargeAccessibilityIcon />
    </BpkButtonV2>
  </div>
);

RTL support

import BpkSmallFlightIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/flight';
import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';

import './icons.scss';

const RtlSupportedBpkSmallFlightIcon = withRtlSupport(BpkSmallFlightIcon);

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