Born, growing up.

How to create an icon lib for React within a Nx monorepo

2 months ago

pexels key notez 4965661 — Photo by Key Notez

Sorry for the lame title: this time I just wanted it to be obvious.

One of the most frequently asked questions in the Nx Community Slack workspace is along the lines of "I really need to have my SVG icons in a separate lib. I think I'm near the solution but it just doesn't work!".
This post is my answer. Now I have a handy link to share with everyone who asks that question.

A little less conversation

If you want to follow along, you can use gitpod-nx, my tool to quickly create a new Nx workspace in Gitpod and start hacking away.

Or, if you prefer, you should be able to easily pick up from where you need and apply every step to your project with no problems.

A little more action

Create a new Nx workspace with gitpod-nx. Let's call it icontopia. See details below.

Enter a scope name (used by TypeScript path aliases and published NPM packages):
icontopia
✔ What to create in the new workspace · react
✔ Application name                    · app
✔ Default stylesheet format           · styled-components

 >  NX   Nx is creating your v14.4.3 workspace.

   To make sure the command works reliably in all environments, and that the preset is applied correctly,
   Nx will run "npm install" several times. Please wait.

✔ Installing dependencies with npm
✔ Nx has successfully created the workspace.

styled-components is just my personal preference and it doesn't impact what we are going to achieve here.

Create a workspace lib for the icons - this is the first step if you are trying to apply the instructions to a repo you already have

npx nx generate @nrwl/workspace:library icons --standaloneConfig --unitTestRunner=none --no-interactive

Edit the tsconfig.base.json entry for the icons lib

"paths": {
  "@icontopia/icons/*": ["libs/icons/src/lib/*"]
}

Delete libs/icons/src/lib/icons.ts
Edit libs/icons/src/index.ts

// Fake!

Put at least one SVG icon inside the lib.
Here's one for you from tabler/tabler-icons, paste it into libs/icons/src/lib/icon-circle.svg.

<!-- libs/icons/src/lib/icon-circle.svg -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <circle cx="12" cy="12" r="9" />
</svg>

Import an icon from your library <3

import { ReactComponent as IconCircle } from '@icontopia/icons/icon-circle.svg';

export function NxWelcome({ title }: { title: string }) {
  return <p>Hello icon <IconCircle /></p>;
}

export default NxWelcome;

And then Bob's your uncle.

Do you have any questions / opinions?
Let me know on Twitter!