Simple Icons for Svelte: Small Bundle, Full Type Support

svelte-simple-icons is a lightweight Svelte component that makes it easy to integrate the popular Simple Icons library into your Svelte projects.

This integration lets you add 3200+ high quality SVG brand and logo icons with minimal configuration.

GitHub Repo

Features

🔍 Type-safe implementation with full TypeScript support.

⚡ Minimal bundle size of ~2KB

🌟 Designed to work with the latest version of the Svelte framework.

📱 Responsive sizing through customizable props.

🛠️ Full SVG customization capabilities.

✅ 100% test coverage for reliability

Use Cases

Web Applications: Use Svelte Simple Icons to add recognizable logos and icons to your web applications.
Dashboards: Incorporate icons into dashboards to represent different data points or categories.
Landing Pages: Utilize icons to highlight key features or services on landing pages.
Mobile Apps: Integrate icons into mobile applications built with Svelte to create a consistent and intuitive user interface.
Documentation: Enhance documentation sites with icons to illustrate concepts and guide users through tutorials and guides.

Installation

To start using svelte-simple-icons, install the package along with the Simple Icons library:

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

Alternative commands for other package managers:

Yarn: yarn add simple-icons @willingtonortiz/svelte-simple-icons
PNPM: pnpm add simple-icons @willingtonortiz/svelte-simple-icons
Bun: bun add simple-icons @willingtonortiz/svelte-simple-icons

Usage

To use an icon, first import the SIIcon component and the specific icon from the Simple Icons library. Reference the slug from the Simple Icons documentation to choose the appropriate icon.

<script lang="ts">
  import { SIIcon } from "@willingtonortiz/svelte-simple-icons";
  // import { si[ICON SLUG] } from 'simple-icons'
  import { siSvelte } from "simple-icons";
</script>
<SIIcon icon={siSvelte} />

For customization, you can pass additional props to the component. These include standard SVG attributes and specific props like size and element.

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