Inlining of SVG icons used in CSS (in examples like examples/react-rich/)

[vadimkantorov]

In Lexical examples (e.g. in https://github.com/facebook/lexical/blob/main/examples/react-rich/src/styles.css), SVG icons are used like so: i.undo { background-image: url(icons/arrow-counterclockwise.svg); }

It appears that it should prevent SVG asset inlining feature in Vite:

• docs(assets): add note to inlining SVG through url() vitejs/vite#15534 - double-quotes seem needed url("icons/arrow-counterclockwise.svg") by Vite to parse these usages in CSS
• what could also prevent inlining: vite currently produces warnings like icons/arrow-counterclockwise.svg referenced in icons/arrow-counterclockwise.svg didn't resolve at build time, it will remain unchanged to be resolved at runtime

Currently the ./public/icons/ directory currently gets copied to ./dist/icons/ (despite all my attempts to make them inline with https://github.com/facebook/lexical/blob/main/examples/react-rich/ as example)

[vadimkantorov]

What worked for inlining the SVG icons into CSS using the built-in Vite SVG inlining:

• moving public/icons/ to assets/icons/
• replacing url(icons/...) with url("../assets/icons/...")

I think, for toolbar icons inlining makes sense (especially for examples), so maybe worth at least mentioning this in README of examples/react-rich (and other examples) or actually move away from special public dir for toolbar SVG icons