https://github.com/icons-pack/svelte-simple-icons

📦 This package provides the Simple Icons packaged as a set of Svelte components.
https://github.com/icons-pack/svelte-simple-icons

brand brands components design hacktoberfest icons simple-icons svelte svelte-simple-icons sveltejs svg svg-icons ui ui-components

Last synced: 1 day ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/icons-pack/svelte-simple-icons
• Owner: icons-pack
• License: mit
• Created: 2020-05-19T22:49:28.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2025-01-30T04:31:07.000Z (15 days ago)
• Last Synced: 2025-02-05T19:21:57.442Z (8 days ago)
• Topics: brand, brands, components, design, hacktoberfest, icons, simple-icons, svelte, svelte-simple-icons, sveltejs, svg, svg-icons, ui, ui-components
• Language: JavaScript
• Homepage:
• Size: 3.82 MB
• Stars: 58
• Watchers: 3
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


  


# svelte-simple-icons

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

  

    

  

  

    

  

  

    

  

  

    

  



## Installation

Install the package in your project directory with:

```sh

// with yarn

yarn add @icons-pack/svelte-simple-icons

// with npm

npm add @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

  

  

  

    import { SiReact, SiSvelte, SiDocker } from "@icons-pack/svelte-simple-icons";

  

  

  

  

```

## Change title

```svelte

  

  

    import { SiSvelte } from "@icons-pack/svelte-simple-icons";

  

  

```

## Custom styles

```svelte

  

    import { SiSvelte } from "@icons-pack/svelte-simple-icons";

  

  

  

    .myStyle {

      width: 35px;

      height: 35px;

    }

  

```

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

  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');

   

  />

  {text}

  button {

    display: flex;

    flex-direction: row;

    text-decoration: none;

    white-space: nowrap;

    transition: border-color 0.25s;

    box-shadow: none;

    text-shadow: none;

  }

  .icon {

    margin: 4px 4px 0 0;

  }

```

## Faster Compilations

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

```svelte

  import SiSvelte from "@icons-pack/svelte-simple-icons/icons/SiSvelte.svelte";

  import SiGithub from "@icons-pack/svelte-simple-icons/icons/SiGithub.svelte";

```