### Install svelte-component-to-image

Source: https://github.com/stephengunn/svelte-component-to-image/blob/master/README.md

Installs the svelte-component-to-image package as a development dependency using pnpm.

```bash
pnpm add -D svelte-component-to-image
```

--------------------------------

### Svelte Component Example

Source: https://github.com/stephengunn/svelte-component-to-image/blob/master/README.md

A basic Svelte component designed for image rendering. It includes the required `<svelte:options css="injected" />` and demonstrates passing props for dynamic content. The CSS is styled to be compatible with Satori.

```svelte
<svelte:options css="injected" />

<script lang="ts">
	let { text = 'hello' }: { text: string } = $props();
</script>

<div id="container">
	<h1>
		{text} world!
	</h1>
</div>

<style>
	* {
		display: flex; /* if you're having problems with satori errors, this line can really help */
	}
	#container {
		width: 1200px;
		height: 600px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		background: rgb(63, 94, 251);
		background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
	}
	h1 {
		color: red;
		font-size: 75px;
	}
</style>
```

--------------------------------

### Generate Image from Svelte Component

Source: https://github.com/stephengunn/svelte-component-to-image/blob/master/README.md

This example shows how to generate a PNG image from a Svelte component. It configures rendering options such as dimensions, component props, and custom fonts. The generated image is returned as a response, with caching headers applied for non-development environments.

```TS
import { error } from '@sveltejs/kit'
import { dev } from '$app/environment';
import type { RequestHandler } from './$types'

// Svelte Component To Image
import { image_from_component, type RenderOptions } from 'svelte-component-to-image'

// Normal .svelte component
import HelloWorld from './HelloWorld.svelte'

export const GET: RequestHandler = (async ({url}) => {
    try {
        const options: RenderOptions = {
            width: 1200,
            height: 600,
            props: {
                text: url.searchParams.get('text') ?? 'text not found'
            },
            fonts: [
                {
                    name: 'Typewriter',
                    url: `${url.origin}/TYPEWR__.TTF`,
                    weight: 400,
                    style: 'normal'
                }
            ],
            debug: false // you can omit this or set it to true to see logs of data, it can help for debug edge cases
        }

        // pass the component and options to the package
        const image    = await image_from_component(HelloWorld, options)
        const response = new Response(image)
        if(!dev){
            // caching on dev will make it hard to see iterations
            response.headers.append('Content-Type', 'image/png')
            response.headers.append('Cache-Control', 's-maxage=604800, stale-while-revalidate=604800')
        }
        return response
    } catch (e) {
        console.error(e)
        throw error(500, 'Error trying to generate image from component.')
    }
}) satisfies RequestHandler
```

--------------------------------

### Svelte Component to Image Library - Core Functionality

Source: https://github.com/stephengunn/svelte-component-to-image/blob/master/README.md

Provides an overview of the primary function `image_from_component` used to convert Svelte components into images. It details the expected parameters, including the Svelte component itself and rendering options.

```APIDOC
image_from_component(component: SvelteComponent, options: RenderOptions): Promise<Buffer>
  Converts a Svelte component into an image buffer.

  Parameters:
    component: The Svelte component to render.
    options: Configuration object for rendering.
      width: (number) The desired width of the output image.
      height: (number) The desired height of the output image.
      props: (object) Props to pass to the Svelte component.
      fonts: (Array<Font>) An array of font objects to be used during rendering.
        name: (string) The name to reference the font by in CSS.
        url: (string) The URL of the font file (TTF, OTF, WOFF).
        weight: (number | 'normal' | 'bold') The font weight.
        style: (string) The font style (e.g., 'normal', 'italic').
      debug: (boolean) If true, logs detailed information for debugging.

  Returns:
    Promise<Buffer>: A Promise that resolves to a Buffer containing the generated image data (typically PNG).
```

--------------------------------

### Embedding Images in Components

Source: https://github.com/stephengunn/svelte-component-to-image/blob/master/README.md

Demonstrates how to include images within a Svelte component that will be rendered into an image. It shows the standard HTML `<img>` tag usage with `src`, `width`, and `height` attributes.

```HTML
<img src="https://picsum.photos/200/300" width="200" height="300" />
```

--------------------------------

### Using Fonts in Image Generation

Source: https://github.com/stephengunn/svelte-component-to-image/blob/master/fonts/README.md

Demonstrates how to reference custom fonts within the `RenderOptions` for image generation. It specifies the font name, its URL, weight, and style.

```js
const options: RenderOptions = {
  fonts: [
    {
      name: 'YourFontName',
      url: `${url.origin}/your-font.ttf`,
      weight: 400,
      style: 'normal'
    }
  ]
};
```

--------------------------------

### Configure Vite Plugin

Source: https://github.com/stephengunn/svelte-component-to-image/blob/master/README.md

Integrates the svelte-component-to-image Vite plugin into your vite.config.js or vite.config.ts file to handle native bindings and improve developer experience.

```javascript
import { sveltekit } from '@sveltejs/kit/vite';
import { svelte_component_to_image } from 'svelte-component-to-image/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [sveltekit(), svelte_component_to_image()]
});
```

--------------------------------

### Svelte Component to Image - Font Handling

Source: https://github.com/stephengunn/svelte-component-to-image/blob/master/README.md

Details the process and considerations for using custom fonts within Svelte components when generating images. It explains how to import fonts, their supported formats, and potential issues with font compatibility and licensing.

```APIDOC
Font Object Structure:
  {
    name: string, // CSS font-family name
    url: string,  // URL to the font file (local or remote)
    weight?: number | 'normal' | 'bold',
    style?: 'normal' | 'italic'
  }

Supported Formats:
  - TTF
  - OTF
  - WOFF

Unsupported Formats:
  - WOFF2

Usage Notes:
  - Local fonts in the `/static` directory can be loaded using `${url.origin}/` if `url` is available in the endpoint.
  - Importing a large number of fonts can negatively impact server performance.
  - Font Squirrel's Webfont Generator is recommended for converting fonts to web-safe formats.
  - Variable weight fonts require generating separate files for each weight/style.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.