icon helper and ReactComponent

README.md

@@ -19,12 +19,12 @@ Search for an icon on [`react-icons`](https://react-icons.github.io/react-icons)
 and see these examples on how to import in PureScript.
 
 ```purescript
-import React.Basic (element)
+import React.Icons (icon, icon_)
 import React.Icons.Fa (faGithub)
 import React.Icons.Md (mdCrop)
 
-element faGithub {}
-element mdCrop { size: "24px", className: "my-class" }
+icon_ faGithub
+icon mdCrop { id: "0", className: "my-class", size: "24px", color: "#ff0000" }
 ```
 
 ## Libraries

spago.dhall

@@ -1,5 +1,5 @@
 { name = "react-icons"
-, dependencies = [ "react-basic", "react-basic-dom" ]
+, dependencies = [ "react-basic", "react-basic-dom", "unsafe-coerce" ]
 , packages = ./packages.dhall
 , sources = [ "src/**/*.purs" ]
 , license = "MIT-0"

src/React/Icons.purs

@@ -0,0 +1,12 @@
+module React.Icons (icon, icon_) where
+
+import Prim.Row (class Union)
+import React.Basic (JSX, element)
+import React.Icons.Types (ReactIcon, PropsIcon)
+import Unsafe.Coerce (unsafeCoerce)
+
+icon :: forall a b. Union a b PropsIcon => ReactIcon -> Record a -> JSX
+icon reactIcon props = element (unsafeCoerce reactIcon) props
+
+icon_ :: forall a b. Union a b PropsIcon => ReactIcon -> JSX
+icon_ reactIcon = icon reactIcon {}

src/React/Icons/Types.purs

@@ -1,13 +1,12 @@
-module React.Icons.Types where
+module React.Icons.Types (ReactIcon, PropsIcon) where
 
-import Prim.Row (class Union)
 import React.Basic (JSX, ReactComponent)
 import React.Basic.DOM (CSS)
 
-type ReactIcon = forall a b. Union a b PropsIcon => ReactComponent (Record a)
+type ReactIcon = ReactComponent (Record PropsIcon)
 
 type PropsIcon =
-  ( children :: JSX
+  ( children :: Array JSX
   , size :: String
   , color :: String
   , title :: String