open-index/open-npm huggingface dataset:
npm package: @svelte-parts/drop-file
Description: Drop files(s) or click to browse file system
Author: idris-maps
Latest version: 0.0.23

# `@svelte-parts/drop-file`

A component to upload files. Drop files or click it to browse the file system. Add the behavior to an exiting element or use the default component.

Try it out in the [svelte REPL](https://svelte.dev/repl/c1778c608f404c24afd11cbc322dbc8c?version=3.46.6)

## Install

```
npm install @svelte-parts/drop-file
```

## Usage

```html
<script lang="ts">
  import DropFile from '@svelte-parts/drop-file'

  const onDrop = (files: File[]) =>
    alert(`Files: ${files.map(d => d.name).join(', ')}`) 
</script>

<DropFile onDrop={onDrop} />
```

### With custom drop zone

```html
<script lang="ts">
  import DropFile from '@svelte-parts/drop-file'

  let fileOver = false

  const onDrop = (files: File[]) => {
    alert(`Files: ${files.map(d => d.name).join(', ')}`)
    fileOver = false
  }
</script>

<DropFile
  onDrop={onDrop}
  onEnter={() => fileOver = true}
  onLeave={() => fileOver = false}
>
  <div class={`drop-zone ${fileOver ? 'over' : ''}`}>
    {#if fileOver}
      <p>Drop it!</p>
    {:else}
      <p>Upload file</p>
    {/if}
  </div>
</DropFile>

<style>
  .drop-zone {
    display: grid;
    align-items: center;
    margin: auto;
    width: 200px;
    height: 100px;
    background-color: #ff3e00;
    color: white;
  }
  .over {
    background-color: white;
    color: #ff3e00;
    border: #ff3e00 solid 2px;
  }
  .drop-zone p {
    text-align: center;
  }
</style>
```

### Attributes

* `onDrop` returns an array of [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File)
* `onEnter` (optional) triggered when a file is over the drop zone
* `onLeave` (optional) triggered when no file is over the drop zone
npm package: @svelte-parts/editor
Description: Markdown editor and codemirror wrapper for svelte
Author: idris-maps
Latest version: 0.0.26

# `@svelte-parts/editor`

A markdown editor for svelte. Uses [codemirror](https://codemirror.net) and exposes a svelte wrapper so you can create your own editor.

[Demo](https://svelte-parts.surge.sh/editor)

Try it out in the [svelte REPL](https://svelte.dev/repl/dde94690de234afbbd8d657fdcb93dc8?version=3.46.6)

## Install

```
npm install @svelte-parts/editor
```

## Markdown editor usage

```html
<script>
 import Editor from '@svelte-parts/editor'
</script>

<Editor />
```

### Properties

* `onChange: (value: string) => void`
* `initialValue: string`
* `theme: string` (see below)

All properties are optional

### CSS

You must use the codemirror css. The editor is unusable without it. How to include it is up to you.

1. You can import it directly in the file, if your setup allows it. If you use rollup, you need a plugin such as [`rollup-plugin-css-only`](https://github.com/thgh/rollup-plugin-css-only)

```html
<script>
  import Editor from '@svelte-parts/editor'
  import 'codemirror/lib/codemirror.css'
</script>

<Editor />
```

2. Or copy the file from `node_modules/codemirror/lib/codemirror.css` and include it directly in `index.html`

```html
<link rel='stylesheet' href='/codemirror.css'>
```

### Themes

The editor works with the default css file. It is however possible to add themes. Two are provided with this package:

* `@svelte-parts/editor/md-dark.css`
* `@svelte-parts/editor/md-light.css`

The theme must be declared to the component with the `theme` property. Example:

```html
<script>
  import Editor from '@svelte-parts/editor'
  import 'codemirror/lib/codemirror.css'
  import '@svelte-parts/editor/md-dark.css'
</script>

<Editor theme="md-dark" />
```

Find more codemirror themes [here](https://codemirror.net/demo/theme.html).

## Code mirror wrapper usage

```html
<script>
  import CodeMirror from '@svelte-parts/editor/codemirror'
  import 'codemirror/lib/codemirror.css'

  const config = {
    lineNumbers: true,
    lineWrapping: true,
  }
</script>

<CodeMirror config={config} />
```

### Properties

* `config: EditorConfiguration`
* `accessEditor: (editor: EditorFromTextArea) => void | undefined`

See how the [markdown editor](https://github.com/idris-maps/svelte-parts/blob/master/packages/editor/Editor.svelte) is made for an example usage.
npm package: @svelte-parts/form
Description: Yet another svelte form component
Author: idris-maps
Latest version: 0.0.23

# `@svelte-parts/form`

Yet another form component.

The idea here is to define the fields in json. The form definition can then come from the server or be modified on the fly.

Try it out in the [svelte REPL](https://svelte.dev/repl/0cb7990827dd48dcabe40084a02c75f0?version=3.46.6)

## Install

```
npm install @svelte-parts/form
```

## Usage

```html
<script>
  import Form from '@svelte-parts/form'

  const fields = [
    { type: 'text', property: 'username', label: 'User name', pattern: '[a-z0-9-]+', minLength: 5 },
    { type: 'date', property: 'birthDate', label: 'Birth date' },
    { type: 'email', property: 'email', label: 'Email' },
    { type: 'checkbox', property: 'wantsSpam', label: 'Subscribe to the newsletter', value: true },
  ]
  const onSubmit = data => alert(JSON.stringify(data))
</script>

<Form fields={fields} onSubmit={onSubmit}>
```

### Properties

* `fields` the form definition. It is the only required field (see [type definition](https://github.com/idris-maps/svelte-parts/blob/master/packages/form/index.d.ts))
* `onSubmit` a callback triggered when the form is submitted
* `submitButton` is a string to use as a label for the submit button if you don not want to use the browser default
* `errorMessage` is a string that will be shown between the last form field and the submit button

### Types

```html
<script lang="ts">
  import type { Field } from '@svelte-parts/form'
  import Form from '@svelte-parts/form'

  const fields: Field[] = [
    { type: 'text', property: 'username', label: 'User name', pattern: '[a-z0-9-]+', minLength: 5 },
    { type: 'date', property: 'birthDate', label: 'Birth date' },
    { type: 'email', property: 'email', label: 'Email' },
    { type: 'checkbox', property: 'wantsSpam', label: 'Subscribe to the newsletter', value: true },
  ]
  const onSubmit = data => alert(JSON.stringify(data))
</script>

<Form fields={fields} onSubmit={onSubmit} />
```
npm package: @svelte-parts/form-builder
Description: UI to create forms
Author: idris-maps
Latest version: 0.0.23

# `@svelte-parts/form-builder`

UI to create form descriptions for [@svelte-parts/form](https://github.com/idris-maps/svelte-parts/tree/master/packages/form#svelte-partsform).

Try it out in the [svelte REPL](https://svelte.dev/repl/6bfa95a44ad74779851556f3e909b57e?version=3.46.6)

## Install

```
npm install @svelte-parts/form-builder
```

## Usage

```jsx
<script>
  import FormBuilder from '@svelte-parts/form-builder'
</script>

<FormBuilder
  onChange={d => console.log('CHANGED', d)}
  onSubmit={d => console.log('SUBMITTED', d)}
  ignoreFields={['password', 'color']}
/>
```

### Properties

* `onChange` a function taking an array of [`Fields`](https://github.com/idris-maps/svelte-parts/blob/master/packages/form/index.d.ts) triggered on every change
* `onSubmit` a function taking an array of [`Fields`](https://github.com/idris-maps/svelte-parts/blob/master/packages/form/index.d.ts) triggered when the user clicks on "Create form" (the button is only shown if this function is defined)
* `ignoreFields` fields that should not be proposed to the user. Depending on the context, you may not want to encourage creating a password field, for example.
npm package: @svelte-parts/icons
Description: svelte icons
Author: idris-maps
Latest version: 0.0.24

# @svelte-parts/icons

Icon components for svelte.

[Demo and list of all available icons](https://svelte-parts.surge.sh/icons)

Try it out in the [svelte REPL](https://svelte.dev/repl/b2d79abbdda848abb6b6c0cdb9d86024?version=3.46.6)

Collections:

* [feather icons](https://feathericons.com/) ([repo](https://github.com/feathericons/feather) - License: MIT)
* [maki](https://labs.mapbox.com/maki-icons/) ([repo](https://github.com/mapbox/maki) - License: CC0)
* [octicons](https://primer.style/octicons/) ([repo](https://github.com/primer/octicons) - License: MIT)

## Install

```
npm install @svelte-parts/icons
```

## Usage

```html
<script>
  import ActivityIcon from '@svelte-parts/icons/feather/activity'
  import AerialwayIcon from '@svelte-parts/icons/maki/aerialway'
  import AlertIcon from '@svelte-parts/icons/octicons/alert'
</script>

<h1>Inlined <ActivityIcon /> icons</h1>
<p> That keep the same size <AerialwayIcon /> as the text</p>
<button>Even here <AlertIcon /> in a button </button>
```

If you want to make it fit the container like SVG, set `inline` to `false`

```jsx
<div style="width:500px">
  <Icon inline={false}>
</div>
```
npm package: @svelte-parts/map
Description: Leaflet map components for svelte
Author: idris-maps
Latest version: 0.0.24

# @svelte-parts/map

Map components using [leaflet](https://leafletjs.com/). Lets you create very basic maps with tiles, markers and geojson. If you need something beyond that, use these components for inspiration and create your own. More about that below.

[Demo](https://svelte-parts.surge.sh/map)

Try it out in the [svelte REPL](https://svelte.dev/repl/df8688f5e13d4d8088d26acc6d55513e?version=3.46.6)

## Install

```
npm install @svelte-parts/map
```

## Usage

```html
<script>
  import Map from '@svelte-parts/map'
  import Marker from '@svelte-parts/map/marker'
  import Tiles from '@svelte-parts/map/tiles'
</script>

<Map width="100%" height="300px" lon={0} lat={51.5}>
  <Tiles />
  <Marker lon={0} lat={51.5} popup="Hello, I am a popup" />
</Map>
```

### `Map`

This is the wrapper. Other map components must be inside it.

**Properties**

* lat (default: 0)
* lon (default: 0)
* zoom (default: 5)
* width (default: `100%`)
* height (default: `100px`)

### `Tiles`

The background tiles.

**Properties**

* url (default: `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`)
* maxZoom (default: 19)
* attribution (default: `&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors`)

Find more tile providers [here](https://leaflet-extras.github.io/leaflet-providers/preview/).

### `Marker`

**Properties**

* lat (default: 0)
* lon (default: 0)
* popup (default: `undefined`)

### `Geojson`

**Properties**

* data (a [geojson](https://en.wikipedia.org/wiki/GeoJSON) object)
* style (optional styling, see [leaflet docs](https://leafletjs.com/reference-1.7.1.html#geojson-style))

## CSS

In order to see a map at all, you need to use the css file `node_modules/leaflet/dist/leaflet.css`. Add it to your project however you want.

**Important**: the folder `node_modules/leaflet/dist/images` needs to be served in your build from the same folder as the css file.

## Creating your own components

[Leaflet](https://leafletjs.com/) is a very capable library. These components barely scratch the surface of what you can do. The api and documentation are easy to get into. You may want to create your own components. Have a look at how I made the [Marker](https://github.com/idris-maps/svelte-parts/blob/master/packages/map/marker/Marker.svelte).

Access the leaflet map instance with:

```js
const { getMap } = getContext('leaflet_map')
const map = getMap()
```

Import the leaflet functions and properties you need to create new components.

The [Map component](https://github.com/idris-maps/svelte-parts/blob/master/packages/map/Map.svelte), to initialise the leaflet instance, is also straight forward. You may not need this library after all.
npm package: @svelte-parts/markdown
Description: Markdown blocks in svelte
Author: idris-maps
Latest version: 0.0.23

# `@svelte-parts/markdown`

For markdown blocks

[Demo](https://svelte-parts.surge.sh/markdown)

Try it out in the [svelte REPL](https://svelte.dev/repl/5366ed6cb7a4425eb6784edd1a3020be?version=3.46.6)

## Install

```
npm install @svelte-parts/markdown
```

## Usage

```jsx
<Markdown>
# Title

## List

1. one
2. two
3. three
</Markdown>
```

Uses [marked](https://github.com/markedjs/marked) to convert to HTML and is sanitized with [dompurify](https://github.com/cure53/DOMPurify). Both can be configured with the optional attributes:

* `dompurifyConfig` (type: `DOMPurify.Config`)
* `markedExtensions` (type: `MarkedExtension[]`)
* `markedOptions` (type: `MarkedOptions`)
npm package: @svelte-parts/modal
Description: Simple svelte modal
Author: idris-maps
Latest version: 0.0.23

# `@svelte-parts/modal`

A simple modal for svelte

[Demo](https://svelte-parts.surge.sh/modal)

Try it out in the [svelte REPL](https://svelte.dev/repl/9dc23be3526643d3ac99babe9c617b6b?version=3.46.6)

## Install

```
npm install @svelte-parts/modal
```

## Usage

```html
<script>
  import Modal from '@svelte-parts/modal'
  let open = false
</script>

<button on:click={() => open = true}>Demo</button>

<Modal open={open} onClose={() => open = false}>
  <div class="modal">
    <h1>Hello</h1>
    <p>from a modal</p>
    <p>Click outside of me to close</p>
  </div>
</Modal>

<style>
  .modal {
    background-color: white;
    padding: 2em;
    border-radius: 0.5em;
    min-width: 30vw;
  }
</style>
```
npm package: @svelte-parts/zoom
Description: Zoomable images for svelte
Author: idris-maps
Latest version: 0.0.23

# `@svelte-parts/zoom`

Allow pan and zoom on images. Uses [d3-zoom](https://github.com/d3/d3-zoom).

Try it out in the [svelte REPL](https://svelte.dev/repl/e90699c7159b434496159277a190c309?version=3.46.6)

## Install

```
npm install @svelte-parts/zoom
```

## Usage

### As `<img>`

```html
<script>
  import ZoomImg from '@svelte-parts/zoom'
</script>

<ZoomImg
  src="https://svelte.dev/tutorial/image.gif"
  alt="Rick Astley"
/>
```

#### Properties

* **src** (required)
* **alt** (required)
* **width** (optional)

### As `<svg>`

```html
<script>
  import ZoomSvg from '@svelte-parts/zoom/svg'
</script>

<ZoomSvg viewBox="0 0 98 118">
  <path d="m91.8 15.6c-10.9-15.7-32.6-20.3-48.2-10.4l-27.5 17.6c-7.5 4.7-12.7 12.4-14.2 21.1-1.3 7.3-.2 14.8 3.3 21.3-2.4 3.6-4 7.6-4.7 11.8-1.6 8.9.5 18.1 5.7 25.4 11 15.7 32.6 20.3 48.2 10.4l27.5-17.5c7.5-4.7 12.7-12.4 14.2-21.1 1.3-7.3.2-14.8-3.3-21.3 2.4-3.6 4-7.6 4.7-11.8 1.7-9-.4-18.2-5.7-25.5" fill="#ff3e00"/>
  <path d="m40.9 103.9c-8.9 2.3-18.2-1.2-23.4-8.7-3.2-4.4-4.4-9.9-3.5-15.3.2-.9.4-1.7.6-2.6l.5-1.6 1.4 1c3.3 2.4 6.9 4.2 10.8 5.4l1 .3-.1 1c-.1 1.4.3 2.9 1.1 4.1 1.6 2.3 4.4 3.4 7.1 2.7.6-.2 1.2-.4 1.7-.7l27.4-17.5c1.4-.9 2.3-2.2 2.6-3.8s-.1-3.3-1-4.6c-1.6-2.3-4.4-3.3-7.1-2.6-.6.2-1.2.4-1.7.7l-10.5 6.7c-1.7 1.1-3.6 1.9-5.6 2.4-8.9 2.3-18.2-1.2-23.4-8.7-3.1-4.4-4.4-9.9-3.4-15.3.9-5.2 4.1-9.9 8.6-12.7l27.5-17.5c1.7-1.1 3.6-1.9 5.6-2.5 8.9-2.3 18.2 1.2 23.4 8.7 3.2 4.4 4.4 9.9 3.5 15.3-.2.9-.4 1.7-.7 2.6l-.5 1.6-1.4-1c-3.3-2.4-6.9-4.2-10.8-5.4l-1-.3.1-1c.1-1.4-.3-2.9-1.1-4.1-1.6-2.3-4.4-3.3-7.1-2.6-.6.2-1.2.4-1.7.7l-27.4 17.5c-1.4.9-2.3 2.2-2.6 3.8s.1 3.3 1 4.6c1.6 2.3 4.4 3.3 7.1 2.6.6-.2 1.2-.4 1.7-.7l10.5-6.7c1.7-1.1 3.6-1.9 5.6-2.5 8.9-2.3 18.2 1.2 23.4 8.7 3.2 4.4 4.4 9.9 3.5 15.3-.9 5.2-4.1 9.9-8.6 12.7l-27.5 17.5c-1.7 1.1-3.6 1.9-5.6 2.5" fill="#fff"/>
</ZoomSvg>
```

#### Properties

* **viewBox** (required)
npm package: @svelte-put/async-stack
Description: type-safe and headless builder for async component stack
Author: Quang Phan
Latest version: 1.5.3

<div align="center">

# `@svelte-put/async-stack`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs]

Type-safe and headless async builder for async component stack (notification and modal/dialog systems, for example)

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```html
<script lang="ts">
  import { stack } from '@svelte-put/async-stack';

  // any Svelte component to render as
  import MyComponent from './MyComponent.svelte';

  // define somewhere global, reuse across app
  export const myStack = stack()
    // add a minimalistic variant config
    .addVariant('my', MyComponent)
    // add a verbose variant config
    .addVariant('special', {
      timeout: false,
      id: 'counter',
      component: MyComponent,
      props: {
        // inferred from Notification component
        special: true,
        content: 'A very special thing',
      },
    })
    // build the actual stack
    .build();

  onMount(async () => {
    // push a special item
    const pushed = myStack.push('special');

    // wait for some user action for the item
    // to be resolved (popped) from within the component
    const { userAction } = await pushed.resolution;

    // push another item with custom props
    notiStack.push('info', {
      props: {
        content: 'An example information',
      },
    });
  });
</script>

<!-- portal ->
<aside class="applicable class">
  {#each myStack.items as item (item.config.id)}
    <div use:myStack.actions.render={item}>
      <!-- StackItem instances rendered as direct children -->
    </div>
  {/each}
</aside>
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/async-stack/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/async-stack
[npm]: https://www.npmjs.com/package/@svelte-put/async-stack
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/async-stack?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/async-stack
[docs]: https://svelte-put.vnphanquang.com/docs/async-stack
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-put/avatar
Description: Component and utils for handling avatar
Author: Quang Phan
Latest version: 4.0.0

<div align="center">

# `@svelte-put/avatar`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs] [![repl.badge]][repl]

Svelte `Avatar` component and utilities for building avatars with builtin supports for [Gravatar] and [UI Avatar][uiavatar].

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```html
<script>
  import Avatar from '@svelte-put/avatar/Avatar.svelte';

  let { id, email, firstName, lastName } = $props();
</script>

<Avatar
  src="https://your.api/avatar/{id}"
  gravatar="{email}"
  uiAvatar="{firstName}+{lastName}"
  fallback="https://your.api/avatar/default"
/>
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/next/packages/avatar/CHANGELOG.md

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/avatar
[npm]: https://www.npmjs.com/package/@svelte-put/avatar
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/avatar?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/avatar

<!-- external resources -->

[gravatar]: https://en.gravatar.com/site/implement/images
[uiavatar]: https://ui-avatars.com

<!-- repl -->

[repl]: https://svelte.dev/repl/d54381946b1c4ebd8e612e4568fbbbd0
[repl.badge]: https://img.shields.io/static/v1?label=&message=Svelte+REPL&logo=svelte&logoColor=fff&color=ff3e00
[docs]: https://svelte-put.vnphanquang.com/docs/avatar
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-put/clickoutside
Description: Event for clicking outside a node
Author: Quang Phan
Latest version: 4.0.0

<div align="center">

# `@svelte-put/clickoutside`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs] [![repl.badge]][repl]

Svelte action `use:clickoutside` - event for clicking outside a node

![demo](https://raw.githubusercontent.com/vnphanquang/svelte-put/next/packages/clickoutside/static/images/demo.gif)

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```html
<script lang="ts">
  import { clickoutside } from '@svelte-put/clickoutside';

  function doSomething(e: CustomEvent<MouseEvent>) {
    console.log(e.target);
  }
</script>

<div use:clickoutside onclickoutside="{doSomething}" />
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/next/packages/clickoutside/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/clickoutside
[npm]: https://www.npmjs.com/package/@svelte-put/clickoutside
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/clickoutside?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/clickoutside
[repl]: https://svelte.dev/repl/9e5f9ee41c2c45aa8523993e357f6e78
[repl.badge]: https://img.shields.io/static/v1?label=&message=Svelte+REPL&logo=svelte&logoColor=fff&color=ff3e00
[docs]: https://svelte-put.vnphanquang.com/docs/clickoutside
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-put/cloudflare-turnstile
Description: Action for rendering Cloudflare turnstile into HTML node
Author: Quang Phan
Latest version: 1.2.0

<div align="center">

# `@svelte-put/cloudflare-turnstile`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs] [![repl.badge]][repl]

Svelte action `use:cloudflare-turnstile` - event for clicking outside a node

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```html
<!-- component.svelte -->
<script>
	import { turnstile } from '@svelte-put/cloudflare-turnstile';
</script>

<div
	use:turnstile
	turnstile-sitekey="1x00000000000000000000AA"
	turnstile-theme="dark"
	turnstile-size="normal"
></div>
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/cloudflare-turnstile/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/cloudflare-turnstile
[npm]: https://www.npmjs.com/package/@svelte-put/cloudflare-turnstile
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/cloudflare-turnstile?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/cloudflare-turnstile
[repl]: https://svelte.dev/repl/9e5f9ee41c2c45aa8523993e357f6e78
[repl.badge]: https://img.shields.io/static/v1?label=&message=Svelte+REPL&logo=svelte&logoColor=fff&color=ff3e00
[docs]: https://svelte-put.vnphanquang.com/docs/cloudflare-turnstile
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-put/copy
Description: Svelte action & utilities for copying text to clipboard
Author: Quang Phan
Latest version: 4.0.0

<div align="center">

# `@svelte-put/copy`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs]

Svelte action `use:copy` and utility for copying text to clipboard

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```html
<script lang="ts">
  import { copy, type CopyDetail } from '@svelte-put/copy';

  function handleCopied(e: CustomEvent<CopyDetail>) {
    console.log('Text copied:', e.detail.text);
  }
</script>

<button type="button" use:copy oncopied={handleCopied}>Click to copy this</button>
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/next/packages/copy/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/copy
[npm]: https://www.npmjs.com/package/@svelte-put/copy
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/copy?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/copy
[docs]: https://svelte-put.vnphanquang.com/docs/copy
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-put/dragscroll
Description: Svelte action for drag-to-scroll behavior
Author: Quang Phan
Latest version: 4.0.0

<div align="center">

# `@svelte-put/dragscroll`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs]

Svelte action `use:dragscroll` for pointer drag-to-scroll behavior

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```html
<script>
  import { dragscroll } from '@svelte-put/dragscroll';
</script>

<div use:dragscroll>...</div>
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/next/packages/dragscroll/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/dragscroll
[npm]: https://www.npmjs.com/package/@svelte-put/dragscroll
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/dragscroll?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/dragscroll
[docs]: https://svelte-put.vnphanquang.com/docs/dragscroll
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-put/inline-svg
Description: solution to inline SVGs in svelte land
Author: Quang Phan
Latest version: 4.0.2

<div align="center">

# `@svelte-put/inline-svg`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs]

Svelte action `use:inlineSvg` for inlining dynamic SVGs (fetched from network)

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Dynamic SVGs - Svelte Action

```html
<script>
  import { inlineSvg } from '@svelte-put/inline-svg';
</script>

<svg use:inlineSvg={'https://example.com/icon.svg'}></svg>
```

## Static SVGs - Vite Plugin / Svelte Preprocessor

### Vite Plugin

To inline static SVGs during build time, use the exported Vite plugin:

```javascript
// vite.config.js
import path from 'path';
import { inlineSvg } from '@svelte-put/inline-svg/vite';

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [inlineSvg(), sveltekit()],
};
export default config;
```

### Bare Preprocessor

The Svelte preprocessor is what is used internally by the aforementioned Vite plugin, which is the recommended. However, if your setup requires using the preprocessor directly, you can do so:

```javascript
// svelte.config.js
import { inlineSvg } from '@svelte-put/inline-svg/preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [inlineSvg()],
};
export default config;
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/inline-svg/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/inline-svg
[npm]: https://www.npmjs.com/package/@svelte-put/inline-svg
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/inline-svg?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/inline-svg
[docs]: https://svelte-put.vnphanquang.com/docs/inline-svg
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-put/intersect
Description: Action that wraps IntersectionObserver
Author: Quang Phan
Latest version: 4.0.0

<div align="center">

# `@svelte-put/intersect`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs] [![repl.badge]][repl]

Svelte action `use:intersect` - wrapper for [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

![demo](https://raw.githubusercontent.com/vnphanquang/svelte-put/next/packages/intersect/static/images/demo.gif)

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```html
<script lang="ts">
  import { intersect, type IntersectDetail } from '@svelte-put/intersect';

  function onIntersect(e: CustomEvent<IntersectDetail>) {
    const { observer, entries, direction } = e.detail;
    console.log('the observer itself', observer);
    console.log('scrolling direction:', direction);
    console.log('intersecting:', entries[0]?.isIntersecting ? 'entering' : 'leaving');
  }
</script>

<div use:intersect onintersect={onIntersect} onintersectonce></div>
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/next/packages/intersect/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/intersect
[npm]: https://www.npmjs.com/package/@svelte-put/intersect
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/intersect?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/intersect
[repl]: https://svelte.dev/repl/835eacce6ac44aff95a7cb0bb5ca200d
[repl.badge]: https://img.shields.io/static/v1?label=&message=Svelte+REPL&logo=svelte&logoColor=fff&color=ff3e00
[docs]: https://svelte-put.vnphanquang.com/docs/intersect
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-put/lockscroll
Description: locking scroll and hide scrollbar within an HTML element
Author: Quang Phan
Latest version: 2.0.1

<div align="center">

# `@svelte-put/lockscroll`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs] [![repl.badge]][repl]

Svelte action `use:lockscroll` - locking scroll within an HTML element

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```html
<script>
	import { lockscroll } from '@svelte-put/lockscroll';

	let locked = $state(false);
</script>

<svelte:body use:lockscroll="{locked}" />

<button onclick="{()" ="">locked = !locked}>Toggle lock scroll on body</button>
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/lockscroll/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/lockscroll
[npm]: https://www.npmjs.com/package/@svelte-put/lockscroll
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/lockscroll?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/lockscroll
[repl]: https://svelte.dev/repl/8bfbdc1af58e43b2af4d625f63358a35
[repl.badge]: https://img.shields.io/static/v1?label=&message=Svelte+REPL&logo=svelte&logoColor=fff&color=ff3e00
[docs]: https://svelte-put.vnphanquang.com/docs/lockscroll
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-put/modal
Description: Svelte async modal
Author: Quang Phan
Latest version: 1.0.10
Deprecated: This package has been dropped in favor of @svelte-put/async-stack. See https://svelte-put.vnphanquang.com/docs/async-stack for more details. Thank you!

<div align="center">

# `@svelte-put/modal`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs] [![repl.badge]][repl]

Solution to async & type-safe modals in Svelte.

</div>

This solution employs [svelte store][svelte.store] for handling stack-able modals in an async manner. That is, you can open a modal programmatically and await for it to be "resolved".

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```typescript
// setup modal store
import { createModalStore } from '@svelte-put/modal';
export const modalStore = createModalStore();
```

```html
<!-- setup ModalPortal -->
<script lang="ts">
	import ModalPortal from '@svelte-put/modal/ModalPortal.svelte';

	import { modalStore } from './modal.store';
</script>

<slot />

<ModalPortal store="{modalStore}" />
```

```typescript
// load compatible modal & push/pop
import { modalStore } from './modal.store';
import MyModal from './MyModal.svelte';

const pushed = modal.push(MyModal, {
	/* props */
});
modal.pop(pushed);
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/modal/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/modal
[npm]: https://www.npmjs.com/package/@svelte-put/modal
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/modal?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/modal
[repl]: https://svelte.dev/repl/0a68001337544b8ab55995fb3d02d1f6
[repl.badge]: https://img.shields.io/static/v1?label=&message=Svelte+REPL&logo=svelte&logoColor=fff&color=ff3e00
[docs]: https://svelte-put.vnphanquang.com/docs/modal
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue

<!-- external resources -->

[svelte.store]: https://svelte.dev/docs#run-time-svelte-store
npm package: @svelte-put/movable
Description: Action to move node on mousedown & mousemove
Author: Quang Phan
Latest version: 4.0.0

<div align="center">

# `@svelte-put/movable`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs] [![repl.badge]][repl]

Svelte action `use:movable` - make a node move on mousedown & mousemove

![demo](https://raw.githubusercontent.com/vnphanquang/svelte-put/next/packages/movable/static/images/demo.gif)

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```html
<script lang="ts">
  import { movable } from '@svelte-put/movable';
</script>

<div class="h-20 w-20" use:movable>...</div>
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/next/packages/movable/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/movable
[npm]: https://www.npmjs.com/package/@svelte-put/movable
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/movable?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/movable
[repl]: https://svelte.dev/repl/88a7c1fc2e134db7b58786d5f385fc5d
[repl.badge]: https://img.shields.io/static/v1?label=&message=Svelte+REPL&logo=svelte&logoColor=fff&color=ff3e00
[docs]: https://svelte-put.vnphanquang.com/docs/movable
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-put/popover
Description: Minimal and ssr-friendly enhancements to Popover API with idiomatic Svelte
Author: Quang Phan
Latest version: 1.0.0

<div align="center">

# `@svelte-put/popover`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs]

Idiomatic Svelte enhancements to [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```html
<script>
	import { Popover } from '@svelte-put/popover';

	const popover = new Popover();
</script>

<button {...popover.control.attributes} use:popover.control.actions>
	Open me Popover
</button>

<div {...popover.target.attributes} use:popover.target.actions>
	<p>Popover content. Click backdrop to dismiss</p>
</div>
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/next/packages/popover/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/popover
[npm]: https://www.npmjs.com/package/@svelte-put/popover
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/popover?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/popover
[repl]: https://svelte.dev/repl/9e5f9ee41c2c45aa8523993e357f6e78
[repl.badge]: https://img.shields.io/static/v1?label=&message=Svelte+REPL&logo=svelte&logoColor=fff&color=ff3e00
[docs]: https://svelte-put.vnphanquang.com/docs/popover
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-put/preprocess-auto-slug
Description: Generate slug from text content, to add id to headings for example
Author: Quang Phan
Latest version: 2.0.0

<div align="center">

# `@svelte-put/preprocess-auto-slug`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs]

Svelte preprocessor for adding `id` and anchor to nodes

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```html
<!-- input.svelte -->
<h2>Quick start</h2>
```

```javascript
// svelte.config.js
import autoSlug from '@svelte-put/preprocess-auto-slug';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [autoSlug()],
};

export default config;
```

```html
<!-- output.html -->
<h2 id="quick-start">
  <a href="#quick-start" aria-hidden="true" tabindex="-1">#</a>
  Quick Start
</h2>
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/next/packages/preprocess-auto-slug/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/preprocess-auto-slug
[npm]: https://www.npmjs.com/package/@svelte-put/preprocess-auto-slug
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/preprocess-auto-slug?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/preprocess-auto-slug
[docs]: https://svelte-put.vnphanquang.com/docs/preprocess-auto-slug
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-put/preprocess-external-link
Description: add appropriate attributes to external links
Author: Quang Phan
Latest version: 1.0.0

<div align="center">

# `@svelte-put/preprocess-external-link`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs]

Svelte preprocessor for adding attributes to anchor tags that point to external domains.

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

Given this `svelte.config.js`...

```javascript
// svelte.config.js
import externalLink from '@svelte-put/preprocess-external-link';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [
    externalLink(['your-domain.com', 'your-other-domain.com']),
    // other preprocessors
  ],
};
export default config;
```

..the following input markup...

```html
<!-- input.svelte -->
<script>
  let href = 'https://developer.mozilla.org';
</script>

<!-- links that are treated as internal -->
<a href="/internal-path">Internal Path</a>
<a href="https//your-domain.com/some-path">Internal Path</a>
<a href="https//your-other-domain.com/some-path">Internal Path</a>

<!-- links that are treated as external -->
<a href="https://svelte.dev/">Svelte</a>
<a {href} data-external>Svelte</a>
```

...will output

```html
<!-- output.html -->

<!-- links that are treated as internal -->
<a href="/internal-path">Internal Path</a>
<a href="https//your-domain.com/some-path">Internal Path</a>
<a href="https//your-other-domain.com/some-path">Internal Path</a>

<!-- links that are treated as external -->
<a href="https://svelte.dev/" target="_blank" rel="noreferrer noopener">Svelte</a>
<a {href} data-external target="_blank" rel="noreferrer noopener">Svelte</a>
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/next/packages/preprocess-external-link/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/preprocess-external-link
[npm]: https://www.npmjs.com/package/@svelte-put/preprocess-external-link
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/preprocess-external-link?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/preprocess-external-link
[docs]: https://svelte-put.vnphanquang.com/docs/preprocess-external-link
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-put/preprocess-inline-svg
Description: minimal svg inliner from local resources at build time
Author: Quang Phan
Latest version: 2.1.4
Deprecated: The package has been merged into @svelte-put/inline. See https://svelte-put.vnphanquang.com/docs/inline-svg for more information. Thank you!

<div align="center">

# `@svelte-put/preprocess-inline-svg`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs]

Svelte preprocessor for inlining static svg at build time

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

Given this `svelte.config.js`

```javascript
import inlineSvg from '@svelte-put/preprocess-inline-svg';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [
		inlineSvg([
			{
				directories: 'src/assets/icons',
				attributes: {
					class: 'icon',
					width: '20',
					height: '20',
				},
			},
			{
				directories: 'src/assets/pictograms',
			},
		]),
		// other preprocessors
	],
};
export default config;
```

and the asset files as follow

```tree
src/assets
    |
    |-- icons
         |-- svelte.svg
         |
         |-- google
               |-- arrow-right.svg
         |-- simpleicons
               |-- github.svg
    |
    |-- pictograms
         |-- diagram.svg
```

We can now do

```html
<!-- this will have width="20" height="20" as specified in the config -->
<svg data-inline-src="svelte"></svg>

<!-- nested -->
<svg data-inline-src="google/arrow-right.svg"></svg>
<!-- .svg can be omitted -->
<svg data-inline-src="simpleicons/github"></svg>

<!-- with custom attributes -->
<svg data-inline-src="diagram" width="100" height="100"></svg>

<!-- alternatively, you can provide a per-case path that is relative to the current source file -->
<svg data-inline-src="./local-icon.svg"></svg>

<!-- if the source svg is not found for any of the above, an error will be thrown -->
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/preprocess-inline-svg/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/preprocess-inline-svg
[npm]: https://www.npmjs.com/package/@svelte-put/preprocess-inline-svg
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/preprocess-inline-svg?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/preprocess-inline-svg
[docs]: https://svelte-put.vnphanquang.com/docs/preprocess-inline-svg
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-put/qr
Description: render QR as svg or img
Author: Quang Phan
Latest version: 2.1.2

<div align="center">

# `@svelte-put/qr`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs] [![repl.badge]][repl]

Render QR as `img` or `svg`, optionally with logo

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

Given one of the following usage

```html
<script>
	// as img
	import { qr as imgQR } from '@svelte-put/qr/img';
	import ImgQR from '@svelte-put/qr/img/QR.svelte';

	// as svg
	import { qr as svgQR } from '@svelte-put/qr/svg';
	import SvgQR from '@svelte-put/qr/svg/QR.svelte';

	const data = 'https://svelte-put.vnphanquang.com/docs/qr';
	const logo = 'https://svelte-put.vnphanquang.com/images/svelte-put-logo.svg';
</script>

<!-- svg using component -->
<SvgQR {data} {logo} />

<!-- svg using action -->
<svg use:svgQR="{{" data, logo }} />

<!-- img using component -->
<ImgQR {data} {logo} />

<!-- img using action -->
<img use:imgQR="{{" data, logo }} />
```

The rendered QR will be similar to this:

<img src="https://raw.githubusercontent.com/vnphanquang/svelte-put/main/packages/qr/static/qr.svg" width="410" height="410" alt="qr">

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/qr/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/qr
[npm]: https://www.npmjs.com/package/@svelte-put/qr
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/qr?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/qr
[repl]: https://svelte.dev/repl/74c053b447e94244833f9c3d73210ae5
[repl.badge]: https://img.shields.io/static/v1?label=&message=Svelte+REPL&logo=svelte&logoColor=fff&color=ff3e00
[docs]: https://svelte-put.vnphanquang.com/docs/qr
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue