Repository: anuraghazra/github-readme-stats
Pull request #2628 (2023-04-21 17:56:15)

feat(RankIcon): add rank_icon option
## Description
This update add rank_icon option to shows alternative icon instead rank level.
Initially only supports two values: `default` or `github`.
```md
![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&rank_icon=github)
```
## Live preview (In Private Server)
![Anurag's GitHub stats](https://fabianocouto-readme-stats.vercel.app/api?username=anuraghazra&rank_icon=github)

## Live preview with custom theme
![Anurag's GitHub stats](https://fabianocouto-readme-stats.vercel.app/api?username=anuraghazra&rank_icon=github&theme=github_dark)

## Preview on github profile
![image](https://user-images.githubusercontent.com/3431285/233703096-b1cbee51-56d8-4c41-9ffb-73758359de5a.png)

## Credit To
@vishalsingh2972 in https://github.com/anuraghazra/github-readme-stats/pull/2594#issuecomment-1510435964

vercel[bot]: @fabianocouto is attempting to deploy a commit to the **github readme stats** Team on [Vercel](https://vercel.com).

A member of the Team first needs to [authorize it](https://vercel.com/git/authorize?team=github%20readme%20stats&type=github&job=%7B%22headInfo%22%3A%7B%22sha%22%3A%225806e89efcd44a390fadd517b6861769fab28801%22%7D%2C%22id%22%3A%22QmdQtsCiXMdf5Nem95XRGekUSmjP3HVHXj2eyxbqdJoVCF%22%2C%22org%22%3A%22anuraghazra%22%2C%22prId%22%3A2628%2C%22repo%22%3A%22github-readme-stats%22%7D).


codecov[bot]: ## [Codecov](https://codecov.io/gh/anuraghazra/github-readme-stats/pull/2628?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra) Report
Patch coverage: **`82.75`**% and project coverage change: **`-0.11`** :warning:
> Comparison is base [(`4d1d83d`)](https://codecov.io/gh/anuraghazra/github-readme-stats/commit/4d1d83d5e5691a5aaa8a65d230924d6072bbc16d?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra) 97.31% compared to head [(`5806e89`)](https://codecov.io/gh/anuraghazra/github-readme-stats/pull/2628?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra) 97.21%.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##           master    #2628      +/-   ##
==========================================
- Coverage   97.31%   97.21%   -0.11%     
==========================================
  Files          24       24              
  Lines        4249     4267      +18     
  Branches      385      387       +2     
==========================================
+ Hits         4135     4148      +13     
- Misses        112      117       +5     
  Partials        2        2              
```


| [Impacted Files](https://codecov.io/gh/anuraghazra/github-readme-stats/pull/2628?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra) | Coverage Δ | |
|---|---|---|
| [src/common/icons.js](https://codecov.io/gh/anuraghazra/github-readme-stats/pull/2628?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra#diff-c3JjL2NvbW1vbi9pY29ucy5qcw==) | `85.71% <79.16%> (-14.29%)` | :arrow_down: |
| [api/index.js](https://codecov.io/gh/anuraghazra/github-readme-stats/pull/2628?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra#diff-YXBpL2luZGV4Lmpz) | `96.11% <100.00%> (+0.07%)` | :arrow_up: |
| [src/cards/stats-card.js](https://codecov.io/gh/anuraghazra/github-readme-stats/pull/2628?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra#diff-c3JjL2NhcmRzL3N0YXRzLWNhcmQuanM=) | `100.00% <100.00%> (ø)` | |

Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra)

</details>

[:umbrella: View full report in Codecov by Sentry](https://codecov.io/gh/anuraghazra/github-readme-stats/pull/2628?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra).


Patch:
diff --git a/api/index.js b/api/index.js
index e89c746..29ff87f 100644
--- a/api/index.js
+++ b/api/index.js
@@ -37,6 +37,7 @@ export default async (req, res) => {
     border_radius,
     number_format,
     border_color,
+    rank_icon,
   } = req.query;
   res.setHeader("Content-Type", "image/svg+xml");
 
@@ -92,6 +93,7 @@ export default async (req, res) => {
         number_format,
         locale: locale ? locale.toLowerCase() : null,
         disable_animations: parseBoolean(disable_animations),
+        rank_icon,
       }),
     );
   } catch (err) {
diff --git a/readme.md b/readme.md
index 91a1cfa..fe04a88 100644
--- a/readme.md
+++ b/readme.md
@@ -216,10 +216,10 @@ You can use [GitHub's theme context](https://github.blog/changelog/2021-11-24-sp
 ##### Use GitHub's new media feature
 
 You can use [GitHub's new media feature](https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/) in HTML to specify whether to display images for light or dark themes. This is done using the HTML `<picture>` element in combination with the `prefers-color-scheme` media feature.
-  
+
 ```html
 <picture>
-<source 
+<source
   srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark"
   media="(prefers-color-scheme: dark)"
 />
@@ -235,7 +235,7 @@ You can use [GitHub's new media feature](https://github.blog/changelog/2022-05-1
 <summary>:eyes: Show example</summary>
 
 <picture>
-<source 
+<source
   srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark"
   media="(prefers-color-scheme: dark)"
 />
@@ -260,7 +260,7 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you
 -   `border_color` - Card's border color _(hex color)_. Default: `e4e2e2` (Does not apply when `hide_border` is enabled).
 -   `bg_color` - Card's background color _(hex color)_ **or** a gradient in the form of _angle,start,end_. Default: `fffefe`
 -   `hide_border` - Hides the card's border _(boolean)_. Default: `false`
--   `theme` - name of the theme, choose from [all available themes](./themes/README.md). Default: `default` theme. 
+-   `theme` - name of the theme, choose from [all available themes](./themes/README.md). Default: `default` theme.
 -   `cache_seconds` - set the cache header manually _(min: 14400, max: 86400)_. Default: `14400 seconds (4 hours)`.
 -   `locale` - set the language in the card _(e.g. cn, de, es, etc.)_. Default: `en`.
 -   `border_radius` - Corner rounding on the card. Default: `4.5`.
@@ -280,6 +280,7 @@ You can provide multiple comma-separated values in the bg_color option to render
 -   `hide_title` - _(boolean)_. Default: `false`.
 -   `card_width` - Set the card's width manually _(number)_. Default: `500px  (approx.)`.
 -   `hide_rank` - _(boolean)_ hides the rank and automatically resizes the card width. Default: `false`.
+-   `rank_icon` - Shows alternative rank icon (i.e. `github` or `default`). Default: `default`.
 -   `show_icons` - _(boolean)_. Default: `false`.
 -   `include_all_commits` - Count total commits instead of just the current year commits _(boolean)_. Default: `false`.
 -   `count_private` - Count private commits _(boolean)_. Default: `false`.
@@ -459,6 +460,10 @@ Change the `?username=` value to your [Wakatime](https://wakatime.com) username.
 
 ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=issues&show_icons=true)
 
+-   Shows Github logo instead rank level
+
+![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&rank_icon=github)
+
 -   Customize Border Color
 
 ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&border_color=2e4058)
diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js
index c60ea51..cdb468d 100644
--- a/src/cards/stats-card.js
+++ b/src/cards/stats-card.js
@@ -1,7 +1,7 @@
 // @ts-check
 import { Card } from "../common/Card.js";
 import { I18n } from "../common/I18n.js";
-import { icons } from "../common/icons.js";
+import { icons, rankIcon } from "../common/icons.js";
 import {
   clampValue,
   flexLayout,
@@ -108,6 +108,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     number_format = "short",
     locale,
     disable_animations = false,
+    rank_icon = "default",
   } = options;
 
   const lheight = parseInt(String(line_height), 10);
@@ -294,15 +295,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
         <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
         <circle class="rank-circle" cx="-10" cy="8" r="40" />
         <g class="rank-text">
-          <text
-            x="-5"
-            y="3"
-            alignment-baseline="central"
-            dominant-baseline="central"
-            text-anchor="middle"
-          >
-            ${rank.level}
-          </text>
+          ${rankIcon(rank_icon, rank?.level)}
         </g>
       </g>`;
 
diff --git a/src/cards/types.d.ts b/src/cards/types.d.ts
index a3abc23..02a41b5 100644
--- a/src/cards/types.d.ts
+++ b/src/cards/types.d.ts
@@ -1,4 +1,5 @@
 type ThemeNames = keyof typeof import("../../themes/index.js");
+type RankIcon = "default" | "github";
 
 export type CommonOptions = {
   title_color: string;
@@ -23,6 +24,9 @@ export type StatCardOptions = CommonOptions & {
   custom_title: string;
   disable_animations: boolean;
   number_format: string;
+  ring_color: string;
+  text_bold: boolean;
+  rank_icon: RankIcon;
 };
 
 export type RepoCardOptions = CommonOptions & {
diff --git a/src/common/icons.js b/src/common/icons.js
index 5282a93..948ca0b 100644
--- a/src/common/icons.js
+++ b/src/common/icons.js
@@ -8,5 +8,28 @@ const icons = {
   fork: `<path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>`,
 };
 
-export { icons };
+/**
+ * Get rank icon
+ *
+ * @returns {string} - The SVG code of the rank icon
+ */
+const rankIcon = (rankIcon, rankLevel) => {
+  switch (rankIcon) {
+    case "github":
+      return `
+        <svg x="-38" y="-30" height="66" width="66" aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true" data-testid="github-rank-icon">
+          <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
+        </svg>
+      `;
+    case "default":
+    default:
+      return `
+        <text x="-5" y="3" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" data-testid="level-rank-icon">
+          ${rankLevel}
+        </text>
+      `;
+  }
+};
+
+export { icons, rankIcon };
 export default icons;


Test patch:
diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js
index 110121a..25c5feb 100644
--- a/tests/renderStatsCard.test.js
+++ b/tests/renderStatsCard.test.js
@@ -366,4 +366,21 @@ describe("Test renderStatsCard", () => {
     document.body.innerHTML = renderStatsCard(stats, { number_format: "long" });
     expect(getByTestId(document.body, "commits").textContent).toBe("1999");
   });
+
+  it("should render default rank icon with level A+", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      rank_icon: "default",
+    });
+    expect(queryByTestId(document.body, "level-rank-icon")).toBeDefined();
+    expect(
+      queryByTestId(document.body, "level-rank-icon").textContent.trim(),
+    ).toBe("A+");
+  });
+
+  it("should render github rank icon", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      rank_icon: "github",
+    });
+    expect(queryByTestId(document.body, "github-rank-icon")).toBeDefined();
+  });
 });