How to use the bpk-component-icon.withRtlSupport 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 / MapPage / MapPage.js View on Github 
import { withRtlSupport } from 'bpk-component-icon';
import mapReadme from 'bpk-component-map/README.md';
import iosScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/ios/default.png';
import androidScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/android/default.png';
import nativeMapReadme from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/README.md';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import IntroBlurb from '../../components/IntroBlurb';
import STYLES from './MapPage.scss';
const AlignedLandmarkIconLg = withRtlSupport(LandmarkIconLg);
const AlignedBusIconSm = withRtlSupport(BusIconSm);
const AlignedFoodIconSm = withRtlSupport(FoodIconSm);
const AlignedLeisureIconLg = withRtlSupport(LeisureIconSm);
const BpkMapWithScript = withGoogleMapsScript(BpkMap);
const API_KEY = process.env.GOOGLE_MAPS_API_KEY || '';
const MAP_URL = `https://maps.googleapis.com/maps/api/js?v=3.exp&key=${API_KEY}&libraries=geometry,drawing,places`;
const getClassName = cssModules(STYLES);
// Shibuya crossing, Tokyo.
const COORDINATES: BpkMapLatLong = {
latitude: 35.661777,
longitude: 139.704051,
};
class StatefulBpkMapMarkers extends Component<{}, { selected: number }> {
constructor() {
super();import BusIconSm from 'bpk-component-icon/sm/bus';
import FoodIconSm from 'bpk-component-icon/sm/food';
import LeisureIconSm from 'bpk-component-icon/sm/leisure';
import { withRtlSupport } from 'bpk-component-icon';
import mapReadme from 'bpk-component-map/README.md';
import iosScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/ios/default.png';
import androidScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/android/default.png';
import nativeMapReadme from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/README.md';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import IntroBlurb from '../../components/IntroBlurb';
import STYLES from './MapPage.scss';
const AlignedLandmarkIconLg = withRtlSupport(LandmarkIconLg);
const AlignedBusIconSm = withRtlSupport(BusIconSm);
const AlignedFoodIconSm = withRtlSupport(FoodIconSm);
const AlignedLeisureIconLg = withRtlSupport(LeisureIconSm);
const BpkMapWithScript = withGoogleMapsScript(BpkMap);
const API_KEY = process.env.GOOGLE_MAPS_API_KEY || '';
const MAP_URL = `https://maps.googleapis.com/maps/api/js?v=3.exp&key=${API_KEY}&libraries=geometry,drawing,places`;
const getClassName = cssModules(STYLES);
// Shibuya crossing, Tokyo.
const COORDINATES: BpkMapLatLong = {
latitude: 35.661777,
longitude: 139.704051,
};import LeisureIconSm from 'bpk-component-icon/sm/leisure';
import { withRtlSupport } from 'bpk-component-icon';
import mapReadme from 'bpk-component-map/README.md';
import iosScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/ios/default.png';
import androidScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/android/default.png';
import nativeMapReadme from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/README.md';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import IntroBlurb from '../../components/IntroBlurb';
import STYLES from './MapPage.scss';
const AlignedLandmarkIconLg = withRtlSupport(LandmarkIconLg);
const AlignedBusIconSm = withRtlSupport(BusIconSm);
const AlignedFoodIconSm = withRtlSupport(FoodIconSm);
const AlignedLeisureIconLg = withRtlSupport(LeisureIconSm);
const BpkMapWithScript = withGoogleMapsScript(BpkMap);
const API_KEY = process.env.GOOGLE_MAPS_API_KEY || '';
const MAP_URL = `https://maps.googleapis.com/maps/api/js?v=3.exp&key=${API_KEY}&libraries=geometry,drawing,places`;
const getClassName = cssModules(STYLES);
// Shibuya crossing, Tokyo.
const COORDINATES: BpkMapLatLong = {
latitude: 35.661777,
longitude: 139.704051,
};
class StatefulBpkMapMarkers extends Component<{}, { selected: number }> {
constructor() {import { withRtlSupport } from 'bpk-component-icon';
import LandmarkIconLg from 'bpk-component-icon/lg/landmark';
import BusIconLg from 'bpk-component-icon/lg/bus';
import FoodIconSm from 'bpk-component-icon/sm/food';
import BpkMap, {
BpkOverlayView,
BpkMapMarker,
MARKER_TYPES,
withGoogleMapsScript,
} from './index';
const BpkMapWithLoading = withGoogleMapsScript(BpkMap);
const AlignedLandmarkIconLg = withRtlSupport(LandmarkIconLg);
const AlignedBusIconLg = withRtlSupport(BusIconLg);
const AlignedFoodIconSm = withRtlSupport(FoodIconSm);
const StoryMap = props => {
const { children, language, ...rest } = props;
return (
<div style="{{">
{children}
</div>
);
};import { withRtlSupport } from 'bpk-component-icon';
import { setPlatformInLocalStorage } from '../../helpers/storage-helper';
import NavListFilter, { type Option as FilterOption } from './NavListFilter';
import STYLES from './NavList.scss';
import sortLinks from './links-sorter';
import {
type LinkPropType,
type CategoryPropType,
type Category,
} from './common-types';
const getClassName = cssModules(STYLES);
const ArrowIconWithRtl = withRtlSupport(ArrowIcon);
const NavLink = (props: LinkPropType) => {
const { children, route, tags, ...rest } = props;
if (route) {
return (
{children}import { withRtlSupport } from 'bpk-component-icon';
import { updateOnDirectionChange } from 'bpk-component-rtl-toggle';
import BpkNavigationBar, {
BpkNavigationBarIconButton,
} from 'bpk-component-navigation-bar';
import BpkNavigationStack, {
withNavigationStackState,
} from 'bpk-component-navigation-stack';
import BpkButton from 'bpk-component-button';
import { cssModules } from 'bpk-react-utils';
import STYLES from './NavigationStackPage.scss';
const getClassName = cssModules(STYLES);
const ArrowIconWithRtl = withRtlSupport(ArrowIcon);
const ArrowRightIconWithRtl = withRtlSupport(ArrowRightIcon);
const RtlAwareNavigationStack = updateOnDirectionChange(BpkNavigationStack);
export const StatefulNavigationStack = withNavigationStackState(
RtlAwareNavigationStack,
);
const BarAndStack = ({
views,
pushView,
popView,
className,
}: {
views: Array>,
pushView: ?(Element) => mixed,
popView: ?() => mixed,
className: ?string,
