feat: add smaller badge stylesheet

ZIPING-LIU-CORPORATION · May 12, 2024 · 9aaac67 · 9aaac67
1 parent f89d247
commit 9aaac67
Show file tree

Hide file tree

Showing 3 changed files with 666 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-linkedinbadge",
-  "version": "5.12.2030",
+  "version": "5.12.2031",
   "description": "The LinkedIn Badge Rendering React Component is a powerful tool for displaying LinkedIn badges on websites. With customizable options and support for both profile and entity badges, this component offers improved features over LinkedIn's basic implementation. It enhances code organization by separating badge container rendering from dynamic content rendering and efficiently handles asynchronous loading of content from LinkedIn servers. This component also allows for easy management of multiple badges on a page and provides a callback function for tracking badge rendering completion. Make sure to review the licensing information for proper usage.",
   "repository": {
     "type": "git",
@@ -78,6 +78,7 @@
     "lib",
     "src/LinkedInBadge.css",
     "src/LinkedInBadge.min.css",
+    "src/style.css",
     "LICENSE.md",
     "types",
     "README.md",
@@ -166,6 +167,14 @@
       "default": "./src/LinkedInBadge.css",
       "umd": "./src/LinkedInBadge.css",
       "css": "./src/LinkedInBadge.css"
+    },
+    "./src/style.css": {
+      "import": "./src/style.css",
+      "require": "./src/style.css",
+      "node": "./src/style.css",
+      "default": "./src/style.css",
+      "umd": "./src/style.css",
+      "css": "./src/style.css"
     }
   },
   "types": "./lib/index.d.ts",

diff --git a/src/LinkedInBadgeSelfRender/index.tsx b/src/LinkedInBadgeSelfRender/index.tsx
@@ -10,12 +10,21 @@ const LinkedInIcon = ({
 }) => {
    return (
       <i
-         style={style}
+
          className={
             `profile-badge__header-logo-icon ` +
             `profile-badge__header-logo-icon--${theme === "light" ? "light" : "dark"
             }`
          }
+         style={{
+            width: '84px',
+            height: '21px',
+            display: 'inline-block',
+            fill: theme === 'light' ? '#0a66c2' : '#fff',
+            color: theme === 'light' ? '#0a66c2' : '#fff',
+
+            ...style,
+         }}
          aria-hidden="true"
       >
          <svg
@@ -188,20 +197,26 @@ const LinkedInBadgeSelfRender = (props: {
    }, [props.size, props.type]);
 
    return (
-      <div style={props.style} className="profile-badge-reacted">
+      <div id={props.id} 
+
+          style={props.style} className={
+            "profile-badge-reacted" + (props.className ? ` ${props.className}` : "")
+          }>
          <div
             className={
                `profile-badge profile-badge--width-${widthSet} ` +
                `profile-badge--${props.theme === "light" ? "light" : "dark"}`
             }
-            lang="en"
+            lang={props.locale?.replace(/_[\w]*$/, "") || "en"}
             dir="ltr"
+
          >
             <div
                className={
                   `profile-badge__header ` +
                   `profile-badge__header--${props.theme === "light" ? "light" : "dark"}`
                }
+
             >
                <span className="sr-only">LinkedIn</span>
                <LinkedInIcon theme={props.theme} />