[FR] PUI & Category / Location / ... icons

[wolflu05]

Please verify that this feature request has NOT been suggested before.

• [X] I checked and didn't find a similar feature request

Problem statement

PUI doesn't show any defined icons, neither on e.g. stock location edit icon field nor the icon on the details pages, breadcrumbs, ...

Suggested solution

Because we are now using tabler icons in PUI, the old fontawesome icons are not that easily integratabtle. In this FR I would start to suggest, that we should build our own, per instance, icon library into inventree where:

1. all icons can be get via a single url in json format
2. maybe the server can generate a custom sprite image with all icons available on a single picture where the icon position is sent in the json endpoint referenced in point 1
3. per default we should make the tabler icons available? But maybe add the font awesome icons as opt-in function?
4. admins can upload custom icons (not all icons users want are available on the tabler/FA icons package)
5. clients can the use this information to provide consistent icons across systems (PUI, App, reports, ...) with no differences between icon package dependency versions

Of course we would need some migration from front awesome icons to the new icon system, but that is TBD.

Currently icons are integrated in:

• location icon
• location type icon
• category icon But that could be later extended, if we build this generic, and maybe add an icon field type to the PUI form framework.

Describe alternatives you've considered

Just add the font awesome icons to PUI too, but I think that's not a very clean solution, and users also are not able to define custom icons. Because that's also a big point for me, not all icons are available in the font awesome icons package.

Examples of other systems

No response

Do you want to develop this?

• [x] I want to develop this.

[SchrodingersGat]

I personally don't see the benefit of this - the tabler.io icons are very extensive, and we (@LavissaWoW mostly) have already been working on a framework to map a string value to rendering an actual icon.

All we have to do is expose an API where we can list the available icons. But uploading custom icons, etc, feels like a lot of extra work

[wolflu05]

Im not sure if you understand correctly what I meant. I'm not talking about icons used in PUI through the UI for a better user experience. I'm talking about the icons an InvenTree user can define for a location or a part category he created (the icons introduced by #3542).

Currently this feature is completely missing from PUI, and only works in CUI and the app. To support this, we would need to include fontawesome in PUI too, which feels wrong because:

• it drastically will increase build size
• there is no way it's guaranteed that an icon looks the same on all clients (font awesome version differences)
• custom icons which are not in the fa library are not possible

Hope this clarifies my issue.

[SchrodingersGat]

Ok, so my vision for icon support in PUI is:

• We allow any icons which are mapped to "strings" in this file
• We allow the icons to be selected from a custom drop-down item (where the "choices" are extracted from that file)
• Support for existing font-awesome icons is dropped
• Users can re-map icons from the old font-awesome set to our new tabler set
• We document this (breaking) change in the release notes

[wolflu05]

Ok, so you want to completely drop FA support and continue with the table icons for the future and don't allow any other custom icons?

We would need to provide a migration tooling where the user is asked icon after icon to migrate the icon to a table icon.

Then we would need to support the tabler icons for at least:

• CUI
• PUI
• Mobile app

And regarding the icon selector, I imagine it like an emoji keyboard from a phone.

Which would essentially just be a Mantine Popover showing a search field and a scroll area listing all available icons (~5.2k). That way we first have some validation build in for that field and it's not just a free text field where the user could input any css class.

For rendering all icons in a list, we could do it like this:

import { icons } from "@tabler/icons-react";
import { ScrollArea } from "@mantine/core";

const App = () => {
  return (
      <ScrollArea h={400}>
        {Object.entries(icons).map(([k, Icon]) => <Icon key={k} />)}
      </ScrollArea>
    )
}

But we carefully have to think about that, as this adds like 1.68Mb of gzipped data: (measured by https://www.npmjs.com/package/vite-bundle-visualizer)

An other option would be to use the webfont option (provided by https://github.com/tabler/tabler-icons/releases ), which is probably also the easiest for the app then?