Graphic

Component

Storybook

Figma Demo

Guidelines

The graphic component exposes vector graphics from our illustration set in either a base size (250px square) or sm size (150px square).

Sizes

Graphics are offered in two square sizes:

• sm: 150px
• base: 250px

Usage

Use Graphic when a bit of brand personality is needed when communicating something to a user.

Best Practices

Graphics should typically be paired with copy so that the meaning is unambiguous.

Accessibility

Ensure that alt text is part of all Graphics used throughout Provi.

Component Specs

API

• graphicName: typeof SvelteComponent | Default: undefined
  The name of the graphic.

• size: default | sm
  The size of the graphic.

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

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

Example

<script>
	import { Graphic } from '@getprovi/craft-svelte';
	import { Celebration, Welcome } from '@getprovi/craft-svelte-graphics';
</script>

<Graphic graphicName="{Celebration}" />
<Graphic graphicName="{Welcome}" size="sm" />

<!-- If you have performance issues, you can import the graphics individually -->
<script>
	import Celebration from '@getprovi/craft-svelte-graphics/Celebration';
	import Welcome from '@getprovi/craft-svelte-graphics/Welcome';
</script>

<Graphic graphicName="{Celebration}" />
<Graphic graphicName="{Welcome}" size="sm" />

Types

interface Props {
	graphicName?: typeof SvelteComponent;
	size?: 'default' | 'sm' | undefined;
	testId?: string;
	title?: string | number | undefined;
}