9.2.9 • Published 3 years ago

bpk-component-icon-css v9.2.9

Weekly downloads
188
License
Apache-2.0
Repository
github
Last release
3 years ago

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

3 years ago

9.2.7

3 years ago

9.2.5

3 years ago

9.2.4

3 years ago

9.2.2

3 years ago

9.2.1

3 years ago

9.1.17

3 years ago

9.1.14

3 years ago

9.1.11

3 years ago

9.1.12

3 years ago

9.1.5

4 years ago

9.1.3

4 years ago

9.1.2

4 years ago

9.1.1

4 years ago

9.0.13

4 years ago

9.0.10

4 years ago

9.0.8

4 years ago

9.0.7

4 years ago

9.0.6

4 years ago

9.0.5

4 years ago

9.0.4

4 years ago

9.0.3

4 years ago

9.0.2

4 years ago

9.0.1

4 years ago

8.4.5

4 years ago

8.4.7

4 years ago

9.0.0

4 years ago

8.4.4

4 years ago

8.4.3

4 years ago

8.4.2

4 years ago

8.4.1

4 years ago

8.4.0

4 years ago

8.3.25

4 years ago

8.3.26

4 years ago

8.3.24

4 years ago

8.3.23

4 years ago

8.3.22

4 years ago

8.3.21

4 years ago

8.3.20

4 years ago

8.3.19

4 years ago

8.3.18

4 years ago

8.3.17

4 years ago

8.3.15

4 years ago

8.3.16

4 years ago

8.3.14

4 years ago

8.3.13

4 years ago

8.3.12

4 years ago

8.3.11

4 years ago

8.3.10

4 years ago

8.3.9

4 years ago

8.3.8

4 years ago

8.3.7

5 years ago

8.3.6

5 years ago

8.3.5

5 years ago

8.3.4

5 years ago

8.3.2

5 years ago

8.3.3

5 years ago

8.2.30

5 years ago

8.2.29

5 years ago

8.2.28

5 years ago

8.2.27

5 years ago

8.2.26

5 years ago

8.2.24

5 years ago

8.2.23

5 years ago

8.2.22

5 years ago

8.2.21

5 years ago

8.2.20

5 years ago

8.2.19

5 years ago

8.2.17

5 years ago

8.2.16

5 years ago

8.2.15

5 years ago

8.2.10

5 years ago

8.2.9

5 years ago

8.2.8

5 years ago

8.2.6

5 years ago

8.2.5

5 years ago

8.2.4

5 years ago

8.2.3

5 years ago