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

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.

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:

<script>
  import Icon, { addCollection } from '@iconify/svelte/dist/OfflineIcon.svelte';

  export let label = '<UPDATE>';
  export let colour = 'inherit';
  export let ariaHidden = false;
  export let width = 48;

  /* some libraries add an id which can result in duplicate ids and that can impact accessibility so
  you can override with a random id if you face this issue */
  const id = Date.now().toString(16) + ((Math.random() * 0x1000000) | 0).toString(16);

  addCollection( /* REPLACE WITH ICON DATA */ );

  // https://api.iconify.design/<COLLECTION>.json?icons=<ICON>
</script>

<Icon icon="<COLLECTION>:<ICON>" {ariaHidden} aria-label={label} color={colour} {width} {id} />

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:

<script> /* ONLY IF YOU DO NOT WANT OFFLINE SUPPORT */
  import Icon from '@iconify/svelte';

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"

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:

<script>
  import Icon, { addCollection } from '@iconify/svelte/dist/OfflineIcon.svelte';

  export let label = 'Twitter icon';
  export let colour = 'inherit';
  export let ariaHidden = false;
  export let width = 48;

  /* some libraries add an id which can result in duplicate ids and that can impact accessibility so
  you can override with a random id if you face this issue */
  const id = Date.now().toString(16) + ((Math.random() * 0x1000000) | 0).toString(16);

  addCollection({
    prefix: 'simple-icons',
    icons: {
      twitter: {
        body: '<path fill="currentColor" d="M23.953 4.57a10 10 0 0 1-2.825.775a4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.06a4.923 4.923 0 0 0 3.946 4.827a4.996 4.996 0 0 1-2.212.085a4.936 4.936 0 0 0 4.604 3.417a9.867 9.867 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.053 0 13.998-7.496 13.998-13.985c0-.21 0-.42-.015-.63A9.935 9.935 0 0 0 24 4.59z"/>',
      },
    },
    width: 24,
    height: 24,
  });

  // https://api.iconify.design/simple-icons.json?icons=twitter
</script>

<Icon icon="simple-icons:twitter" {ariaHidden} aria-label={label} color={colour} {width} {id} />

🏡 Using the SVG Icon Component

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

<script>
  import TwitterIcon from '$lib/components/TwitterIcon.svelte';
</script>

<footer class="footer-container">
  <nav class="links">
    <a aria-label="Open my Twitter profile" href="https://twitter.com"
      ><span class="icon"><TwitterIcon /></span></a
    >
  </nav>
</footer>

<style>
  .footer-container a {
    color: var(--colour-alt);
  }
  .footer-container a:focus,
  .footer-container a:hover {
    color: var(--colour-dark);
  }
  .icon {
    margin: var(--spacing-4);
  }
</style>

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