Feature request: expose icons as base64 data uris

[btc-echo-ben]

Currently, when allowing untitled ui icons to be selected in a CMS (e.g. sanity), there is no easy and efficient way to load the correct icon in the frontend. I have to either dynamically import one icon react component client side or import the whole icon package to use one icon. That leads to roughly ~120kb being loaded by the browser, albeit only using one icon.

That is because the icons are exposed in the npm package as React components only.

It would be great to offer the icons as base64 data uri's in the package as well. That way I can store the icon value in the cms and load only the data for the icon I need in the frontend.

Then one can also offer a helper react component that one can pass the data uri to and thus render the icons in the frontend.

I already implemented such a system and would be willing to issue a pull request with the necessary extensions of this package. Please quickly give me an indication if such a contribution would be welcome so that I can get started.

[btc-echo-ben]

When setting the svg not through background-image but mask-image one can even set the color of the svg with background-color: https://nucleoapp.com/blog/post/convert-svg-to-base64-data-uri#why-data-uri

[btc-echo-ben]

we could optimize the svg data uris with svgo. Just avoid base64'ing them as it introduces bandwidth overhead: https://css-tricks.com/probably-dont-base64-svg/#aa-a-test

[btc-echo-ben]

#7 ping @deebov

[deebov]

Thanks for the PR @btc-echo-ben! I started reviewing it some time ago but it's just too big so I'm still reviewing it.

[btc-echo-ben]

Hey there! Okey, thats great to hear 💯 !! Most of the changes (a couple thousand files) is just the dist folder that's committed now... Maybe that helps with the review