Use custom SVG icons as iX icon

[ugurbayraktarr]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

Suggestion / feature request

As far as I know, we have 2 options in order to add an icon to our project. 1- Use default ix icons with name. 2- Use custom icons with url.

We want to use our custom svg icons in our project. So, we hosted them on our application and used them as relative url. But there is a problem. When we need to use the same icon many times (some list screens require this), the IxIcon component makes an api call, fetches the svg file and renders it. If the screen has many icons, the svg files are loaded in order, so we can see the empty area as they load. (In the example, we couldn't observe this because stackblitz uses disk cache).

I've prepared an example to see multiple fetches (see network): https://stackblitz.com/edit/ygj7zm-jp8chf?file=src%2FApp.tsx

I suggest that, if we can pass svg as an element to the IxIcon component, we can handle this problem. 2nd suggestion, can iX handle this case via "IxApplicationContext" or something else that allows just make only one api call?

Please note that the solution should cover all components related with icon, i.e.: IxIconButton component's icon property.

[danielleroux]

You can test the latest snapshot build: npm i @siemens/ix-icons@0.0.0-20240515161342 (no production version will be deleted) or the stackblitz https://stackblitz.com/edit/ygj7zm-flt3qm?file=package.json

The ix-icon is part of another repo, and here is the PR which should solve the loading issue https://github.com/siemens/ix-icons/pull/56

[ugurbayraktarr]

It seems that this version solves the problem perfectly. When do you plan to release this version?

[danielleroux]

Can not call you a exact date, but as soon as the PR is merged we check if we have some other work to do afterwards we will build the release version.