feat: allow overriding OIDC logos

packages/elements-react/src/theme/default/components/form/index.tsx

@@ -64,3 +64,5 @@ export function DefaultMessage({ message }: OryMessageContentProps) {
     </span>
   )
 }
+
+export { DefaultButtonSocial } from "./social"

packages/elements-react/src/theme/default/components/form/social.tsx

@@ -7,9 +7,10 @@ import {
   uiTextToFormattedMessage,
   useOryFlow,
 } from "@ory/elements-react"
-import logos from "../../provider-logos"
+import defaultLogos from "../../provider-logos"
 import { cn } from "../../utils/cn"
 import { useIntl } from "react-intl"
+import { ElementType } from "react"
 
 export function extractProvider(
   context: object | undefined,
@@ -27,14 +28,17 @@ export function extractProvider(
 
 type DefaultSocialButtonProps = OryNodeOidcButtonProps & {
   showLabel?: boolean
+  logos?: Record<string, ElementType>
 }
 
 export function DefaultButtonSocial({
   attributes,
   node,
   onClick,
   showLabel: _showLabel,
+  logos: providedLogos,
 }: DefaultSocialButtonProps) {
+  const logos = { ...defaultLogos, ...providedLogos }
   const {
     node_type: _ignoredNodeType,
     type: _ignoredType,
@@ -73,7 +77,7 @@ export function DefaultButtonSocial({
           <Logo
             size={20}
             // alt={node.meta.label?.text || attributes.value}
-            className="object-fill w-full h-full"
+            // className="object-fill w-full h-full"
           />
         ) : (
           <span className="rounded-full aspect-square border flex items-center justify-center text-xs">
@@ -90,6 +94,17 @@ export function DefaultButtonSocial({
   )
 }
 
+/**
+ * Returns a variant of DefaultButtonSocial that can use your own logos
+ *
+ * @param logos - a record of provider names and their respective logos
+ * @returns a variant of DefaultButtonSocial that uses the provided logos
+ */
+DefaultButtonSocial.WithLogos =
+  (logos: Record<string, ElementType>) => (props: DefaultSocialButtonProps) => (
+    <DefaultButtonSocial {...props} logos={logos} />
+  )
+
 export function DefaultSocialButtonContainer({
   children,
   nodes,