Quickstart: Flowbite Svelte Illustrations

pnpm i -D flowbite-svelte-illustrations

- Svelte 5
- TailwindCSS 4

<script lang="ts">
  import { A404NotFoundSmiley, A404NotFoundSmileyDark } from "flowbite-svelte-illustrations";
</script>

<div class="dark:hidden">
  <A404NotFoundSmiley />
</div>
<div class="hidden dark:block">
  <A404NotFoundSmileyDark />
</div>

export type TitleType = {
id?: string;
title?: string;
};

export type DescType = {
id?: string;
desc?: string;
};

import type { SVGAttributes } from 'svelte/elements';
interface Props extends SVGAttributes<SVGElement> {
color1?: string;
color2?: string;
color3?: string;
color4?: string;
// more colors depends on illustration
ariaLabel?: string;
class?: string;
height?: string;
title?: TitleType;
desc?: DescType;
};

- color1 = '#2563eb',
- color2 = '#9ab7f6',
- color3 = '#c8d8fa',
- color4 = '#d6e2fb',
  // more colors depends on illustration
- ariaLabel = <file name>,
- class: className = 'shrink-0 w-auto max-w-[16rem] h-40 text-gray-800 dark:text-white',
- height = '100',
- title,
- desc,
- ...restProps

<CreditCardPaymentReceipt
title={{id: "my-title", title:"Your title here"}}
desc={{id:"my-desc", desc:"Description here"}}
/>

<svg class="shrink-0 w-auto max-w-[16rem] text-gray-800 dark:text-white" aria-hidden="true" width="674" height="447" viewBox="0 0 674 447" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Credit Card Payment Receipt" aria-describedby="my-title my-desc" style="height: 100px;">
<title id="my-title">Your title here</title>
<desc id="my-desc">Description here</desc>
// more lines
</svg>