Contribute to Spor

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

Retrieve 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 outline or fill (not "outlined" or "filled").
The size is written as nxn (e.g., 30x30).
Everything is lowercase.

It can look like this:

# chapter-fill-24x24.svg
# phone signal-outline-30x30.svg
# chevron right-outline-18x18.svg

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:

❯ ls
communication   map             onboard-service transportation
feedback        misc            payment         travel
layout          navigation      social-media

If you’re unsure where to place your icons, ask the 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

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⁠Ekstern lenke.

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.

Fundamentals

Getting started