How I published 165 icon sets to NPM

Problem

• Iconify is a great collection of all sorts of icon sets. It's used by all sorts of libraries.

• I love to use these icons in my apps by embedding the raw SVGs. I could do this with something like

  <script>
    import iconAdd from "@iconify-icons/ic/add";
    import Icon from "$lib/Icon.svelte";
  </script>
  <Icon icon={iconAdd} />
  

  This is the best way because it results in the smallest bundle sizes, while preventing flashes while the icons are loading.

• But recently Iconify seems to have taken a tyrade against importing raw SVGs.

  • They say that you should use the web component instead of your framework-specific component. This makes it impossible to ship the icon before JS loads, requiring a flash while the icons are still loading.
  • They updated the Svelte exports so that it's no longer possible to access the built in OfflineIcon, which bundles smaller than the Icon component.
  • They deprecated the packages with raw SVGs, forcing you to use another method to get updated icons. This is the subject of today's post, because I still want to use these.

Hiccups along the way

The first major problem I had was that the docs for libnpmpublish are incorrect in how to pass the token. It doesn't help that NPM has unintuitive error codes, but I found the solution: using forceAuth.

The next one was setting the version - some icon sets have info.version, some don't. Some have lastUpdated, some don't. I ended up 1. skipping sets with 0 icons 2. using version if there 3. if not, convert lastUpdated to a semver-esque version.

Solution

Use GitHub Actions to host the following process:

• Download JSON icon data from Iconify
• Use @iconify/tools to convert them to packages
• Publish them on NPM as @ktibow/iconset-<name>

This means that as soon as Iconify gets updates, our packages will get updates near-automatically.

Warning: As of publication, a few sets are broken because I can't publish them for 24 hours since I unpublished them before. These will fix themselves soon.