Fork me on GitHub
Bingen Galartza Iparragirre08:01:51

Hello! Is there a way to load a svg file in Reagent? I know I can use the :img tag, but then I can't not use css rules like fill: color. The goal is to be able to change the color of svg images from css

Bingen Galartza Iparragirre08:01:29

Or maybe there is an other way of achieving the same thing?


Just to make sure I understand - you have a static SVG file and you'd like to use it in Hiccup in such a way so that it's represented by the <svg> tag in the resulting HTML?


If so, there are two ways - either use dangerouslySetInnerHTML or write a macro that transforms the SVG data into Hiccup. In my project, I chose the second way because I needed to transform the data in runtime. If you want, I can share the macro.

Bingen Galartza Iparragirre08:01:29

Ok, would be nice if you could share the macro. Thanks


(require '[hickory.core :refer [parse-fragment as-hiccup]]
         '[ :as io])

(defn- update-viewbox-attr [attrs]
  (if-some [[_ vb] (find attrs :viewbox)]
    (-> attrs
        (assoc :view-box vb)
        (dissoc :viewbox))

(defmacro embed-svg [path attrs]
  (assert (string? path))
  (let [svg-vec (-> (io/resource path)
                    (update 1 update-viewbox-attr))]
    `(update ~svg-vec 1 merge ~attrs)))


Does anyone know if a React hooks library would work with reagent? I'm looking at tannerlinsley/react-table and it looks real nice, just not super clear how to integrate it.