How to use the gestalt.Icon.icons function in gestalt

To help you get started, we’ve selected a few gestalt 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.

github pinterest / gestalt / test / containers / Icon.a11y.js View on Github external
export default function IconA11Y() {
  return (
    <div>
      {Icon.icons.map((iconName, idx) => (
        <IconType iconName={iconName} key={idx} />
      ))}
    </div>
  );
}
github pinterest / gestalt / docs / src / Icon.doc.js View on Github external
name="Example:"
    defaultCode={`
<Box alignItems="center" display="flex">
  <Box marginRight={1} padding={1}>
    <Icon icon="pin" accessibilityLabel="Pin" color="darkGray" />
  </Box>
  <Text align="center" color="darkGray" weight="bold">
    Pinterest
  </Text>
</Box>
`}
  />
);

card(
  <Combination id="iconCombinations" name="Icon Combinations" icon={Icon.icons}>
    {props => (
      <Icon color="darkGray" accessibilityLabel="" size={32} {...props} />
    )}
  </Combination>
);

card(
  <Combination
    id="sizeColorCombinations"
    name="Size & Color Combinations"
    size={[16, 24, 32]}
    color={['gray', 'darkGray', 'red']}
  >
    {(props, i) => (
      <Icon key={i} icon="heart" accessibilityLabel="" {...props} />
    )}
github pinterest / gestalt / docs / src / Icon.doc.js View on Github external
name: 'accessibilityLabel',
        type: 'string',
        required: true,
        description:
          'String that clients such as VoiceOver will read to describe the element. Always localize the label.',
        href: 'iconWithLabel',
      },
      {
        name: 'color',
        type: `"blue" | "darkGray" | "eggplant" | "gray" | "green" | "lightGray" | "maroon" | "midnight" | "navy" | "olive" | "orange" | "orchid" | "pine" | "purple" | "red" | "watermelon" | "white"`,
        defaultValue: 'gray',
        href: 'sizeColorCombinations',
      },
      {
        name: 'icon',
        type: Icon.icons.map(name => `'${name}'`).join(' | '),
        description: `This allows us to type check for a valid icon name based on the keys from the list of icons shown below.`,
        href: 'iconCombinations',
      },
      {
        name: 'size',
        type: `number | string`,
        description: `Use a number for pixel sizes or a string for percentage based sizes`,
        defaultValue: 16,
        href: 'sizeColorCombinations',
      },
      {
        name: 'inline',
        type: 'boolean',
        defaultValue: false,
      },
      {

gestalt

A set of React UI components which enforce Pinterest’s design language

Apache-2.0
Latest version published 13 hours ago

Package Health Score

90 / 100
Full package analysis