open-index/open-npm huggingface dataset:
npm package: @sveltebits/phosphor
Description: Phosphor Icons for Svelte - 9072+ beautiful, flexible icon components
Author: thinkwithnikhil
Latest version: 0.0.7

# Svelte library

Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).

Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```sh
# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```sh
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.

## Building

To build your library:

```sh
npm pack
```

To create a production version of your showcase app:

```sh
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

## Publishing

Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).

To publish your library to [npm](https://www.npmjs.com):

```sh
npm publish
```
npm package: @sveltech/meta
Description: open graph generation for svelte
Author: jakobrosenberg@gmail.com
Latest version: 0.0.0

# Metadata with Open Graph for SSR SPAs

### Usage

```javascript
import { meta, done } from '@sveltech/meta'

meta('title', 'Title of my website')
meta('description', 'Description of my website')
meta('twitter:card', 'summary')
```

This produces the following HTML in `<head>`

```HTML
<meta name="title" content="Title of my website">
<meta property="og:title" content="Title of my website">
<meta name="description" content="Description of my website">
<meta property="og:description" content="Description of my website">
<meta name="twitter:card" content="summary">
```
###### Metadata without a colon in the name will produce an additional Open Graph element.

The meta function can be disabled by calling ``done()`` or firing an ``app-loaded`` event.
npm package: @sveltech/routify
Description: Routes for Svelte, automated by your file structure
Author: jakobrosenberg@gmail.com
Latest version: 1.9.10

<div align="center">
    <img src="routify.png" alt="routify" width="512" /><br>
    <img src="https://badgen.net/npm/v/@sveltech/routify" alt="Badge" />
</div> 

----

<p> 
  <strong>Routify is a work in progress. Since v1.5 we have a stable release. But this is a relatively young project. You can expect it to evolve.</strong>
</p>

----

## Install

* Install the Router only: `npm install --save-dev @sveltech/routify`
* Clone the [starter template](https://github.com/sveltech/routify-starter):
    * `npx @sveltech/routify init`
    * The starter template contains a lot more than just the router, for more info see [here](https://routify.dev/guide/starter-Template).

## Documentation

[routify.dev](https://routify.dev/guide/introduction)

## Template

[Routify starter template](https://github.com/sveltech/routify-starter)
Includes SSR, prerendering, code splitting and much more.

## Example

[Starter example](https://example.routify.dev/example) Example from the starter template. Refresh a page to see how it is loaded.

## Tutorials

* [Easy client-side SPA routing with Routify](https://www.youtube.com/watch?v=AGLUJlOC6f0) by Jitesh
* [How to add PostSCSS to Routify Starter](https://johanronsse.be/2020/05/01/how-to-add-postcss-to-routify/) by Wolfr
* [Add SCSS to a Routify project](https://johanronsse.be/2020/04/05/how-to-add-scss-to-a-svelte-project-using-routify/) by Wolfr (slightly outdated)

## Support
Please feel free to open an issue or a pull request. All feedback is welcome.

<img height="32px" src="https://discordapp.com/assets/f8389ca1a741a115313bede9ac02e2c0.svg" /> **Join us on Discord** 

Want help? Have ideas about Routify? Chat with us on Discord. 
https://discord.gg/ntKJD5B

## Older versions

For the old version (svelte-filerouter), please go [here](https://github.com/sveltech/routify/tree/v1)
npm package: @sveltecore/headless-svelteui
Description: A group of headless components that can be used in building Svelte Apps.
Author: calebbenjin
Latest version: 0.2.1

# headless-svelte-ui

A group of headless components that can be used in building Svelte Apps.

## Installation

```sh
npm i @sveltecore/headless-svelteui
or
yarn add @sveltecore/headless-svelteui

import { UseButton } from "@sveltecore/headless-svelteui";
```

## _UseButton_

```sh
<UseButton>Button</UseButton>
```
npm package: @sveltecraft/p5-svelte
Description: A Svelte component wrapper for p5.js sketches
Author: Sveltecraft
Latest version: 0.0.1

# @sveltecraft/p5-svelte

<p align="center">
	<img src="./banner.png" alt="@sveltecraft/p5-svelte" width="800" height="400">
</p>

A Svelte component wrapper for p5.js sketches.

## Installation

```sh
npm install @sveltecraft/p5-svelte p5
```

Note: `p5` is a peer dependency and must be installed alongside this package.

## Usage

```svelte
<script lang="ts">
	import P5Sketch, { type Sketch } from '@sveltecraft/p5-svelte';

	let x = 0;
	let y = 0;
	let diameter = $state(100);

	const sketch: Sketch = (p) => {
		p.setup = () => {
			p.createCanvas(800, 600);
			p.noStroke();
		};
		p.draw = () => {
			p.background(10);
			x = p.lerp(x, p.mouseX, 0.05);
			y = p.lerp(y, p.mouseY, 0.05);
			p.fill(255);
			p.circle(x, y, diameter);
		};
	};
</script>

<P5Sketch {sketch} />

<label>
	diameter
	<input type="range" bind:value={diameter} min={0} max={400} />
	{diameter}
</label>
```

## Addons (p5.sound, etc.)

> ⚠️ **Warning**
> This library is designed for p5.js 2.0+ which has a slightly different API than older versions. In the new version, asset preloading is done in `setup` instead of the `preload` function.

In the past `p5.sound` was part of `p5.js` and it was typed using the `@types/p5` package which is no longer the case — `p5.sound` is a standalone package which doesn't provide types so you have to use `any` or create your own types if you want type-safety.

Some p5 addons like `p5.sound` require access to a global `p5` instance. This component supports loading addons before the sketch initializes:

```svelte
<script lang="ts">
	import P5Sketch, { type Sketch } from '@sveltecraft/p5-svelte';

	let x = 0;
	let y = 0;
	let diameter = $state(100);

	type SoundFile = {
		play: () => void;
	};

	// @ts-expect-error p5.sound lacks types
	const addons = [() => import('p5.sound')];

	const sketch: Sketch = (p) => {
		let sound: SoundFile;
		p.setup = async () => {
			// @ts-expect-error p5.sound lacks types
			sound = await p.loadSound('./sfx.mp3');
			p.createCanvas(400, 400);
		};
		p.draw = () => {
			p.background(10);
		};
		p.mousePressed = () => {
			sound.play();
		};
	};
</script>

<P5Sketch {sketch} {addons} />

<label>
	diameter
	<input type="range" bind:value={diameter} min={0} max={400} />
	{diameter}
</label>
```

### Why this approach?

Addons like `p5.sound` look for `window.p5` at load time to extend the library. By passing addons as an array, the component:

1. Loads `p5` dynamically
2. Assigns `p5` to `window.p5` before loading addons
3. Waits for all addons to load
4. Then initializes your sketch

This ensures addons are properly registered before your sketch runs.

## API

### Props

- `sketch` (required): A function that receives a p5 instance and defines `setup` and `draw` methods
- `addons` (optional): Array of async functions that load p5 addons
- `style` (optional): CSS styles to apply to the canvas container
- `class` (optional): CSS class to apply to the canvas container