What is the best way to use custom svg icons in Reagent?

Questions & Help General Questions
2

Hi,

AFAIK you can’t import a SVG file like you would in the Webpack world, because the ClojureScript compiler doesn’t support that and Webpack is the last step. I’m quite a noobie myself, so I might be wrong.

What I’ve been doing is the following: I add a SVG sprite to the bottom of my HTML template, like described here: https://css-tricks.com/svg-sprites-use-better-icon-fonts/

<svg>
  <defs>
    <g id="icon-foo">
      <!-- all the paths and shapes and whatnot for this icon -->
    <g>
    <g id="icon-bar">
      <!-- all the paths and shapes and whatnot for this icon -->
    <g>
    <!-- etc -->
  </defs>
</svg>

And then in my Reagent components (this one was tricky because of a React limitation, the upper/lower case is very important here):

(defn svg-icon [id]
  [:svg {:class "icon"} [:use {:xlinkHref (str "#icon-" id)}]])

And then inside a component:

[svg-icon "foo"]

This of course doesn’t process the icons with svgo or the likes, but if you serve the HTML template with something like Ring, you could load up and process the SVG icons yourself.

Hope that helps,
Manu