Create your own styled-icons set

Styled-icons is a wonderful set that allows you to use popular icon sets in your React app through a common interface. We choose this as we could easily combine the different icons from various sets before we got our own. And we knew that when that time came we could slowly switch over to our own set, often with just changing the import path. We also wanted to make it easy for others to use our icons as well.

Now, with our icon set ready, the time has come to build our own styled-icons package and publish it. In this article I'll walk you through that journey.

svg-icons

First we had to look over how the current styled-icons are build and replicate that for our purpose. The styled-icons we use are actually the final result. The journey for the icons start with svg-icons where the various svg icons from all the sets are brought in and generated into standard output.

Originally we thought that we could just copy setup of the individual package and move to the next stage. Sadly the required tool which is a dependency is not published so we just went with copying the monorepo and replacing the various packages with just our own package.

Since we don't import from NPM package it was an easier setup where we put our original exported svg icons into sources directory and let the script take care of the rest. The source.js file then looked like this:

const glob = require('tiny-glob')
const fs = require('fs')
const path = require('path')

module.exports = async () => {
  const sourceFiles = await glob('source/*.svg', {absolute: true})

  return sourceFiles.map((filename) => {
    const match = filename.match(/([^/]+)\.svg$/)
    return {
      originalName: match[1],
      source: fs.readFileSync(filename).toString(),
      pack: 'literary-universe',
      width: '24',
      height: '24',
    }
  })
}

Exporting SVG icons from Figma

Now that everything was setup. All the dependencies running properly via pnpm it was time to test things out. I have exported few icons from our Figma and when I opened the Storybook to take a look there was nothing in the place where the icons were.

Took me a few hours to figure out all the bells and whistles of this. The underlying problem was that Figma doesn't export the SVG icons in the way we need. First it add fill="none" into the opening svg element which makes everything invisible. If you remove that you might get strange fillings in your icons. You might fix that by applying fill="none" to the offending shapes and strokes, but that will make those shapes invisible after converted by svg-icons builder. The issue here is that the SVG is not optimized as a web font. Thankfully there is a utility from inconly.io to change your SVG into an SVG that is webfont compatible.

Finally if you want you can further optimize the SVG code with additional tools like svgomg.

With that fixed we now have nice optimized svg-icons package ready.

Our own styled-icons set

With the svg-icons published we could now jump to our final step. Getting these svg-icons into styled-icons.

This was now super easy. Like with svg-icons we use the same mono repo and replace the packages folder content with just one folder with our own package.

In the package.json we need to make two changes (beside doing all the renaming of the package). First we need to add our svg-icons as dependency (replacing the dependency from the package we originally copied it) and finally in scripts change generate script to reference our svg-icons package instead of the original.

Now installing via pnpm from the monorepo and then running the installation script should take care of the generating the content of the package.

What's next?

So now we have things going you can check the final result in our repo. Next step is to add website like the official styled-icons website for our icon set to make it easy to find icons in our set, especially once our icon set gets larger.

If you like my work, please support me on GitHub Sponsors ❤️.