Site settings
Change the appearance of the site to suit your preferences
How to add new icons
Every now and then, we need a shiny new icon. Luckily, adding one is pretty straightforward—as long as you follow the steps below. This guide will take you through it, from getting the assets to releasing the final version.
🖼️ Step 1: Get the Icon Assets
First things first—ask your favorite designer (yes, we all have one) for the new icons in SVG format.
Each icon will typically have six versions:
- Three sizes: 18px, 24px, and 30px
- Two styles per size: Outlined and Filled
Your zip file should look something like this:
# Chapter Fill 18x18.svg# Chapter Fill 24x24.svg# Chapter Fill 30x30.svg# Chapter Outline 18x18.svg# Chapter Outline 24x24.svg# Chapter Outline 30x30.svg
✏️ Step 2: Rename Your Icons
To ensure our icons have consistent component names, we follow a strict naming convention:
# {icon-name}-{variant}-{size}.svg
- The icon name can have spaces.
- The variant is either
outlineor fill(not "outlined" or "filled"). - The size is written as
nxn(e.g., 30x30). - Everything is lowercase.
✅ Correct examples:
# chapter-fill-24x24.svg# phone signal-outline-30x30.svg# chevron right-outline-18x18.svg
📌 Pro Tip: If you're dealing with multiple icons, take them one at a time. A small mistake in naming can cause big headaches later!
📂 Step 3: Place Your Icons in the Right Folder
Navigate to the packages/spor-icon/svg folder, and you’ll see a set of icon categories:
❯ lscommunication map onboard-service transportationfeedback misc payment travellayout navigation social-media
If you’re unsure where to place your icons, ask your designer or use your best judgment. Once decided, drop your renamed icons into the correct folder.
🔄 Updating an Icon?
Just replace the existing file! If the previous version had a slightly different name, check before deleting anything.
⚙️ Step 4: Build & Verify
Now, let’s build the icons to make sure everything is working.
1. Navigate to the project root and run:
npm run build
This generates the React and React Native icon components.
2. Verify that your icons were built correctly:
- Go to
packages/spor-icon-react/tmp - Go to
packages/spor-icon-react-native/tmp - Look for your correctly named component inside these folders.
🚀 Step 5: Release a New Version
Time to publish your hard work!
1. Run the following command:
npx changeset
This will ask which packages need a version bump. In this case, you must include:
@vygruppen/spor-icon@vygruppen/spor-icon-react@vygruppen/spor-icon-react-native
(Only the first one is pre-selected, so don’t forget the others!)
2. Choose the correct version bump:
- Major release (
1.x.x → 2.0.0) → If you’ve removed or renamed an icon. - Minor release (
1.1.x → 1.2.0) → If you’ve added a new icon. - Patch release (
1.1.1 → 1.1.2) → If you’ve updated an icon without renaming it.
🔎 Need a refresher on Changesets? Read more here.
🔀 Step 6: Create a Pull Request
Push your branch and open a pull request.
💡 No need for screenshots—they are generated automatically! However, we’d love to hear why these icons are necessary. That helps us avoid adding one-off icons that should have stayed in a single project.
🎉 That’s It!
Congrats, you’ve done your part! Now, the Spor team will review your changes and deploy a new version. If you give us a quick Slack ping, we can usually get it done in minutes.
🚨 Ran into an issue? Let us know so we can improve this guide for future icon wizards like yourself! Now go forth and publish those icons! 🎨✨