svelte-simple-icons

KO | EN

gitlite — search

#javascript #python #hacktoberfest #llm #go #android #machine-learning #rust #deep-learning #nodejs #windows #ios #mcp #open-source

svelte-simple-icons

(★ 89)

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

파일 탐색기

최종 버전 다운로드 (.zip)

- config.json
- README.md
- - check-pull-request.yml
  - release.yml
- FUNDING.yml
- - svelte-simple-icons.svg
- clean_package.mjs
- generate-components.mjs
- update-readme.mjs
.gitignore
.npmrc
CHANGELOG.md
LICENSE
package.json
pnpm-lock.yaml
README.md
svelte.config.js
tsconfig.json
vite.config.js

// 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

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

svelte-simple-icons

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README