Failed attempt to use react icons in emails

Author: MartinBraquet

backend/api/package.json

@@ -66,5 +66,8 @@
   "devDependencies": {
     "@types/cors": "2.8.17",
     "@types/ws": "8.5.10"
+  },
+  "resolutions": {
+    "glob": "10.4.5"
   }
 }

backend/api/tsconfig.json

@@ -11,6 +11,7 @@
     "esModuleInterop": true,
     "target": "esnext",
     "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
     "jsx": "react-jsx",
     "paths": {
       "common/*": ["../../common/src/*", "../../../common/lib/*"],
@@ -28,5 +29,6 @@
     { "path": "../email" }
   ],
   "compileOnSave": true,
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts"],
+  "exclude": ["../../node_modules/@types/glob"]
 }

backend/email/emails/utils.tsx

@@ -1,5 +1,21 @@
 import {Link, Row, Section, Text} from "@react-email/components";
-import {SocialIcon} from "web/components/user/social";
+import {
+  TbBrandBluesky,
+  TbBrandDiscord,
+  TbBrandFacebook,
+  TbBrandGithub,
+  TbBrandInstagram,
+  TbBrandLinkedin,
+  TbBrandMastodon,
+  TbBrandPatreon,
+  TbBrandPaypal,
+  TbBrandSpotify,
+  TbBrandX
+} from "react-icons/tb";
+
+import {LinkIcon} from '@heroicons/react/solid'
+import {Site} from 'common/src/socials'
+import {LuBookmark} from 'react-icons/lu'
 
 interface Props {
   email?: string
@@ -19,7 +35,7 @@ export const Footer = ({
       <Row>
         <div></div>
         <Link href="https://github.com/CompassMeet/Compass">
-          <SocialIcon site={'github'} size={36} color={'black'} />
+          <SocialIcon site={'github'} size={36} color={'black'}/>
         </Link>
         <Link href="https://discord.gg/8Vd7jzqjun">
           <SocialIcon site={'discord'} size={36} color={'black'}/>
@@ -42,6 +58,37 @@ export const Footer = ({
   </Section>
 }
 
+
+export const PLATFORM_ICONS: {
+  [key in Site]: (props: { className?: string }) => any
+} = {
+  site: LinkIcon,
+  x: TbBrandX,
+  discord: TbBrandDiscord,
+  bluesky: TbBrandBluesky,
+  mastodon: TbBrandMastodon,
+  substack: LuBookmark,
+  instagram: TbBrandInstagram,
+  github: TbBrandGithub,
+  linkedin: TbBrandLinkedin,
+  facebook: TbBrandFacebook,
+  spotify: TbBrandSpotify,
+  patreon: TbBrandPatreon,
+  paypal: TbBrandPaypal,
+}
+
+export const SocialIcon = (props: {
+  site: string;
+  className?: string;
+  size?: number;
+  color?: string;
+}): React.ReactElement | null => {
+  const {site, ...rest} = props
+  const Icon = PLATFORM_ICONS[site as Site] || PLATFORM_ICONS.site
+
+  return <Icon {...rest} />
+}
+
 export const footer = {
   margin: '20px 0',
   textAlign: 'center' as const,

backend/email/yarn.lock

@@ -22,6 +22,8 @@
   },
   "dependencies": {
     "@playwright/test": "^1.54.2",
+    "@react-email/components": "^0.5.3",
+    "@react-email/render": "^1.2.3",
     "@tiptap/core": "2.3.2",
     "@tiptap/extension-blockquote": "2.3.2",
     "@tiptap/extension-bold": "2.3.2",
@@ -31,14 +33,18 @@
     "@tiptap/extension-link": "2.3.2",
     "@tiptap/extension-mention": "2.3.2",
     "@tiptap/html": "2.3.2",
+    "@tiptap/pm": "2.3.2",
     "@tiptap/starter-kit": "2.3.2",
     "@tiptap/suggestion": "2.3.2",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
     "colorette": "^2.0.20",
     "prismjs": "^1.30.0",
-    "react-markdown": "*",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-email": "3.0.7",
-    "@react-email/components": "^0.5.3",
-    "@react-email/render": "^1.2.3"
+    "react-icons": "5.5.0",
+    "react-markdown": "*"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.4",
@@ -71,5 +77,40 @@
     "@tiptap/html": "2.3.2",
     "@tiptap/starter-kit": "2.3.2",
     "@tiptap/suggestion": "2.3.2"
+  },
+  "resolutions": {
+    "@tiptap/core": "2.3.2",
+    "@tiptap/extension-blockquote": "2.3.2",
+    "@tiptap/extension-bold": "2.3.2",
+    "@tiptap/extension-bubble-menu": "2.3.2",
+    "@tiptap/extension-floating-menu": "2.3.2",
+    "@tiptap/extension-image": "2.3.2",
+    "@tiptap/extension-link": "2.3.2",
+    "@tiptap/extension-mention": "2.3.2",
+    "@tiptap/html": "2.3.2",
+    "@tiptap/starter-kit": "2.3.2",
+    "@tiptap/suggestion": "2.3.2",
+    "@tiptap/extension-bullet-list": "2.3.2",
+    "@tiptap/extension-character-count": "2.3.2",
+    "@tiptap/extension-code": "2.3.2",
+    "@tiptap/extension-code-block": "2.3.2",
+    "@tiptap/extension-document": "2.3.2",
+    "@tiptap/extension-dropcursor": "2.3.2",
+    "@tiptap/extension-gapcursor": "2.3.2",
+    "@tiptap/extension-hard-break": "2.3.2",
+    "@tiptap/extension-heading": "2.3.2",
+    "@tiptap/extension-history": "2.3.2",
+    "@tiptap/extension-horizontal-rule": "2.3.2",
+    "@tiptap/extension-italic": "2.3.2",
+    "@tiptap/extension-list-item": "2.3.2",
+    "@tiptap/extension-ordered-list": "2.3.2",
+    "@tiptap/extension-paragraph": "2.3.2",
+    "@tiptap/extension-placeholder": "2.3.2",
+    "@tiptap/extension-strike": "2.3.2",
+    "@tiptap/extension-text": "2.3.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0"
   }
 }

common/yarn.lock

@@ -67,8 +67,8 @@
     "@tailwindcss/typography": "^0.5.1",
     "@types/d3": "7.4.0",
     "@types/lodash": "4.14.178",
-    "@types/react": "18.3.5",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
     "autoprefixer": "10.2.6",
     "concurrently": "8.2.2",
     "cross-env": "7.0.3",