bpk-component-icon

bpk-component-icon

Backpack icon components.

Note: All icon components are generated using the react-svg-loader cli tool. Whilst this alleviates the need to hand crank every component, it limits the ability to encapsulate styling options and default fill color. See the examples below on how to overcome these limitations.

Installation

npm install bpk-component-icon --save

Basic usage

import React from 'react'
import TOKENS from 'bpk-tokens/tokens/base.common'
import BpkSmallFlightIcon from 'bpk-component-icon/sm/flight'
import BpkLargeAccessibilityIcon from 'bpk-component-icon/lg/accessibility'

export default MyComponent = () => (
  <div>
    <BpkSmallFlightIcon fill={TOKENS.colorBlue500} />
    <BpkLargeAccessibilityIcon fill={TOKENS.colorGray700} />
  </div>
)

Note: Due to the way that they are generated, there are no prop types defined on any of the icon components. Any props that you pass through will be rendered directly to the DOM.

Aligning to BpkButton components

import React from 'react'
import BpkButton from 'bpk-component-button'
import TOKENS from 'bpk-tokens/tokens/base.common'
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 MyComponent = () => (
  <BpkButton>
    <AlignedBpkSmallFlightIcon fill={TOKENS.colorBlue500} />
    <AlignedBpkLargeAccessibilityIcon fill={TOKENS.colorGray700} />
  </BpkButton>
)

RTL support

import React from 'react'
import BpkButton from 'bpk-component-button'
import TOKENS from 'bpk-tokens/tokens/base.common'
import BpkSmallFlightIcon from 'bpk-component-icon/sm/flight'
import { withRtlSupport } from 'bpk-component-icon'

const RtlSupportedBpkSmallFlightIcon = withRtlSupport(BpkSmallFlightIcon)

export default MyComponent = () => (
  <div>
    <RtlSupportedBpkSmallFlightIcon fill={TOKENS.colorBlue500} />
  </div>
)