feat: use a wrapper for Icon component (#120)

src/components/header.tsx

@@ -1,7 +1,5 @@
 import { useState } from "react"
 
-import { Icon } from "@galoymoney/react"
-
 import useMainQuery from "hooks/use-main-query"
 import { translate, useAuthContext, useAppState } from "store/index"
 
@@ -10,6 +8,7 @@ import Link from "components/link"
 import LoginLink from "components/login-link"
 import LogoutLink from "components/logout-link"
 import DiscardableMessage from "components/discardable-message"
+import Icon from "components/icon"
 
 const headerNavPages = ["home"] as const
 

src/components/icon.tsx

@@ -0,0 +1,7 @@
+import { IconName, Icon as DefaultIcon } from "@galoymoney/react"
+
+const Icon: React.FC<{ name: IconName }> = ({ name }) => {
+  return <DefaultIcon name={name} />
+}
+
+export default Icon

src/components/login-link.tsx

@@ -1,7 +1,7 @@
 import { translate } from "store/index"
-import { Icon } from "@galoymoney/react"
 
 import Link from "components/link"
+import Icon from "components/icon"
 
 const LoginLink = () => (
   <Link to="/login">

src/components/login/auth-code.tsx

@@ -1,9 +1,11 @@
 import { ChangeEvent, useState } from "react"
 
-import { Icon, Spinner } from "@galoymoney/react"
+import { Spinner } from "@galoymoney/react"
 
 import { config, translate, history, useRequest, useAuthContext } from "store/index"
 
+import Icon from "components/icon"
+
 type FCT = React.FC<{ phoneNumber: string }>
 
 const AuthCode: FCT = ({ phoneNumber }) => {

src/components/logout-link.tsx

@@ -1,8 +1,9 @@
 import { useResetClient } from "@galoymoney/client"
-import { Icon } from "@galoymoney/react"
 
 import { translate, useAuthContext, NoPropsFCT } from "store/index"
 
+import Icon from "components/icon"
+
 const LogoutLink: NoPropsFCT = () => {
   const { setAuthSession } = useAuthContext()
 

src/components/pages/contacts.tsx

@@ -1,10 +1,11 @@
 import { truncatedDisplay, useQuery } from "@galoymoney/client"
-import { Icon, Spinner } from "@galoymoney/react"
+import { Spinner } from "@galoymoney/react"
 
 import { translate, history, useAuthContext, NoPropsFCT } from "store/index"
 
 import ErrorMessage from "components/error-message"
 import Header from "components/header"
+import Icon from "components/icon"
 
 const ContactsList: NoPropsFCT = () => {
   const { loading, errorsMessage, data } = useQuery.contacts()

src/components/pages/login-email.tsx

@@ -14,7 +14,7 @@ import { config, translate, history, useAuthContext } from "store/index"
 
 import Link from "components/link"
 import { Messages } from "components/kratos"
-import { Icon } from "@galoymoney/react"
+import Icon from "components/icon"
 
 type FCT = React.FC<{
   flowData?: KratosFlowData

src/components/pages/register.tsx

@@ -17,7 +17,7 @@ import {
 
 import Link from "components/link"
 import { Messages } from "components/kratos"
-import { Icon } from "@galoymoney/react"
+import Icon from "components/icon"
 
 type FCT = React.FC<{
   flowData?: KratosFlowData

src/components/settings/color-theme.tsx

@@ -1,7 +1,5 @@
 import { ChangeEvent, useEffect, useState } from "react"
 
-import { Icon } from "@galoymoney/react"
-
 import {
   translate,
   ColorTheme,
@@ -11,6 +9,8 @@ import {
   storage,
 } from "store/index"
 
+import Icon from "components/icon"
+
 const ColorThemeSetting: NoPropsFCT = () => {
   const [colorTheme, setColorThemeState] = useState<ColorTheme>("DEFAULT")
 

src/components/settings/email.tsx

@@ -1,7 +1,7 @@
-import { Icon } from "@galoymoney/react"
-
 import { translate, useAuthContext } from "store/index"
 
+import Icon from "components/icon"
+
 type FCT = React.FC<{ guestView: boolean }>
 
 const EmailSetting: FCT = ({ guestView }) => {

src/components/settings/language.tsx

@@ -1,11 +1,12 @@
 import { ChangeEvent } from "react"
 
 import { useMutation } from "@galoymoney/client"
-import { Icon } from "@galoymoney/react"
 
 import useMainQuery from "hooks/use-main-query"
 import { setLocale, translate, useAppState } from "store/index"
 
+import Icon from "components/icon"
+
 const languageLabels = {
   "DEFAULT": "Default (OS)",
   "en-US": "English",

src/components/settings/username.tsx

@@ -1,10 +1,11 @@
 import { useMutation } from "@galoymoney/client"
-import { Icon, Spinner } from "@galoymoney/react"
+import { Spinner } from "@galoymoney/react"
 
 import { translate } from "store/index"
-
 import useMainQuery from "hooks/use-main-query"
 
+import Icon from "components/icon"
+
 const UsernameInput: React.FC<{ lightningAddressDomain: string }> = ({
   lightningAddressDomain,
 }) => {

src/components/transactions/item.tsx

@@ -6,10 +6,12 @@ import {
   GaloyGQL,
   truncatedDisplay,
 } from "@galoymoney/client"
-import { Icon, SatFormat } from "@galoymoney/react"
+import { SatFormat } from "@galoymoney/react"
 
 import { config, translate, getLocale } from "store/index"
 
+import Icon from "components/icon"
+
 export const BLOCKCHAIN_EXPLORER_URL = "https://mempool.space/tx/"
 
 const typeDisplay = (type: GaloyGQL.SettlementVia["__typename"]) => {