Components and utilities for the modern web
Svelte components


This component lets you load SVGs from two sources:


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
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:

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

<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:

  1. There is an svg folder in your src directory.
  2. 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" />

Like what you're seeing?

I'm on a quest to make web development extremely easy — by building components and utilities that will help all of us build better apps at a much faster pace.

I'd like to send you an update when I release something new in Splendid UI. If you want to be updated, please leave your email address below.

Powered by Buttondown