SvelteKit SVG Icons: using Iconify and Icônes with Svelte | Rodney Lab

SvelteKit SVG Icons: using Iconify and Icônes with Svelte #

🖼 What is Icônes and What is Iconify? #

In this post on SvelteKit SVG icons, we see how easy it can be to get your pick of 100,00 SVG icons into your Svelte app. We will do that by adding just one single dependency — the Iconify Svelte package. Iconify is a unified icon framework. In the past you needed one package to get font awesome icons into your library, then another to get the icons for the latest social sharing app. Iconify lets you access both libraries (and many more), importing just the icons you need.

With that many libraries and icons to choose from, you will, without a doubt, need a catalogue and search tool to help you find the icons you need for your app. That’s where icônes comes in. The app, created by Anthony Fu from the Vue core team, provides an interface for iconify, helping you find exactly what you need. You just search for an icon and once you have something you like, it gives you a shortcode, which you can use to get that icon into your SvelteKit app. We are going to see just how to do that in this post adding footer icons to a demo Svelte app.

🧱 What we’re Building #

SvelteKit SVG Icons: What we're building

We will see how you can accessibly add SVG icons to a SvelteKit app using iconify. If you already have a SvelteKit app, you can create a new development branch and add the icons to it as you follow along. That said, you can also clone the complete code we build from the Rodney Lab GitHub repo , using that as a starting point for a new app.

Adding the SVG icons with iconify is fairly simple so let’s get going straight away! In a further, follow-up post we will use iconify to create share buttons which visitors can tap or click to share pages from your site on Twitter and other networks using the Web Share API.

⚙️ SvelteKit Iconify Setup #

The only package you need to install is @iconify/svelte. Let’s add that to your project now:

pnpm add -D @iconify/svelte

🧩 Svelte Icon Component #

Next, we’ll create a Svelte icon component, but before that, head over to icônes  and find the icon you want. Select it. A modal titled How to use the icon? will pop up.

SvelteKit SVG Icons: icônes site

Here we selected the twitter icon from the simple-icons collection. Make a note of your own selected combination. You can just click the Svelte button to get an SVG path which you can then paste into your code. However, we will use the iconify package to get a little more flexibility. Assuming you are creating a Twitter icon, create src/lib/components/TwitterIcon.svelte in your project (change the name if you are adding another icon). Add the following template code:

In line 2 we import the Icon component as well as the addCollection function for offline support. We will do a one-off download of the actual icon data in a moment. As an alternative, if you are not bothered about offline support, you can skip the addCollection call and have iconify download the icon when it needs it. In this case replace line 2:

Moving on, in line 11, of the full code, we generate a random id. This can be useful since some icon collections will add an id to the generated SVG. If you use the same icon more than once on a page, you will probably get this flagged up by automated accessibility testing.

Downloading Icons for Offline Development #

Possibly the easiest way to get the icon data for offline support is using the Terminal. Just create a URL using the template in line 15 and use curl from the Terminal to download. For the simple-icons twitter icon the full command will be (include the "s):

curl -L "https://api.iconify.design/simple-icons.json?icons=twitter"

SvelteKit SVG Icons: using Iconify and Icônes with Svelte: Iconify Offline download

This returns a JSON object which you can just paste into the template code in line 13. We also need to add the name of our chosen icon in line 18 as well as an accessible descriptive label in line 4. Here is the complete code for our Twitter icon:

src/lib/components/TwitterIcon.svelte — click to expand code.

🏡 Using the SVG Icon Component #

Finally we can add the SVG icon component as a footer icon:

File is truncated here, see it in its full glory on the GitHub repo . That’s it!

🙌🏽 SvelteKit SVG Icons: Wrapping Up #

In this post we have seen a fairly simple way to add reusable SVG icon components to your Svelte app using iconify. In particular we have seen:

• how to find icons from just about any icon library,
• how to download iconify icons for offline support in your Svelte app,
• some ways you can improve accessibility of SVG icons.

The full code for the app is available in the repo on Rodney Lab GitHub .

Let me know how you use this in your projects. Also look out for the follow-up post on using the Web Share API with iconify to add social share buttons to your Svelte app.

🏁 SvelteKit SVG Icons: Summary #

How can you use SVG icons in SvelteKit? #

You can add SVG icons to your SvelteKit app using iconify. This one package will gain you access to hundreds of thousands of icons from just about any icon collection. This saves adding extra packages for icons missing from your favourite library. On top, your app will be easier to maintain since you are using a single API, or interface, to add the icons to your Svelte app. We have seen a way to create a reusable Svelte SVG icon component, making your code more scalable.

How do you use icônes icons in Svelte? #

The icônes app provides a simple interface to search just about any icon library out there. Just go to https://icones.js.org/ and start your search. Once you have found what you were looking for, give the icon a click and you will get a COLLECTION:ICON shortcode which you can now use with iconify. We have found a way to download icons from iconify for offline use.

Is there a SvelteKit SVG icon plugin? #

There is an iconify plugin for Svelte: @iconify/svelte which works well with SvelteKit. Once you have specified your icons using the simple API, iconify downloads them automatically in the background. You can also download the icons manually so you can continue to work on your app while you might not have internet access.

🙏🏽 SvelteKit SVG Icons: Feedback #

Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as SvelteKit. Also subscribe to the newsletter to keep up-to-date with our latest projects.