Icon

• The Icon component is a versatile and customizable component designed to render scalable vector icons within React Native applications. It leverages a predefined set of icons from the Minis SDK, allowing developers to easily implement and customize icons throughout their applications.

  The flexibility of the component is showcased in its ability to adjust color, size, and alignment dynamically based on provided props, ensuring that the icons fit seamlessly within various design contexts. Special attention is given to the visual alignment of icons, with an optional autoAlignment feature that adjusts icons that may appear off-center due to their unique shapes.

• 
  

  <Icon
    name="checkmark"
    color="primary"
    size="l"
    autoAlignment
  />

Integration

Requirements:

• Ensure your project environment is set up with access to @shopify/shop-minis-platform-sdk. See the quickstart for requirements and to set up a Shop Mini.

Step 1: Importing the Component

Import the Icon component within your component file where it's needed:

import { Icon } from '@shopify/shop-minis-platform-sdk';

Step 2: Using the Icon Component

Deploy the Icon component by specifying the name of the icon, along with optional props for color, size, and style to customize as per the requirements:

<Icon
  name="heart"
  color="error"
  size="m"
  style={{ margin: 10 }}
  autoAlignment={true}
/>

Examples

Basic Usage:

<Icon
  name="notification"
  color="foregrounds-secondary"
  size="s"
/>

With Custom Styles and Alignment Adjustments:

<Icon
  name="play"
  color="foregrounds-regular"
  size="xl"
  style={{ paddingHorizontal: 5 }}
  autoAlignment
/>

The Icon component provides developers with a powerful tool to enhance user interface design by incorporating intuitive and visually appealing icons. Its ease of integration and customization makes it suitable for a wide array of applications, improving the overall user experience.

Additional Components

• useTheme: Used to access the current theme's colors for icon coloring.
• iconsMap: A mapping of icon names to their respective React component types, enabling the dynamic rendering of various icons.

Props

• color (IconColor): The color of the icon to render.
• name (IconName): The name of the icon to render (check the list of icons name through Icons demo - QR code).
• size (IconSize): The size of the icon to render.
• style: Additional styles to apply to the icon.
• autoAlignment (boolean): Optionally align the icon in a more visually appealing way. This helps with icons that are not weighted evenly such as heart or play. You may wish to disable this if you have multiple icons close to each other and the alignment looks wrong.

For more details on the props, please refer to the Icon Props.