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