This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-01-09
Channels
- # announcements (28)
- # babashka (8)
- # bangalore-clj (1)
- # beginners (123)
- # boot (1)
- # bristol-clojurians (1)
- # calva (3)
- # cider (30)
- # clj-kondo (42)
- # cljs-dev (5)
- # clojure (260)
- # clojure-dev (11)
- # clojure-europe (7)
- # clojure-india (1)
- # clojure-italy (2)
- # clojure-losangeles (5)
- # clojure-nl (5)
- # clojure-portugal (15)
- # clojure-uk (51)
- # clojurescript (69)
- # cursive (6)
- # data-science (21)
- # datascript (17)
- # datomic (1)
- # emacs (29)
- # figwheel-main (11)
- # fulcro (89)
- # graphql (5)
- # hoplon (2)
- # hugsql (6)
- # jobs (11)
- # juxt (1)
- # leiningen (7)
- # luminus (1)
- # malli (3)
- # off-topic (64)
- # pathom (32)
- # project-updates (1)
- # re-frame (9)
- # reagent (10)
- # reitit (21)
- # ring (5)
- # ring-swagger (1)
- # shadow-cljs (8)
- # spacemacs (6)
- # xtdb (4)
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
Or maybe there is an other way of achieving the same thing?
Thank you
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.
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))
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)))
Thank you!