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