reagent 2021-06-27 | Slack Archive

rlhk06:06:55

Hi All, I'm looking for a way to dynamically work with react class components. Say in the reagent MUI sample: https://github.com/reagent-project/reagent/blob/master/examples/material-ui/src/example/core.cljs 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.

p-himik08:06:05

(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].

p-himik08:06:19

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.

rlhk08:06:31

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.

p-himik08:06:01

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.

p-himik08:06:27

(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.

rlhk09:06:05

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

👍 3

2021-06-27

Channels