How to use the bpk-component-icon.alignToButton function in bpk-component-icon
To help you get started, we’ve selected a few bpk-component-icon examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
Skyscanner / backpack / packages / bpk-docs / src / pages / WebButtonsPage / ButtonsPage.js View on Github 
import TestBpkSmallSearchIcon from 'bpk-component-icon/sm/search';
import TestBpkLargeSearchIcon from 'bpk-component-icon/lg/search';
import BpkLoadingButton from 'bpk-component-loading-button';
import BpkRouterLink from 'bpk-component-router-link';
import buttonReadme from 'bpk-component-button/README.md';
import loadingButtonReadme from 'bpk-component-loading-button/README.md';
import { cssModules } from 'bpk-react-utils';
import * as ROUTES from '../../constants/routes';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import Paragraph from '../../components/Paragraph';
import Code from '../../components/Code';
import STYLES from './buttons-page.scss';
const AlignedBpkSmallArrowIcon = alignToButton(TestBpkSmallArrowIcon);
const AlignedBpkLargeArrowIcon = alignToLargeButton(TestBpkLargeArrowIcon);
const AlignedBpkSmallTrashIcon = alignToButton(TestBpkSmallTrashIcon);
const AlignedBpkLargeTrashIcon = alignToLargeButton(TestBpkLargeTrashIcon);
const AlignedBpkSmallHelpIcon = alignToButton(TestBpkSmallHelpIcon);
const AlignedBpkLargeHelpIcon = alignToLargeButton(TestBpkLargeHelpIcon);
const AlignedBpkSmallSearchIcon = alignToButton(TestBpkSmallSearchIcon);
const AlignedBpkLargeSearchIcon = alignToLargeButton(TestBpkLargeSearchIcon);
const getClassName = cssModules(STYLES);
const buttonContainerClassName = getClassName(
'bpkdocs-buttons-page__button-container',
);
const buttonClassName = getClassName('bpkdocs-buttons-page__button');
class LoadingButtonContainer extends Component<{}, { loading: boolean }> {
constructor() {import { cssModules } from 'bpk-react-utils';
import * as ROUTES from '../../constants/routes';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import Paragraph from '../../components/Paragraph';
import Code from '../../components/Code';
import STYLES from './buttons-page.scss';
const AlignedBpkSmallArrowIcon = alignToButton(TestBpkSmallArrowIcon);
const AlignedBpkLargeArrowIcon = alignToLargeButton(TestBpkLargeArrowIcon);
const AlignedBpkSmallTrashIcon = alignToButton(TestBpkSmallTrashIcon);
const AlignedBpkLargeTrashIcon = alignToLargeButton(TestBpkLargeTrashIcon);
const AlignedBpkSmallHelpIcon = alignToButton(TestBpkSmallHelpIcon);
const AlignedBpkLargeHelpIcon = alignToLargeButton(TestBpkLargeHelpIcon);
const AlignedBpkSmallSearchIcon = alignToButton(TestBpkSmallSearchIcon);
const AlignedBpkLargeSearchIcon = alignToLargeButton(TestBpkLargeSearchIcon);
const getClassName = cssModules(STYLES);
const buttonContainerClassName = getClassName(
'bpkdocs-buttons-page__button-container',
);
const buttonClassName = getClassName('bpkdocs-buttons-page__button');
class LoadingButtonContainer extends Component<{}, { loading: boolean }> {
constructor() {
super();
this.state = {
loading: false,
};
}import BpkLoadingButton from 'bpk-component-loading-button';
import BpkRouterLink from 'bpk-component-router-link';
import buttonReadme from 'bpk-component-button/README.md';
import loadingButtonReadme from 'bpk-component-loading-button/README.md';
import { cssModules } from 'bpk-react-utils';
import * as ROUTES from '../../constants/routes';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import Paragraph from '../../components/Paragraph';
import Code from '../../components/Code';
import STYLES from './buttons-page.scss';
const AlignedBpkSmallArrowIcon = alignToButton(TestBpkSmallArrowIcon);
const AlignedBpkLargeArrowIcon = alignToLargeButton(TestBpkLargeArrowIcon);
const AlignedBpkSmallTrashIcon = alignToButton(TestBpkSmallTrashIcon);
const AlignedBpkLargeTrashIcon = alignToLargeButton(TestBpkLargeTrashIcon);
const AlignedBpkSmallHelpIcon = alignToButton(TestBpkSmallHelpIcon);
const AlignedBpkLargeHelpIcon = alignToLargeButton(TestBpkLargeHelpIcon);
const AlignedBpkSmallSearchIcon = alignToButton(TestBpkSmallSearchIcon);
const AlignedBpkLargeSearchIcon = alignToLargeButton(TestBpkLargeSearchIcon);
const getClassName = cssModules(STYLES);
const buttonContainerClassName = getClassName(
'bpkdocs-buttons-page__button-container',
);
const buttonClassName = getClassName('bpkdocs-buttons-page__button');
class LoadingButtonContainer extends Component<{}, { loading: boolean }> {
constructor() {
super();import buttonReadme from 'bpk-component-button/README.md';
import loadingButtonReadme from 'bpk-component-loading-button/README.md';
import { cssModules } from 'bpk-react-utils';
import * as ROUTES from '../../constants/routes';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import Paragraph from '../../components/Paragraph';
import Code from '../../components/Code';
import STYLES from './buttons-page.scss';
const AlignedBpkSmallArrowIcon = alignToButton(TestBpkSmallArrowIcon);
const AlignedBpkLargeArrowIcon = alignToLargeButton(TestBpkLargeArrowIcon);
const AlignedBpkSmallTrashIcon = alignToButton(TestBpkSmallTrashIcon);
const AlignedBpkLargeTrashIcon = alignToLargeButton(TestBpkLargeTrashIcon);
const AlignedBpkSmallHelpIcon = alignToButton(TestBpkSmallHelpIcon);
const AlignedBpkLargeHelpIcon = alignToLargeButton(TestBpkLargeHelpIcon);
const AlignedBpkSmallSearchIcon = alignToButton(TestBpkSmallSearchIcon);
const AlignedBpkLargeSearchIcon = alignToLargeButton(TestBpkLargeSearchIcon);
const getClassName = cssModules(STYLES);
const buttonContainerClassName = getClassName(
'bpkdocs-buttons-page__button-container',
);
const buttonClassName = getClassName('bpkdocs-buttons-page__button');
class LoadingButtonContainer extends Component<{}, { loading: boolean }> {
constructor() {
super();
this.state = {
loading: false,
