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.
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.
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.
npx nx generate @nrwl/workspace:library icons --standaloneConfig --unitTestRunner=none --no-interactive
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!
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 { ReactComponent as IconCircle } from '@icontopia/icons/icon-circle.svg';
export function NxWelcome({ title }: { title: string }) {
return <p>Hello icon <IconCircle /></p>;
}
export default NxWelcome;
Do you have any questions / opinions?
Let me know on Twitter!