diff --git a/README.md b/README.md
index 89f3ce7..07fe98b 100644
--- a/README.md
+++ b/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
diff --git a/spago.dhall b/spago.dhall
index 88cc4af..d5fc899 100644
--- a/spago.dhall
+++ b/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"
diff --git a/src/React/Icons.purs b/src/React/Icons.purs
new file mode 100644
index 0000000..0d46c8c
--- /dev/null
+++ b/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 {}
diff --git a/src/React/Icons/Types.purs b/src/React/Icons/Types.purs
index 9082086..03c0466 100644
--- a/src/React/Icons/Types.purs
+++ b/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
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy