Icon

Use the <Icon> component to easily render <svg> icons.

Avoid passing onClick handlers to the Icon component. If you need a clickable icon, use IconButton instead.

Import

import { Icon } from '@sajari-ui/core';

Usage

Use an icon by passing the name props. This name must match an icon key in theme.icons. By default, the icon inherits the fontSize and color of it's parent.

<Flex space="space-x-4">
  {/* Default size is 1em => 16px */}
  <Icon name="arrow-up" />
  {/* Use the `size` prop to change the icon size */}
  <Icon name="arrow-up" size="xl" />
  {/* Use the `textColor` prop to change the icon color */}
  <Icon name="arrow-up" textColor="text-red-500" />
</Flex>

All Icons

Here's a list of the default icons included in Sajari UI. Hover the icon to see their respective name.

🚨 Resizing

While it's possible to set the size prop and resize an icon, this is not recommended due to rendering issues, often resulting in half pixels, etc. Where possible, omit the size prop altogether and add an icon from Nucleo in the appropriate size. If you must resize an icon, try to do so at 0.5x, 2x or 3x the original size - e.g. xl for the default icons (16px) icons and lg for small icons (12px). Here's the size prop mapping:

Adding icons

Icons should be sourced from our chosen icon set, Nucleo. The default icon size is 16px and in glyph style. The process is:

• Find an icon in the Nucleo app you want.
• Export it to /src/assets/icons in the package.
• Make sure it's named correctly. Often the icons come out of Nucleo with funky names that make no sense. Name it appropriately, using kebab case and remembering to add the correct prefix in the table above for it's size.
• Run yarn build:icons in the root of the project. This will compress the SVG, extract the viewBox, width and height prop and add them to components/Icon/icons.ts.
• Your new icon will be available for the name prop using the filename of the icon.

Props

Icon component composes Box so you can pass all Box props.