Fork me on GitHub
#reagent
<
2020-01-09
>
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?

p-himik08:01:34

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?

p-himik08:01:03

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

p-himik09:01:32

(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))
    attrs))

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

kenny22:01:48

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.