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

Table of Contents

• Features
• Installation
• Usage
• Examples
• License
• Contributing

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

License

This package is completely free and licensed under the MIT license.

Contributing

Contributions are welcome. If you wish to make major changes, please open an issue first to discuss what you would like to change.

Make sure to update tests as appropriate.