User initial avatars

#13492

Author: brandonkelly

src/elements/User.php

@@ -99,6 +99,26 @@ class User extends Element implements IdentityInterface
 
     public const IMPERSONATE_KEY = 'Craft.UserSessionService.prevImpersonateUserId';
 
+    private static array $photoColors = [
+        'red-100',
+        'orange-200',
+        'amber-200',
+        'yellow-200',
+        'lime-200',
+        'green-200',
+        'emerald-200',
+        'teal-200',
+        'cyan-200',
+        'sky-200',
+        'blue-200',
+        'indigo-200',
+        'violet-200',
+        'purple-200',
+        'fuchsia-200',
+        'pink-100',
+        'rose-200',
+    ];
+
     // User statuses
     // -------------------------------------------------------------------------
 
@@ -1266,7 +1286,46 @@ public function getThumbUrl(int $size): ?string
      */
     protected function thumbSvg(): ?string
     {
-        return file_get_contents(Craft::getAlias('@appicons/user.svg'));
+        $name = $this->getName();
+        $words = StringHelper::splitOnWords($name);
+        if (count($words) > 2) {
+            $words = [$words[0], end($words)];
+        }
+        $initials = implode('', array_map(fn($word) => mb_strtoupper(mb_substr($word, 0, 1)), $words));
+
+        // Choose a color based on the UUID
+        $uid = strtolower($this->uid ?? '00ff');
+        $color1Index = (int)base_convert(substr($uid, 0, 2), 16, 10);
+        $color2Index = (int)base_convert(substr($uid, -2), 16, 10);
+        if ($color2Index >= $color1Index - 1 && $color2Index <= $color1Index + 1) {
+            $color2Index = $color1Index + 2;
+        }
+        $totalColors = count(self::$photoColors);
+        $color1 = self::$photoColors[$color1Index % $totalColors];
+        $color2 = self::$photoColors[$color2Index % $totalColors];
+
+        $gradientId = sprintf('gradient-%s', StringHelper::randomString(10));
+
+        return <<<XML
+<svg version="1.1" baseProfile="full" width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient id="$gradientId" x1="0" y1="1" x2="1"  y2="0">
+        <stop class="stop1" offset="0%" />
+        <stop class="stop2" offset="100%" />
+      </linearGradient>
+    </defs>
+    <style>
+      <![CDATA[
+        .stop1 { stop-color: var(--$color1); }
+        .stop2 { stop-color: var(--$color2); }
+      ]]>
+    </style>
+    </defs>
+    <circle cx="50" cy="50" r="50" fill="url(#$gradientId)"/>
+    <text x="50" y="69" font-size="46" font-family="sans-serif" text-anchor="middle" fill="var(--white)" fill-opacity="0.4">$initials</text>
+    <text x="50" y="66" font-size="46" font-family="sans-serif" text-anchor="middle" fill="var(--black)" fill-opacity="0.65">$initials</text>
+</svg>
+XML;
     }
 
     /**