Icon naming conflict

[pareeohnos]

It seems that there are multiple icons that have the same name based on the main website, and as a result I'm unable to import the correct one. For example, the following two icons are both called Bin 1 on the website

And when viewing the relevant import statement, they both show

import Bin1 from '@streamlinehq/streamlinehq/images/streamline-light/bin-1.svg'

When the package downloads all of the icons, the folder only contains a single bin-1.svg icon (no copies, or 1.1 or anything) and as such, importing the bin icon that I actually want gives me the wrong icon.

I'm not sure how many icons this is happening to, this is jus the one I've found but I'm sure there are probably more

[cbrwizard]

You're right, it's an issue in this package design and it must be fixed. We will be releasing a 1.1.X version of a package soon which uses an image's name + a shortened part of its id. Eg this Bin1 image will be available to import as @streamlinehq/streamlinehq/images/streamline-light/bin-1-n8OgWa.svg. This means it will be a breaking change unfortunately :\

[pareeohnos]

ok great thanks, I can live with that 🙂

[cbrwizard]

Done: this change is implemented in version 2.0.0 https://github.com/webalys-hq/streamlinehq-npm/releases/tag/2.0.0. Please note that it introduces a couple of other breaking changes as well.

Please check it out and tell if it solves your issue.

[timc13]

This doesn't seem very ergonomic. Is there somewhere that lists these ids so that we can easily import icons as needed ?

[cbrwizard]

It's in the app itself: go to https://app.streamlinehq.com, select a family you're interested in, then select an icon you're interested in and see the import path in the sidebar

Another option is to use an IDE which suggests you to autocomplete a path to an image:

I've updated README with these instructions https://github.com/webalys-hq/streamlinehq-npm/blob/master/README.md

On a side note, we're considering adding plugins to popular IDEs: Visual Studio Code and Webstorm, where you would be able to select an image and paste it in code visually. Another thing we're adding soon is a desktop app with drag&drop support.