[Timebox] Add an IconPicker to twenty ui library

[charlesBochet]

https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty?type=design&node-id=11024-197483&mode=design&t=ItVXoMtBBrLdH8c7-0

• Display all "vetted" react tabler icons within a sublist (similar to what we have in @/ui/icons
• be able to search through the possibilities
• be able to pass a selectedIcon
• get out the new selectedIcon onChange

Make sure that when opened, the icon currently selected is visible (Use the hover state as active state)

[FelixMalfait]

Setting "blocked: design" because we need the list of vetted icons before we can start implementation

[charlesBochet]

@FelixMalfait we can work on it with the existing list of "vetted icon". Adding many other icons can be tackled later, it should not block the implementation

[FelixMalfait]

@charlesBochet good point! But the current set of vetted icons doesn't match at all what we would want to label a view so we still need to figure out the right answer on how to generate a good subset.

I dug a bit into it an:

• Doing it manually is hard and slow
• There is no existing subset

I think we have three options:

1. Doing it manually
2. Relying on ChatGPT code interpreter. I think it'll do a better job than us doing it manually (with 4000 icons you can't even remember the one you already selected)
3. Include all icons and have a powerful search/loading system

What I don't like about 1/2 is that it doesn't solve for the categories/tags that are added to icons. (e.g. "user" icon could also be labelled as "person", "human" etc)

For (3) I found https://github.com/tabler/tabler-icons-figma/tree/main Search is performed locally and relies on https://www.fusejs.io/ It includes a huge json that includes the list of tags. The file is 3mb. If we strip out the content of the svg from that file and only keep the categories/icon name, we'd probably have a reasonable size but still need to load the icons when they're displayed?

Any way (3) could be done without overloading the frontend?

[charlesBochet]

I think we have two options:

• return the svgs corresponding to the search from the backend (latency while searching which a user might not understand as this is not data)
• use webpack chunks to not impact the app loading and only load the 3mB icon file while displaying the picker.

I think we should try to reduce it to 300kb which should be possible using gzip + doing a subset (we can exclude all the icons that are filled for example)

[FelixMalfait]

@charlesBochet can we do a separate server like for favicons? I did a basic POC in 15min here that does the job: https://github.com/twentyhq/icon-search

/search/xxx to search for an icon /fetch/icon-name.svg to display icon

Json is only loaded once when the server starts, performance seems to be very good locally

[charlesBochet]

My recommendation is to not over engineer it and to either load a static json with all icons (excluding the "filled" ones) with XHR or to use react lazy loading. (see https://tabler-icons.io/icons.json?1695622759711) Once compressed the file should be <400kb and only loaded when we open the picker

[thaisguigon]

I am working on a PR to implement the UI component. We might want to open another issue to choose the icons list and how to load them?

[Bonapara]

My preferred option would also be to include all "Outlined" icons with a great search as V1. Removing "Design needed" add it back if needed!