Icon

Component

Storybook

Figma Demo

Guidelines

Sizes

Icons are offered in four sizes that vary by 4px increments:

• xs: 12px
• sm: 16px
• base: 20px
• lg: 24px

Variations

Most icons are available in either solid or outline variations.

Usage

Design:

• The icon picker component will allow you to insert any of our current icons in one of four sizes via the instance swap feature.
• When paired with text, icons should be 4px less than the line height of their companion label. For example, a cart icon adjacent to a “Cart” label that is 16px size with 24px line height would be the base 20px size.

Dev:

• As an icon:

  <Icon iconName="{ChevronDown}" color="brand" size="icon-base" title="Open Menu" />

Best Practices

• Whenever possible, pair an icon with a meaningful label. Users shouldn’t have to infer meaning based on an icon alone. • Developers should use the title prop every time a label is not present and add it to any meaningful icon.

Component Specs

API

• class: string | Default: undefined
  Extra classes provided to the component.

• color: IconColors | Default: currentColor
  The color of the icon.

• href: string | Default: undefined
  The href of the icon.

• iconName: typeof SvelteComponent | Default: undefined
  The icon type of the icon.

• linkClasses: string | Default: undefined
  The classes of the link.

• size: IconSizes | Default: icon-base
  The size of the icon.

• testId: string | Default: 'test-icon'
  The test id of the icon.

• title: string | Default: undefined
  The title of the icon.

Example

<script>
	import { Icon } from '@getprovi/craft-svelte';
	import { ChevronDown, ChevronLeft } from '@getprovi/craft-svelte-icons';
</script>

<Icon iconName="{ChevronDown}" color="brand" size="icon-base" title="Open Menu" />
<Icon href="/" iconName="{ChevronLeft}" color="brand" size="icon-base" title="Go Home" />

<!-- If you have performance issues, you can import the icons individually -->
<script>
	import ChevronDown from '@getprovi/craft-svelte-icons/ChevronDown';
	import ChevronLeft from '@getprovi/craft-svelte-icons/ChevronLeft';
</script>

<Icon iconName="{ChevronDown}" color="brand" size="icon-base" title="Open Menu" />
<Icon href="/" iconName="{ChevronLeft}" color="brand" size="icon-base" title="Go Home" />

Types

interface Props {
	class?: string;
	color?: IconColors;
	href?: string;
	iconName?: typeof SvelteComponent;
	linkClasses?: string;
	size?: IconSizes | 'custom';
	testId?: string;
	title?: string | number | undefined;
}

type IconColors =
	| 'currentColor'
	| 'brand'
	| 'brand-active'
	| 'brand-light'
	| 'critical'
	| 'success'
	| 'disabled'
	| 'info'
	| 'neutral'
	| 'black'
	| 'white';

const sizeMap = {
	'icon-xs': 12,
	'icon-sm': 16,
	'icon-base': 20,
	'icon-lg': 24
};

type IconSizes = keyof typeof sizeMap | 'icon-sm desktop:icon-base' | 'custom';