This package exports a single Svelte component that allows you to use Simple Icons in your Svelte projects in a simple and efficient way.
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
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} />
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} />
This package is completely free and licensed under the MIT license.
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.