SvelteKit SVG Icons: using Iconify and Icônes with Svelte SvelteKit SVG Icons: using Iconify and Icônes with Svelte
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.
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.
The only package you need to install is
Let’s add that to your project now:
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.
Here we selected 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:
2 we import the
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
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
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
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
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.
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!
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 have a look at the follow-up post on using the Web Share API with Iconify to add social share buttons to your Svelte app.
- 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.
- 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.
- 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.
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 .
💫 Just dropped a new post taking you through how to add a Twitter SVG icon to your Svelte site footer using iconify and icônes in ❤️ SvelteKit.— Rodney (@askRodney) March 25, 2022
Also works in Astro or Slinkity Svelte components.
Hope you find it useful!
#Svelte #SvelteKit #askRodneyhttps://t.co/5ilXC6l0wl
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.