Best way to preview icons in "@itwin/itwinui-icons-react"?

[rseydler]

Thanks for giving us lots of nice icons!

The icons delivered with the iTwin Viewer are in SVG format and you can view those with a suitable plugin in VSCode.

What is the best way to preview the icons in itwinui-icons-react?

TIA!

[mayank99]

Hi @rseydler 👋

@itwin/itwinui-icons-react has the same icons as @itwin/itwinui-icons. You can view them on unpkg: https://unpkg.com/@itwin/itwinui-icons/icons/

Edit: We now have a dedicated site for viewing icons: https://itwin.github.io/iTwinUI-icons/

[vincentbg]

This answer doesnt solve the problem. We still have no way to view the icon beside opening them in visual studio. The link provided doesnt show any preview. What would be nice is a icon database with a search icon for the title and each icon have each a square...

[veekeys]

Have you tried clicking on the icon in the provided link? It opens up, no need to use Visual Studio for that.
You can use built-in browser search to find the exact icon (ctrl + f).
We have plans to have a public documentation website, where we could include advanced icons search, but do not expect that soon.

[vincentbg]

You are right , i do not need visual studio. Good thing you have something in the pipeline for this because its not really user friendly right now. Thx !

[MichaelBelousov]

I wanted this so I came up with a hack.

open https://unpkg.com/browse/@itwin/[email protected]/icons/ and read then paste the following javascript into your browser console to load the images into the left icon.

document.querySelectorAll("tr").forEach((tr) => 
  tr.children[0].innerHTML =  
    `<img src="${tr.children[1].children[0].href?.replace(/\/browse/, '')}"></img>`
)

makes the page look like this: