@icons-pack/svelte-simple-icons

svelte-simple-icons

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

Installation

Install the package in your project directory with:

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

Demo

Edit codesandbox

Basic example

  <!-- Import a specific icon by its slug as: -->
  <!-- import { Si[ICON SLUG] } from 'simple-icons'; -->

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

  <SiSvelte color="#FF3E00" size={90} />

  <SiReactJs color="#61DAFB" size={50} />

  <SiDocker />

Change title

  <!-- title default "Svelte" -->
  <script>
    import { SiSvelte } from "@icons-pack/svelte-simple-icons";
  </script>

  <SiSvelte title="My title" />

Custom styles

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

  <SiSvelte class="myStyle" />

  <style>
    .myStyle {
      width: 35px;
      height: 35px;
    }
  </style>

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.

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

<button on:click={click}>
  <svelte:component
    this={icon}
    title={text} <!-- optional, along with size and color properties --> 
  />
  {text}
</button>

<style lang="scss">
  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;
  }
</style>

Faster Compilations

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

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