open-index/open-npm huggingface dataset:
npm package: @steeze-ui/carbon-icons
Description: Icon Sources (based on Carbon Icons) built for @steeze-ui/icons
Author: Justin Voitel
Latest version: 1.2.1

# READ THIS FIRST

This project is still in experimental development. Expect bugs and breaking changes!

## Overview

Effortless Icon Pack for template Icons

- Based on [Carbon Icons](https://carbondesignsystem.com/guidelines/icons/library/)
- Defines the Icon Source to be used in any [steeze-ui icon component](https://github.com/steeze-ui/icons/tree/main/packages/components)

## Installation

```bash
npm i -D @steeze-ui/carbon-icons
```

## Usage

### Svelte Example

```svelte
import { Category } from '@steeze-ui/carbon-icons'
import { Icon } from '@steeze-ui/svelte-icon'

<Icon src={Category} size="24px" />
```

## Documentation

### Themes

| Value   | Description                                   |
| ------- | --------------------------------------------- |
| default | The 32px version of the Icons                 |
| 16      | The 16px version of the Icons                 |
| 20      | The 20px version of the Icons                 |
| 24      | The 24px version of the Icons                 |
| various | Icons with a different viewbox than the above |

### Other Icon Packs

For all other available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```

This produces a ready-to-publish package for the npm registry
npm package: @steeze-ui/components
Description: > Need Icons for your next SvelteKit project (heroicons, feather icons and more) ? Check out [@steeze-ui/icons](https://github.com/steeze-ui/icons)!
Author: Justin Voitel
Latest version: 1.2.0

> Need Icons for your next SvelteKit project (heroicons, feather icons and more) ? Check out [@steeze-ui/icons](https://github.com/steeze-ui/icons)!

# Steeze UI

Components for SvelteKit Apps. Check out the [documentation](https://steeze-ui.com) for more info!

- Accessible
- Prestyled
- Themable

## Getting Started

### Installing

Install the package as dev dependency via pnpm, npm or yarn

```bash
pnpm i -D @steeze-ui/components
```

### Base Styles

Once you've installed the package, you can import the base styles which consists of basic normalization and custom properties that most components are using (e.g `colors` or `font sizes`)

```html
<script>
	import '@steeze-ui/components/base.css'
</script>
```

> You can easily override the custom properties and define your own design system

### Use Components

```svelte
<script>
  import {Select, TextField, Button, Toggle} from "@steeze-ui/components"
</script>

<Select items={[{id:1,label:"Label 1"}]}>
<TextField label="Text Field" value="Text" />
<Toggle checked />
<Button theme="primary" type="submit">Submit</Button>
```

### Use Underlying Parts

Some components share the same parts, like both `Select` and `TextField` use the `Label` Component or the `Toggle` Component is just a styled and more user-friendly version of the `Switch` Component. By design you can use these parts via deep imports from the core/parts folder:

```svelte
<script>
  import Switch from "@steeze-ui/components/core/parts/Switch.svelte"
  import Label from "@steeze-ui/components/core/parts/Label.svelte"
</script>

<Label for="switch">Switch me!</Label>
<Switch id="switch" checked />
```

## Sponsors

<a href="https://www.vercel.com?utm_source=steeze-ui&utm_campaign=oss">
<img width="150px" src="https://user-images.githubusercontent.com/30449535/153277500-232b04f0-f636-42b1-aa08-1cd09d8e9086.svg" />
</a>

## License

Distributed under the [MIT License](/LICENSE).
npm package: @steeze-ui/css-gg
Description: Icon Sources (based on CSS.gg) built for @steeze-ui/icons
Author: Yash
Latest version: 1.0.0

## Overview

Effortless Icon Pack for CSS.gg Icons

- Based on [CSS.gg Icons](https://css.gg/)
- Defines the Icon Source to be used in any [steeze-ui icon component](https://github.com/steeze-ui/icons/tree/main/packages/components)

## Installation

```bash
npm i -D @steeze-ui/css-gg
```

## Usage

```svelte
<!-- svelte example -->
<script>
  import { Add } from '@steeze-ui/css-gg'
  import { Icon } from '@steeze-ui/svelte-icon'
</script>

<Icon src={Add} size="24px" />
```

## Documentation

### Themes

| Value   | Description                      | Prefered Size |
| ------- | -------------------------------- | ------------- |
| default | The outline version of the Icons | 24px          |

### Other Icon Packs

For all other available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```

This produces a ready-to-publish package for the npm registry
npm package: @steeze-ui/feather-icons
Description: Icon Sources (based on Feather Icons) built for @steeze-ui/icons
Author: Justin Voitel
Latest version: 1.3.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# READ THIS FIRST

This project is still in experimental development. Expect bugs and breaking changes!

## Overview

Effortless Icon Pack for Feather Icons

- Based on [Feather Icons](https://feathericons.com/)
- Defines the Icon Source to be used in any [steeze-ui icon component](https://github.com/steeze-ui/icons/tree/main/packages/components)

## Installation

```bash
npm i -D @steeze-ui/feather-icons
```

## Usage

```svelte
import { Activity } from '@steeze-ui/feather-icons'
```

## Documentation

### Themes

| Value   | Description                      |
| ------- | -------------------------------- |
| default | The outline version of the Icons |

### Other Icon Packs

For all other available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```

This produces a ready-to-publish package for the npm registry
npm package: @steeze-ui/font-awesome
Description: Icon Sources (based on Font Awesome) built for @steeze-ui/icons
Author: Justin Voitel
Latest version: 1.0.1

## Overview

Effortless Icon Pack for Font Awesome Icons

- Based on [Font Awesome](https://fontawesome.com/)
- Defines the Icon Source to be used in any [steeze-ui icon component](https://github.com/steeze-ui/icons/tree/main/packages/components)

## Installation

```bash
npm i -D @steeze-ui/font-awesome
```

## Usage

```js
import { FaceSmile } from '@steeze-ui/font-awesome'
```

## Documentation

### Themes

| Value   | Description                       |
| ------- | --------------------------------- |
| default | The regular versions of the Icons |
| solid   | The solid versions of the Icons   |

### Other Icon Packs

For all other available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```

This produces a ready-to-publish package for the npm registry

## License

[CC BY 4.0 License](https://github.com/FortAwesome/Font-Awesome?tab=readme-ov-file#license)
npm package: @steeze-ui/heroicons
Description: Icon Sources (based on heroicons 2.0) built for @steeze-ui/icons
Author: Justin Voitel
Latest version: 2.4.2

## Overview

Effortless Icon Pack for Heroicons 2.0

- Based on [Heroicons](https://heroicons.dev/)
- Defines the Icon Source to be used in any [steeze-ui icon component](https://github.com/steeze-ui/icons/tree/main/packages/components)

## Installation

```bash
npm i -D @steeze-ui/heroicons
```

## Usage

### Svelte Example

```svelte
import { LightningBolt } from '@steeze-ui/heroicons'
import { Icon } from '@steeze-ui/svelte-icon'

<Icon src={LightningBolt} size="24px" theme="solid" />
```

## Documentation

### Themes

| Value   | Description                         | Prefered Size |
| ------- | ----------------------------------- | ------------- |
| default | A outline version of the Icons      | 24px          |
| solid   | A solid version of the Icons        | 24px          |
| mini    | A mini (solid) version of the Icons | 20px          |

### Other Icon Packs

For all other available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```

This produces a ready-to-publish package for the npm registry
npm package: @steeze-ui/iconic-free
Description: Icon Sources (based on iconic free Icons) built for @steeze-ui/icons
Author: Justin Voitel
Latest version: 1.1.1

# READ THIS FIRST

This project is still in experimental development. Expect bugs and breaking changes!

## Overview

Effortless Icon Pack for Iconic Free Icons

- Based on [iconic free Icons](https://iconic.app/)
- Defines the Icon Source to be used in any [steeze-ui icon component](https://github.com/steeze-ui/icons/tree/main/packages/components)

## Installation

```bash
npm i -D @steeze-ui/iconic-free
```

## Usage

```js
import { Activity } from '@steeze-ui/iconic-free'
```

## Documentation

### Themes

| Value   | Description                              |
| ------- | ---------------------------------------- |
| default | The default (and up to now only) version |

### Other Icon Packs

For all other available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```

This produces a ready-to-publish package for the npm registry
npm package: @steeze-ui/icons
Description: Utilities for @steeze-ui/icons
Author: Justin Voitel
Latest version: 2.1.0

# READ THIS FIRST

This project is still in experimental development. Expect bugs and breaking changes!

## Overview

Effortless Utilities for [steeze-ui/icons](https://github.com/steeze-ui/icons)

### Icon Packs

For all available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

### Icon Components

For all available Icon Components visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```

This produces a ready-to-publish package for the npm registry
npm package: @steeze-ui/lit-icon
Author: Justin Voitel <mail@justinv.me>
Latest version: 1.1.3

# READ THIS FIRST

This project is still in experimental development. Expect bugs and breaking changes!

## Overview

Effortless Lit Icon Component

- Made and Tested for Vite environments
- Usable with all official [Icon Packs](https://github.com/steeze-ui/icons/)
- Dynamically change theme on runtime

## How to use

### Installation

```bash
npm i @steeze-ui/lit-icon
```

### Import

```js
//import icon component
import '@steeze-ui/lit-icon'

//import as many icons from a Icon Pack
import { LightningBolt } from '@steeze-ui/heroicons'
```

### Usage

```html
<lit-icon .src="${LightningBolt}" theme="solid" size="1rem" />
```

## Documentation

### Icon attributes

| Attribute   | Default | Description                                                         |
| ----------- | ------- | ------------------------------------------------------------------- |
| .src        | -       | (required) The source of a icon coming from an Icon Pack            |
| theme       | default | Configures to use a Icon Theme if available (otherwise use default) |
| size        | 100%    | Configures width and height                                         |
| class       | -       | Configures width and height                                         |
| style       | -       | Configures styles for the svg (e.g "color:red")                     |
| aria-hidden | true    | Configures visibility for screen-readers                            |
| aria-label  | -       | Configures label for screen-readers                                 |

### Icon Packs

For all available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package && cd package && pnpm publish
```
npm package: @steeze-ui/lucide-icons
Description: Icon Sources (based on Lucide Icons) built for @steeze-ui/icons
Author: Justin Voitel
Latest version: 1.4.1

## Overview

Effortless Icon Pack for Lucide Icons

- Based on [Lucide Icons](https://lucide.dev/)
- Defines the Icon Source to be used in any [steeze-ui icon component](https://github.com/steeze-ui/icons/tree/main/packages/components)

## Installation

```bash
npm i -D @steeze-ui/lucide-icons
```

## Usage

```svelte
import { Activity } from '@steeze-ui/lucide-icons'
```

## Documentation

### Themes

| Value   | Description                      |
| ------- | -------------------------------- |
| default | The outline version of the Icons |

### Other Icon Packs

For all other available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```

This produces a ready-to-publish package for the npm registry
npm package: @steeze-ui/material-design-icons
Description: Icon Sources (based on Material Design Icons) built for @steeze-ui/icons
Author: Justin Voitel
Latest version: 1.1.2

## Overview

Effortless Icon Pack for Material Design Icons

- Based on [Material Design Icons](https://fonts.google.com/icons)
- Defines the Icon Source to be used in any [steeze-ui icon component](https://github.com/steeze-ui/icons/tree/main/packages/components)

## Installation

```bash
npm i -D @steeze-ui/material-design-icons
```

## Usage

### Svelte Example

```svelte
import { Camera } from '@steeze-ui/material-design-icons'
import { Icon } from '@steeze-ui/svelte-icon'

<Icon src={Camera} size="24px" theme="round" />
```

## Documentation

### Themes

| Value    | Description                     | Prefered Size |
| -------- | ------------------------------- | ------------- |
| default  | A filled version of the Icons   | 24px          |
| outlined | A outline version of the Icons  | 24px          |
| round    | A round version of the Icons    | 24px          |
| sharp    | A sharp version of the Icons    | 24px          |
| twotone  | A two tone version of the Icons | 24px          |

### Other Icon Packs

For all other available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```

This produces a ready-to-publish package for the npm registry
npm package: @steeze-ui/octicons
Description: Icon Sources (based on Octicons) built for @steeze-ui/icons
Author: Justin Voitel
Latest version: 2.1.1

# READ THIS FIRST

This project is still in experimental development. Expect bugs and breaking changes!

## Overview

Effortless Icon Pack for Octicons

- Based on [Octicons](https://primer.style/octicons/)
- Defines the Icon Source to be used in any [steeze-ui icon component](https://github.com/steeze-ui/icons/tree/main/packages/components)

## Installation

```bash
npm i -D @steeze-ui/octicons
```

## Usage

```js
import { Alert } from '@steeze-ui/octicons'
```

## Documentation

### Themes

| Value   | Description                   |
| ------- | ----------------------------- |
| default | The 24px version of the Icons |
| 16      | The 16px version of the Icons |
| 12      | The 12px version of the Icons |

### Other Icon Packs

For all other available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```

This produces a ready-to-publish package for the npm registry
npm package: @steeze-ui/phosphor-icons
Description: Icon Sources (based on template) built for @steeze-ui/icons
Author: Justin Voitel
Latest version: 2.1.1

# READ THIS FIRST

This project is still in experimental development. Expect bugs and breaking changes!

## Overview

Effortless Icon Pack for template Icons

- Based on [Phosphor Icons](https://phosphoricons.com/)
- Defines the Icon Source to be used in any [steeze-ui icon component](https://github.com/steeze-ui/icons/tree/main/packages/components)

## Installation

```bash
npm i -D @steeze-ui/phosphor-icons
```

## Usage

```js
import { Lightbulb } from '@steeze-ui/phosphor-icons'
```

## Documentation

### Themes

| Value   | Description                      |
| ------- | -------------------------------- |
| default | The Regular version of the Icons |
| thin    | The Thin version of the Icons    |
| light   | The Light version of the Icons   |
| bold    | The Bold version of the Icons    |
| fill    | The Fill version of the Icons    |
| duotone | The Duotone version of the Icons |

### Other Icon Packs

For all other available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```

This produces a ready-to-publish package for the npm registry
npm package: @steeze-ui/radix-icons
Description: Icon Sources (based on radix-icons) built for @steeze-ui/icons
Author: Justin Voitel
Latest version: 1.1.2

# READ THIS FIRST

This project is still in experimental development. Expect bugs and breaking changes!

## Overview

Effortless Icon Pack for Radix Icons

- Based on [Radix Icons](https://icons.modulz.app/)
- Defines the Icon Source to be used in any [steeze-ui icon component](https://github.com/steeze-ui/icons/tree/main/packages/components)

## Installation

```bash
npm i -D @steeze-ui/radix-icons
```

## Usage

```js
import { ActivityLog } from '@steeze-ui/radix-icons'
```

## Documentation

### Themes

| Value   | Description                              |
| ------- | ---------------------------------------- |
| default | The default (and up to now only) version |

### Other Icon Packs

For all other available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```

This produces a ready-to-publish package for the npm registry
npm package: @steeze-ui/react-icon
Description: This project is still in experimental development. Expect bugs and breaking changes!
Author: Justin Voitel
Latest version: 1.0.5

# READ THIS FIRST

This project is still in experimental development. Expect bugs and breaking changes!

## Overview

Effortless [React](https://reactjs.org/) Icon Component

- Made and tested for Vite environments
- Usable with all official [Icon Packs](https://github.com/steeze-ui/icons/)
- Dynamically change theme on runtime

## Installation

```bash
npm i -D @steeze-ui/react-icon
```

## Usage

```jsx
//import icon component
import {Icon} from '@steeze-ui/solid-icon'

//import as many icons from any Icon Pack
import {LightningBolt} from '@steeze-ui/heroicons'

//Use the Icon in your App
const MyApp = () => {
  return <Icon src={LightningBolt} theme='solid' class='color-gray-900'>
}
```

## Documentation

### Icon attributes

| Attribute | Default | Description                                                            |
| --------- | ------- | ---------------------------------------------------------------------- |
| src       | -       | (required) The source of a icon coming from an Icon Pack               |
| theme     | default | Configures to use a Icon Theme if available (otherwise render nothing) |
| size      | 100%    | Configures width and height                                            |
| \*        | -       | Any html attribute that is valid (e.g aria-hidden, class or style)     |

### Icon Packs

For all available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```
npm package: @steeze-ui/remix-icons
Description: Icon Sources (based on Remix Icons) built for @steeze-ui/icons
Author: Justin Voitel
Latest version: 1.2.0

# READ THIS FIRST

This project is still in experimental development. Expect bugs and breaking changes!

## Overview

Effortless Icon Pack for Remix Icons

- Based on [Remix Icons](https://github.com/Remix-Design/remixicon#usage)
- Defines the Icon Source to be used in any [steeze-ui icon component](https://github.com/steeze-ui/icons/tree/main/packages/components)

## Installation

```bash
npm i -D @steeze-ui/remix-icons
```

## Usage

```js
import { User } from '@steeze-ui/remix-icons'
```

## Documentation

### Themes

| Value            | Description                     |
| ---------------- | ------------------------------- |
| default(outline) | The line version of the Icons   |
| solid            | The filled version of the Icons |

### Other Icon Packs

For all other available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```

This produces a ready-to-publish package for the npm registry
npm package: @steeze-ui/simple-icons
Description: Icon Sources (based on Simple Icons) built for @steeze-ui/icons
Author: she11sh0cked
Latest version: 1.10.1

# READ THIS FIRST

This project is still in experimental development. Expect bugs and breaking changes!

## Overview

Effortless Icon Pack for Simple Icons

- Based on [Simple Icons](https://simpleicons.org/)
- Defines the Icon Source to be used in any [steeze-ui icon component](https://github.com/steeze-ui/icons/tree/main/packages/components)

## Installation

```bash
npm i -D @steeze-ui/simple-icons
```

## Usage

### Svelte Example

```svelte
import { Github } from '@steeze-ui/simple-icons'
import { Icon } from '@steeze-ui/svelte-icon'

<Icon src={Github} size="24px" />
```

## Documentation

### Themes

| Value   | Description                      |
| ------- | -------------------------------- |
| default | The default version of the Icons |

### Other Icon Packs

For all other available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```

This produces a ready-to-publish package for the npm registry
npm package: @steeze-ui/solid-icon
Description: Icon Component for Solid JS
Author: Justin Voitel
Latest version: 1.1.0

# READ THIS FIRST

This project is still in experimental development. Expect bugs and breaking changes!

## Overview

Effortless [Solid](https://www.solidjs.com/) Icon Component

- Made and tested for Vite environments
- Usable with all official [Icon Packs](https://github.com/steeze-ui/icons/)
- Dynamically change theme on runtime

## Installation

```bash
npm i -D @steeze-ui/solid-icon
```

## Usage

```jsx
//import icon component
import {Icon} from '@steeze-ui/solid-icon'

//import as many icons from any Icon Pack
import {LightningBolt} from '@steeze-ui/heroicons'

//Use the Icon in your App
const MyApp = () => {
  return <Icon src={LightningBolt} theme='solid' class='color-gray-900'>
}
```

## Documentation

### Icon attributes

| Attribute | Default | Description                                                            |
| --------- | ------- | ---------------------------------------------------------------------- |
| src       | -       | (required) The source of a icon coming from an Icon Pack               |
| theme     | default | Configures to use a Icon Theme if available (otherwise render nothing) |
| size      | 100%    | Configures width and height                                            |
| \*        | -       | Any html attribute that is valid (e.g aria-hidden, class or style)     |

### Icon Packs

For all available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```
npm package: @steeze-ui/svelte-icon
Description: This project is still in experimental development. Expect bugs and breaking changes!
Author: Justin Voitel
Latest version: 1.6.2

# READ THIS FIRST

This project is still in experimental development. Expect bugs and breaking changes!

## Overview

Effortless Svelte Icon Component

- Made for SvelteKit & Vite environments
- Usable with all official [Icon Packs](https://github.com/steeze-ui/icons/)
- Dynamically change theme on runtime

## Installation

```bash
npm i @steeze-ui/svelte-icon
```

## Usage

```svelte
<script>
  //import icon component
  import {Icon} from '@steeze-ui/svelte-icon'

  //import as many icons from a Icon Pack
  import {LightningBolt} from '@steeze-ui/heroicons'
</script>

<!-- Set Icon Theme via the attribute -->
<Icon src={LightningBolt} theme='solid' class='color-gray-900'>
```

## Documentation

### Icon attributes

| Attribute | Default | Description                                                            |
| --------- | ------- | ---------------------------------------------------------------------- |
| src       | -       | (required) The source of a icon coming from an Icon Pack               |
| theme     | default | Configures to use a Icon Theme if available (otherwise render nothing) |
| size      | 100%    | Configures width and height                                            |
| \*        | -       | Any html attribute that is valid (e.g aria-hidden, class or style)     |

### Icon Packs

For all available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```
npm package: @steeze-ui/tabler-icons
Description: Icon Sources (based on @tabler/icons) built for @steeze-ui/icons
Author: Justin Voitel
Latest version: 3.3.1

## Overview

Effortless Icon Pack for tabler-icons

- Based on [@tabler/icons](https://tabler-icons.io/)
- Defines the Icon Source to be used in any [steeze-ui icon component](https://github.com/steeze-ui/icons/tree/main/packages/components)

## Installation

```bash
npm i -D @steeze-ui/tabler-icons
```

## Usage

### Svelte Example

```svelte
import { Anchor } from '@steeze-ui/tabler-icons'
import { Icon } from '@steeze-ui/svelte-icon'

<Icon src={Anchor} size="24px" />
```

## Documentation

### Themes

| Value   | Description                    | Prefered Size |
| ------- | ------------------------------ | ------------- |
| default | A outline version of the Icons | 24px          |
| filled  | A filled version of the Icons  | 24px          |

### Other Icon Packs

For all other available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```

This produces a ready-to-publish package for the npm registry
npm package: @steeze-ui/vue-icon
Description: Effortless Vue 3 Icon Component
Author: Justin Voitel
Latest version: 1.0.0

## Overview

Effortless Vue 3 Icon Component 

- Made for Vite environments
- Usable with all official [Icon Packs](https://github.com/steeze-ui/icons/)

## Installation

```bash
npm i -D @steeze-ui/vue-icon
```

## Usage

```vue
<script setup lang="ts">
  //import icon component
  import {Icon} from "@steeze-ui/vue-icon"

  //import as many icons from a Icon Pack
  import {Fire} from "@steeze-ui/heroicons"
</script>

<template>
  <!-- Set Icon Theme via the attribute -->
  <Icon :src=Fire theme="solid" size="24px" color="red"></Icon>
</template>
```

## Documentation

### Icon attributes

| Attribute | Default | Description                                                            |
| --------- | ------- | ---------------------------------------------------------------------- |
| src       | -       | (required) The source of a icon coming from an Icon Pack               |
| theme     | default | Configure to use a Icon Theme if available (otherwise render default) |
| size      | 100%    | Configures width and height                                            |
| \*        | -       | Any html attribute that is valid (e.g aria-hidden, class or style)     |

### Icon Packs

For all available Icon Packs visit [steeze-ui/icons](https://github.com/steeze-ui/icons)

## Development

This repo uses pnpm. To build a new version of the package just run:

```bash
pnpm install && pnpm package
```
npm package: @stef147/stencilapp
Description: Stencil App Starter
Author: Ionic Team
Latest version: 0.0.3

# Stencil App Starter

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool.  Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all. In many cases, Stencil can be used as a drop in replacement for traditional frontend frameworks given the capabilities now available in the browser, though using it as such is certainly not required.

Stencil also enables a number of key capabilities on top of Web Components, in particular Server Side Rendering (SSR) without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings).

## Getting Started

To start a new project using Stencil, clone this repo to a new directory:

```bash
git clone https://github.com/ionic-team/stencil-starter.git my-app
cd my-app
git remote rm origin
```

and run:

```bash
npm install
npm start
```

To build the app for production, run:

```bash
npm run build
```

To run the unit tests once, run:

```
npm test
```

To run the unit tests and watch for file changes during development, run:

```
npm run test.watch
```
npm package: @stefan-andai/ui
Description: And AI Design System — Tailwind preset + React components
Latest version: 0.1.0

# @stefan-andai/ui

And AI Design System — Tailwind CSS 4 preset + React component library.

## Install

```bash
npm install @stefan-andai/ui
```

## Setup

### 1. Import the CSS

```tsx
// app/layout.tsx or main entry
import '@stefan-andai/ui/styles.css'
```

### 2. Use the Tailwind preset

```ts
// tailwind.config.ts
import { andaiPreset } from '@stefan-andai/ui/preset'

export default {
  presets: [andaiPreset],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@stefan-andai/ui/dist/**/*.js',
  ],
}
```

### 3. Wrap with providers

```tsx
import { ThemeProvider, ToastProvider } from '@stefan-andai/ui'

export default function Layout({ children }) {
  return (
    <ThemeProvider>
      <ToastProvider>
        {children}
      </ToastProvider>
    </ThemeProvider>
  )
}
```

## Components

### Button

```tsx
import { Button } from '@stefan-andai/ui'

<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button size="sm">Small</Button>
<Button loading>Loading...</Button>
<Button href="/about">Link Button</Button>
```

### Card

```tsx
import { Card } from '@stefan-andai/ui'

<Card>Default card</Card>
<Card variant="elevated">With shadow</Card>
<Card variant="interactive" onClick={() => {}}>Clickable</Card>
```

### Form

```tsx
import { Form, Input, Select, Button } from '@stefan-andai/ui'

<Form onSubmit={(data) => console.log(data)}>
  <Input name="email" label="Email" />
  <Select name="country" options={countries} label="Country" searchable />
  <Button type="submit">Submit</Button>
</Form>
```

### Badge

```tsx
import { Badge } from '@stefan-andai/ui'

<Badge>Default</Badge>
<Badge status="positive">Active</Badge>
<Badge status="negative">Error</Badge>
<Badge status="warning">Pending</Badge>
<Badge status="info">Info</Badge>
```

### Typography

```tsx
import { Heading, Text } from '@stefan-andai/ui'

<Heading>Page Title</Heading>
<Heading level={2}>Section</Heading>
<Text>Body text</Text>
<Text variant="muted" size="sm">Secondary info</Text>
```

### Layout

```tsx
import { Container, Stack, Grid } from '@stefan-andai/ui'

<Container>
  <Stack gap="lg">
    <Heading>Title</Heading>
    <Grid cols={3} colsSm={1} gap="md">
      <Card>A</Card>
      <Card>B</Card>
      <Card>C</Card>
    </Grid>
  </Stack>
</Container>
```

### ThemeProvider

```tsx
import { ThemeProvider, useTheme } from '@stefan-andai/ui'

// Toggle theme
const { theme, toggleTheme } = useTheme()
```

## Design Tokens

Access raw tokens for custom components:

```ts
import { colors, spacing, typography } from '@stefan-andai/ui/tokens'
```

## Tailwind Preset

Use the preset standalone without components:

```ts
import { andaiPreset } from '@stefan-andai/ui/preset'
```
npm package: @stefan8412/intersperse
Description: Inserts an item between array elements
Author: stefan
Latest version: 1.0.3

## intersperse

INSERTS AN ITEM BETWEEN ARRAY ELEMENTS

## INSTALLATION

npm install @stefan8412/intersperse

## USAGE

import { intersperse } from  '@stefan8412/intersperse'

intersperse([1,2,3], 'hi') // [ 1, 'hi', 2, 'hi', 3 ]
npm package: @stefan_zetterberg/pagination
Description: A pagination React-component to use for paginating big arrays of items
Latest version: 1.0.9

# Pagination

## Requirements

Any React-application that need a pagination component.

## Install

    $ npm install @stefan_zetterberg/pagination

## Usage

```javascript
import React, { useState } from "react";
import List from "@material-ui/core/List";
import ChannelItem from "./ChannelItem"; // Your component to visualize one of your items 
import Pagination from "@stefan_zetterberg/pagination";

export default function ChannelList(props) {
  // State that holds the items for the current page of your paginated list.
  const [pageOfItems, setPageOfItems] = useState([]);

  // Callback function thats called when the page is changed in your paginated list.
  // Updates the state with the items to visualize.
  function onChangePage(pageOfItems) {
    setPageOfItems(pageOfItems);
  }

  return (
    <List data-testid="channelListCalled">
      <Pagination
        items={props.channels} // Here you send in all your items. Required!
        onChangePage={onChangePage} // Provide your callback function to be called upon page change. Required!
        pageSize={15}  // Default set to 10 if not provided. Tells maximum items per page
        initialPage={1} // Defaults to 1. Tells the initial page to visualize
      />
      {pageOfItems.map((channel) => {
        return (
          <ChannelItem  // Use any component youd like to visualize one item in your big array
            key={channel.id}
            channel={channel} // Just an example of how to send your items to your sub-component
          />
        );
      })}
    </List>
  );
}
```
npm package: @stefancfuchs/graphql-binding
Description: [![CircleCI](https://circleci.com/gh/graphql-binding/graphql-binding.svg?style=shield)](https://circleci.com/gh/graphql-binding/graphql-binding) [![npm version](https://badge.fury.io/js/graphql-binding.svg)](https://badge.fury.io/js/graphql-binding)
Author: Johannes Schickling
Latest version: 2.5.1

# graphql-binding

[![CircleCI](https://circleci.com/gh/graphql-binding/graphql-binding.svg?style=shield)](https://circleci.com/gh/graphql-binding/graphql-binding) [![npm version](https://badge.fury.io/js/graphql-binding.svg)](https://badge.fury.io/js/graphql-binding)

## Overview

🔗 GraphQL bindings are **modular building blocks** that allow to embed existing GraphQL APIs into your own GraphQL server. Think about it as turning (parts of) GraphQL APIs into reusable LEGO building blocks. Bindings may be generated in JavaScript, TypeScript, or Flow.

> The idea of GraphQL bindings is introduced in detail in this blog post: [Reusing & Composing GraphQL APIs with GraphQL Bindings](https://www.prisma.io/blog/reusing-and-composing-graphql-apis-with-graphql-bindings-80a4aa37cff5/)

## Install

```sh
yarn add graphql-binding
```

## [Docs :books:](https://oss.prisma.io/content/GraphQL-Binding/01-Overview.html)

Check out the docs on [oss.prisma.io](https://oss.prisma.io/content/GraphQL-Binding/01-Overview.html).

## Public GraphQL bindings

You can find practical, production-ready examples here:

- [`graphql-binding-github`](https://github.com/graphql-binding/graphql-binding-github)
- [`prisma-binding`](https://github.com/prisma/prisma-binding)

> Note: If you've created your own GraphQL binding based on this package, please add it to this list via a PR 🙌

If you have any questions, share some ideas or just want to chat about GraphQL bindings, join the [`#graphql-bindings`](https://prisma.slack.com/messages/graphql-bindings) channel in our [Slack](https://slack.prisma.io/).