Fork me on GitHub

Hi All, I'm looking for a way to dynamically work with react class components. Say in the reagent MUI sample: It's all good if we hard code the icons: [:> mui-icons/AddBox] [:> mui-icons/Clear] if we know the names at coding time. Is there a way to make it dynamic? Idea like [:> (symbol "mui-icons" "SomeIconNameString")] or [:> "SomeIconNameString"]? Obvious the idea code don't work.


(case icon
  :add-box mui-icons/AddBox
  :clear mui-icons/Clear)
Do note that if you :require the whole MUI package, it wil all be included in the final build, even if you don't use 90% of it. It's much better to include only things that you actually need. And not via ["@material-ui/core" :refer [...]] but via separate files, like ["@material-ui/icons/CheckCircle" :default CheckCircle].


There might be a way to also automate such requires with CLJS 1.10.866 that has CLJS-3276 implemented. But I haven't delved into it so can't say for sure.


Thanks for the extra info. The case approach still requires coding the symbol. @fortawesome's component accepts a string param like: [:> FontAwesomeIcon {:icon "icon-name"}]. Probably need to generate a mapping fn for icons of MUI & Ant Design which use same approach.


If you don't care about the bundle size, you can probably require all the icons and use regular JS interop to get icon objects by name.


(ns example.core
  (:require ["@material-ui/icons" :as mui-icons]
            [goog.object :as gobj]))

(defn icon [name]
  [:> (gobj/get mui-icons name)])
Something like that.


Cool. Exactly what I'm looking for. Don't mind the size for now. Not product stuff. Thanks!

👍 3