If you are serving the images to the frontend you can simply loop on the svg file names and render them like so:

(for [name ["icon1.svg" "icon2.svg"]]
  [:img {:src (str "images/" name)
         :key name}])

If you want to retain the capability to target with js your svg elements, then you have to use instead:

[:object {:data (str "images/" name)
          :key name}]

For the navigation, you can use the partition function to display say 3 at a time.. and I would store in an atom a simple int that would work basically as an offset

If you want a rough idea of what it could look like then:

(let [group-nth (atom {:offset 0})
      list-of-names (range 10)
      grouped (partition 3 list-of-names)]
  (fn []
    [:div
     (for [svg-name (nth grouped (:offset @group-nth))]
       [:img {:src svg-name}])
     [:button {:on-click #(swap! group-nth update
                                 :offset
                                 (fn [x] (if (> x 0) (dec x) x)))}]
     [:button {:on-click #(swap! group-nth update
                                 :offset
                                 (fn [x] (if (< x (count grouped))
                                           (inc x) x)))}]]))

It should help as a guideline .. consider that the atom as to be a reagent.core/atom and the (range 10) should be replaced with the names of your svg files

Depends what you want to do with it. If you want to use it like a static asset, you can use an img-tag

If you want any sort of animation etc, you should use hiccup

I'm already using Hiccup for the assets I generated (and I like Hiccup better than HTML now)

then you shouldn’t need that tagsoup

svg is just markup like html, so that will be processed with hiccup just fine

so I just need an img tag? coool

that’s if you want to include the svg-asset

that is the image-file

if not you can just add your hiccup [:div [:svg {}]]

that I've already done... I want to include an svg image from an .svg file as well

I think the img tag would work... I'll try that first I guess 🙂

If you're looking to inline your svg file within the DOM so you can animate it, I wrote a reagent component that does just that https://github.com/district0x/ethlance/blob/newlance/src/ethlance/ui/component/inline_svg.cljs

If you're just looking to display an svg, this is overkill, just use [:img {:src <url>}] as suggested

actually I wish I knew about this site earlier 🙂

if you are using Cursive IDE it will ask to convert HTML string into Hiccup when pasting HTML into Clojure/Script files

O.o ... I'll try it... but I'm very used to VS Code

Cursive is very nice, self contained setup, feels very solid to my taste. I’m using VS Code for other things, but Clojure is good in Cursive

Calva, a clojure extension, works well on VSCode

it doesn't do that conversion though

https://marketplace.visualstudio.com/items?itemName=betterthantomorrow.calva

it's mostly self contained but doesn't include a linter

clojure-lint, based on clj-kondo, seems to be the best option there

https://marketplace.visualstudio.com/items?itemName=marcomorain.clojure-lint

clj-kondo doesn't work on windows though

@UJVKWJTGE this html->hiccup conversion could be useful I think, are you still funded by clj together btw?

I'm not part of the Calva org, just a user

ah ok, sorry 🙂

did a quick search on the issue tracker and couldn't find any issue about the conversion though, so it might be worth it to open one

https://github.com/BetterThanTomorrow/calva/issues/407

Cool!

the site you mentioned is a cljs app anyway, and seems to basically run hiccup-bridge

https://github.com/seabre/htmltohiccup/blob/master/src/htmltohiccup/conversion.clj

so it shouldn't be too hard to do

Calva itself is build with shadowcljs so that's easy to integrate

I'm actually using Calva... the more popular "Clojure" extension just caused the built-in git capabilities to go awry for me

I found this tutorial really helpful (I started learning Cljs on Monday):- https://dev.to/kendru/why-clojurescript-matters-227f

You have an advantage over me: you already know Javascript

Haha. Thanks!

I came here from C++/C ... but after 3 days of trying, I don't feel too intimidated

JavaScript is actually a nice language in my opinion. While its syntax is heavily C-based, it’s quite LISP-like in how it works.

That said, I avoid NPM at all costs.

I love this remark of Douglas Crockford in JavaScript: The Good Parts:

Yep

I like this comparison of React versus Reagent: https://ingesolvoll.github.io/posts/2017-06-22-plain-react-vs-reagent/

Some other comparison of React versus Reagent

https://yogthos.net/posts/2017-03-26-ReagentReactView.html

This is also good, but not much javascript: https://youtu.be/R07s6JpJICo

What do you want to build?

I don’t have any one thing in particular in mind. I prefer to use vanilla code rather than frameworks though.

But I’ve been wanting to learn more about Lisp’s in general and Clojure in particular lately and I thought that doing some ClojureScript might help me learn Clojure in general better.

I see

ClojureSCript works really well with React

For frontend

Why vanilla?

I mean hiccup for specifiying html and the reactive atoms that rerender the state

http://reagent-project.github.io/

Framworks are always black boxes that trend toward bloat (Angular). There is always something my customer wants that the framework developers didn’t think of so inevitably I find myself working for the framework instead of it working for me. I’ve been using JavaScript since it was in beta so I know the language well enough that I don’t feel like frameworks provide me a whole lot of benefit.

> find myself working for the framework instead of it working for me I see

This experience I did not have with Reagent or re-frame

The README of re-frame I can highly recommend: https://github.com/day8/re-frame. One of the most enjoyable READMEs I’ve ever read

Of course you have to do things the re-frame and Reagent way, but I found it to be natural

This idea:

From

to

Comparison versus cljs’s reagent and js’s react

Vue I have no experience with

Reagent sounds interesting. I’ll take a look. Despite my nay-saying about frameworks I do think they have their place. My company builds a lot of prototypes and frameworks are excellent for that kind of work.

@UPEGYT4G4 Thanks for that link! It’s turning out to be a pretty informative article.

no worries... Today is day-4 of my Clojure journey and that article introduced me to both webdev and clojure! I didn't know about React before this. I checked it out on the side... And now I'm not scared... I'm studying SVG now and drawing out a few ugly sprites in Hiccup

What’s Hiccup?

it's this language to describe your HTML in Clojure-native syntax and data structures

checkout the default example here: http://coldnew.github.io/html2hiccup/

Oh, interesting. So in theory Hiccup makes your HTML more composable huh?

well, I'm currently doing Clojure-stuff in Hiccup e.g. moving a slider to move a line across on an svg image

and it takes up much less space 🙂

here's my masterpiece... Moving the slider moves the verticle line (up and down)

Pretty cool!

I'd like to connect all this to an actual water-tank and motor in the end and show the level etc.

and draw better SVG images (right now, the tank is 3 lines)

I really think SVG is underused. I was thinking about it last night spurred a HackerNews article I had read about how great Flash was in its heyday. Seems like SVG could be a good (and more secure) replacement. There was some wonderful creativity with Flash that you don’t see a whole lot of anymore, sadly.

hmmm... I don't exactly know what flash did, but I used to watch cricket matches on shady sites that required it

I’m thinking of before Adobe realized they could do video with Flash.

From about the late 90's to ~2004ish

hahaha

that's before I got internet 😉

Tower’s latest beta (3.1.0-beta4) is stable and quite useable in production, but is likely the last major release for the library (modulo unexpected bug fixes). Future development work is going to be focused on: Tempura - Clojure/Script translations API To be determined - Clojure/Script localization API

From the README of the project

tempura. It's from the author of tower. I had a nice experience with it.