@getprovi/craft-svelte-graphics

craft-svelte-graphics

A collection of SVG graphics as Svelte components, optimized for easy and efficient usage in your Svelte projects.

Installation

To install the craft-svelte-graphics package, use pnpm or your local package manager's install method:

pnpm i -D @getprovi/craft-svelte-graphics

Usage

There are two ways to use the graphics in your project:

1. Importing individual graphics

You can import individual graphics from the package and use them in your components. This will help you reduce the bundle size by only including the graphics you need.:

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

<Graphic graphicName={Celebration} />

2. Importing multiple graphics

You can also import all graphics from the package and use them in your components. If tree-shaking is not setup properly, this could include all graphics in your bundle, so it's recommended to use the individual method if you experience performance issues:

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

<Graphic graphicName={Celebration} />
<Graphic graphicName={Empty} />
<Graphic graphicName={Welcome} />

Available Graphics

See the graphic list for a full list of available graphics.