Icon

component

Examples

• Example icons

  React

  import React from 'react';
  
  import {
    Icon,
    Screen,
    ScrollView,
    Navigator,
    reactExtension,
  } from '@shopify/ui-extensions-react/point-of-sale';
  
  const SmartGridModal = () => {
    return (
      <Navigator>
        <Screen name="Image" title="Image Example">
          <ScrollView>
            <Icon name="call" size="s" tone="icon-success" />
            <Icon name="card-reader" size="l" />
            <Icon name="circle-cancel" size="xl" tone="icon-critical" />
            <Icon name="orders-filled" size="s" />
            <Icon name="star" size="m" />
          </ScrollView>
        </Screen>
      </Navigator>
    );
  };
  
  export default reactExtension('pos.home.modal.render', () => (
    <SmartGridModal />
  ));
  

  TS

  import {
    Navigator,
    Screen,
    ScrollView,
    Icon,
    IconName,
    IconSize,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';
  
  export default extension('pos.home.modal.render', (root, api) => {
    const iconsData: {name: IconName; size: IconSize}[] = [
      {name: 'call', size: 's', tone: 'icon-success'},
      {name: 'card-reader', size: 'l'},
      {name: 'circle-cancel', size: 'xl', tone: 'icon-critical'},
      {name: 'orders-filled', size: 's'},
      {name: 'star', size: 'm'},
    ];
    const scrollView = root.createComponent(ScrollView);
  
    iconsData.forEach((iconData) => {
      const icon = root.createComponent(Icon, {
        name: iconData.name,
        size: iconData.size,
      });
      scrollView.append(icon);
    });
  
    const screen = root.createComponent(Screen, {
      name: 'Icon',
      title: 'Icon Example',
    });
    screen.append(scrollView);
  
    const navigator = root.createComponent(Navigator);
    navigator.append(screen);
  
    root.append(navigator);
  });