From b1fd3be0784cb61d5903eb2a32abb9e3f506bb75 Mon Sep 17 00:00:00 2001 From: andys8 Date: Mon, 11 Jul 2022 23:12:23 +0200 Subject: [PATCH 1/4] Icon module --- README.md | 6 +++--- spago.dhall | 2 +- src/React/Icon.purs | 12 ++++++++++++ src/React/Icons/Types.purs | 5 ++--- 4 files changed, 18 insertions(+), 7 deletions(-) create mode 100644 src/React/Icon.purs diff --git a/README.md b/README.md index 89f3ce7..36b5d19 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 { size: "24px", className: "my-class" } ``` ## 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/Icon.purs b/src/React/Icon.purs new file mode 100644 index 0000000..0d46c8c --- /dev/null +++ b/src/React/Icon.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..e22d8c2 100644 --- a/src/React/Icons/Types.purs +++ b/src/React/Icons/Types.purs @@ -1,10 +1,9 @@ -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 From cff1e84a8df49eca5f70f479885ff07b74a3c4ba Mon Sep 17 00:00:00 2001 From: andys8 Date: Mon, 11 Jul 2022 23:28:51 +0200 Subject: [PATCH 2/4] Fix children prop (array) --- src/React/Icons/Types.purs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/React/Icons/Types.purs b/src/React/Icons/Types.purs index e22d8c2..03c0466 100644 --- a/src/React/Icons/Types.purs +++ b/src/React/Icons/Types.purs @@ -6,7 +6,7 @@ import React.Basic.DOM (CSS) type ReactIcon = ReactComponent (Record PropsIcon) type PropsIcon = - ( children :: JSX + ( children :: Array JSX , size :: String , color :: String , title :: String From 3c8bad1ad0ca8786821eeaf456281f1d0136123d Mon Sep 17 00:00:00 2001 From: andys8 Date: Mon, 11 Jul 2022 23:37:14 +0200 Subject: [PATCH 3/4] Better README example --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 36b5d19..07fe98b 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ import React.Icons.Fa (faGithub) import React.Icons.Md (mdCrop) icon_ faGithub -icon mdCrop { size: "24px", className: "my-class" } +icon mdCrop { id: "0", className: "my-class", size: "24px", color: "#ff0000" } ``` ## Libraries From 6e93cc51e1bb8beef9b39a68bdc6586f5f7a67ea Mon Sep 17 00:00:00 2001 From: andys8 Date: Mon, 11 Jul 2022 23:40:58 +0200 Subject: [PATCH 4/4] Fix icons module name --- src/React/{Icon.purs => Icons.purs} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/React/{Icon.purs => Icons.purs} (100%) diff --git a/src/React/Icon.purs b/src/React/Icons.purs similarity index 100% rename from src/React/Icon.purs rename to src/React/Icons.purs 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