KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #developer-tools #cli #codex #claude-code #react #dsh-plugin #mcp #open-source #dsh #deepseek-harness

svelte-simple-icons

★ 88 Open GitHub ↗

📦 This package provides the Simple Icons packaged as a set of Svelte components.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# svelte-simple-icons

This package provides the [Simple Icons 16.12.0](https://github.com/simple-icons/simple-icons/releases/tag/16.12.0) packaged as a set of [Svelte](https://svelte.dev/) components.

## Installation

Install the package in your project directory with:

```shell
npm i @icons-pack/svelte-simple-icons
```

## Usage

All icons are imported from a single file, where [ICON SLUG] is replaced by a capitalized [slug](https://github.com/simple-icons/simple-icons/blob/master/slugs.md).

## Demo

[Edit codesandbox](https://codesandbox.io/s/busy-satoshi-g52wq?file=/App.svelte)

## Basic example

```svelte

<SiDocker />
```

## Change title

```svelte
  
  <script>
    import { SiSvelte } from "@icons-pack/svelte-simple-icons";
  </script>

<SiSvelte title="My title" />
```

## Custom styles

```svelte
  <script>
    import { SiSvelte } from "@icons-pack/svelte-simple-icons";
  </script>

## Type Definition for Dynamic Icons in Svelte Components

Sometimes, we want to provide the component dynamically to a component. We can do that by using `svelte:component` feature with the
helper type `SiComponentType` type definition.

```svelte
<script lang="ts">
  import type { SiComponentType } from '@icons-pack/svelte-simple-icons';

export let icon: SiComponentType;
  export let text: string;
  export let click: () => void = () => console.log('do something');
</script>

.icon {
    margin: 4px 4px 0 0;
  }
</style>
```

## Faster Compilations

If you only need a few icons, you can import them individually instead of the entire file to improve compilation.

```svelte
<script>
  import SiSvelte from "@icons-pack/svelte-simple-icons/icons/SiSvelte.svelte";
  import SiGithub from "@icons-pack/svelte-simple-icons/icons/SiGithub.svelte";
</script>

<SiGithub />
<SiSvelte />
```

svelte-simple-icons

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README