Nonchalant Programming Master

    bpk-component-icon

    9.2.9 • Public • Published

    bpk-component-icon

    Backpack icon components.

    Installation

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

    Basic usage

    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:

    @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

    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

    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" />
    );

    Keywords

    none

    Install

    npm i bpk-component-icon

    DownloadsWeekly Downloads

    2,752

    Version

    9.2.9

    License

    Apache-2.0

    Unpacked Size

    391 kB

    Total Files

    544

    Last publish

    Collaborators

    • frugoman
    • zgeor
    • anambl
    • marianeumayer-skyscanner
    • ojcurt
    • mattface