Closed charlesBochet closed 11 months ago
Setting "blocked: design" because we need the list of vetted icons before we can start implementation
@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
@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:
I think we have three options:
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?
I think we have two options:
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)
@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
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
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?
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!
https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty?type=design&node-id=11024-197483&mode=design&t=ItVXoMtBBrLdH8c7-0
Make sure that when opened, the icon currently selected is visible (Use the hover state as active state)