Svelte components

SVG

This component lets you load SVGs from two sources:

Icon sets from popular icon libraries
Custom SVGs from your project

Installation

First, make sure you install Splendid UI.

npm install splendid-ui

Then import SVG into your project.

import { SVG } from 'splendid-ui/svelte'

Loading Icons

The SVG component uses Iconify to load icons. This lets you load icons from popular icon sets just by naming the icon set and the icon name.

Here are some examples:

tabler:menu - Menu icon from Tabler
material-symbols:menu - Menu icon from Material Symbols
zondicons:menu - Menu icon from Zondicons

<SVG icon="tabler:menu" /> Tabler's Menu
<SVG icon="material-symbols:menu" /> Material Symbol's menu
<SVG icon="zondicons:menu" /> Zondicon's menu

Demo

Tabler's Menu

Material Symbol's menu

Zondicon's menu

Loading icons in Svelte

You can load the icons with the following code in Svelte:

<script>
  import { SVG } from 'splendid-ui/svelte'
</script>

<SVG icon="icon-set:icon-name" />

Loading icons in Astro

If you’re using Astro, you must add a client:load directive or the icons won’t be loaded.

---
import { SVG } from 'splendid-ui/svelte'
---

<SVG icon="icon-set:icon-name" client:load />

We need a client directive when using Astro because Iconify saves icons in localStorage, which means icons will not be loaded on the server.

Unfortunately, this means you’ll see a flicker of invisible icons for a bit when the page is loaded for the first time. (On subsequent loads, the process is so quick you’ll never even notice it).

Loading icons on subsequent requests can be pretty quick!

As you can see from the video above, the time taken to load the SVG icon is negligible.

Finding icon sets and names

You can view all supported icon sets and their respective icons through Iconify’s icon browser, the Figma component or Icones.

Loading a custom SVG from your project files

This SVG component also supports loading custom SVGs from your project files.

To use this, you need to make sure you have two conditions fulfilled:

There is an svg folder in your src directory.
You have added your SVG into this folder.

When both conditions are fulfilled, you can pass the name of this SVG file into icon and the SVG component will do the rest.

If you use Astro, there’s no need to use the client:load directive in this case because SVG will create the necessary SVG element in the HTML right away.

For example, if you have an SVG that is called logo.svg, you only need to pass logo into icon.

---
import { SVG } from 'splendid-ui/svelte'
---

<SVG icon="logo" />

SVG