How to require an image

Question

I am currently working on some hiccup components and they use different icons. Is there a way I can import them in the code?

Answer 1

Is that SVG? Convert SVG markup into Hiccup (https://htmltohiccup.herokuapp.com/) and put it into the code as Reagent component.

Comments

It's an SVG file. Is there a tool I can use to convert SVG files to SVG markup?
Also I couldn't find a definite answer, but is there a way to require an image?

---

SVGs are markup. Just open the svg in a text editor and you'll see the markup. You can then copy/paste it into that html to Hiccup converter.

Alternatively, you can just use img tags to add them.

Here's a link describing both techniques: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web

It is also possible to use them as background images in CSS. And you can also add them all to a Font and then use them as a Font: https://mediatemple.net/blog/tips/creating-implementing-icon-font-tutorial/

---

Hum... also not sure what you mean by require an image. In theory, you could slurp the SVGs and append them to the rendered html returned from Hiccup wherever you want to put them. Or use hickory https://github.com/davidsantiago/hickory to convert them to Hiccup and insert them in Hiccup before rendering. This is the closest I can think for requiring images inside your Hiccup.

Apart from manually inlining the SVGs, or automatically like I just mentioned using say slurp, you would need to add the SVGs to your web server as resources. Then in the Hiccup you would have a reference to their URL.

---

I'm guessing the intention is to do something like this:
https://stackoverflow.com/a/43851378

---

If that's the case, it's not technically "requiring/importing an image", it's just sugar supplying a bundler with paths for processing. Obviously you can't "import" an image file (or whatever) into a JS context, so IIRC in the context of e.g. webpack, it'll either handle absolute/relative/served paths or inline a string (possibly converted to some deserialized thing).