Inlining SVG icons referenced in CSS (but stored in ./public/icons/*.svg)

[vadimkantorov]

I have ./src/styles.css which references the SVG icons like so: i.undo { background-image: url("icons/arrow-counterclockwise.svg"); }, the SVG icons themselves are stored in ./public/icons/*.svg.

Currently, no inlining is happening, ./public/icons/ gets copied to ./dist/icons/ and the background-image-url's to SVG icons in the produced bundle point to ./icons/ :(

How can I make use of the Vite's native SVG inlining feature: #14643 ?

My full code is in /~https://github.com/vadimkantorov/moncms

Thank you!

[hi-ogawa]

public has a special meaning on Vite and it preserved the exact file path on build https://vite.dev/guide/assets.html#the-public-directory. You can move it outside of public to trigger Vite's asset hashing/inlining behavior https://stackblitz.com/edit/vitejs-vite-r3w49z8f?file=src%2Fstyle.css

[vadimkantorov]

Thank you for your response! So should I try renaming public to assets and reference the icons in ./src/styles.css as "../assets/icons/arrow-counterclockwise.svg"?

[hi-ogawa]

So should I try renaming public to assets and reference the icons in ./src/styles.css as "../assets/icons/arrow-counterclockwise.svg"?

Yes, I think that should work.

[vadimkantorov]

Indeed, it worked! Thank you very much! As a non-webdev, understanding and debugging these is very hard.

It could be useful if vite had some sort of verbose mode where it printed its discovered urls to inline and its decisions to inline/ignore them.