Graphics

Storybook

Figma Demo

Variations

The Graphic component is offered in three sizes, large (lg), default, and small (sm).

Component Specs

API

• size: string | Default: 'default'
  Sets the size of the broadcast message.

• graphicName: typeof SvelteComponent

• title: string | Default: ''
  The title of the graphic for accessibility.

• testId: string | Default: ''
  Test id for the component.

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" title="Welcome" />

Types

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