@willingtonortiz/svelte-simple-icons NPM

@willingtonortiz/svelte-simple-icons

What is this?

This package exports a single Svelte component that allows you to use Simple Icons in your Svelte projects in a simple and efficient way.

Features

🌟 Designed for Svelte 5: Fully compatible with the latest version of Svelte.
🔒 Fully type safe: Ensures your code is robust and error-free.
📦 Small bundle size: Only ~2kB, ideal for keeping your applications lightweight.
🧪 Open source and fully tested: With 100% coverage.

Installation

To get started, install the package along with Simple Icons in your project:

npm install simple-icons @willingtonortiz/svelte-simple-icons

Alternatively, you can use:

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

pnpm add simple-icons @willingtonortiz/svelte-simple-icons

bun add simple-icons @willingtonortiz/svelte-simple-icons

Usage

The only required prop is icon, which is the Simple Icon to use.

<script lang="ts">
  import { SIIcon } from "@willingtonortiz/svelte-simple-icons";
  import { siSvelte } from "simple-icons";
</script>

<SIIcon icon={siSvelte} />

API

Customization is as easy as passing props to the component. <SIIcon/> supports all the props that a normal SVG element supports, plus a few extras:

icon: The Simple Icon to use (required).
element: A bindable Svelte reference to the SVG element.
size: The size of the icon (sets both width and height).

<script lang="ts">
  import { SIIcon } from "@willingtonortiz/svelte-simple-icons";
  import { siSvelte } from "simple-icons";

  let element = $state<SVGElement>();
</script>

<SIIcon bind:element icon={siSvelte} color="#000000" size={64} />