feat: migrate HumanID platform icons from PNG to SVG with currentColor

lucianHymer · lucianHymer · commit f3ad80e543d4 · 2025-09-29T13:19:03.000-06:00
- Replace PNG icons with SVG versions for better scalability
- Update all SVG icons to use currentColor for theme compatibility
- Affects: Government ID, Biometrics, Clean Hands, Phone Verification
diff --git a/app/public/assets/biometrics.png b/app/public/assets/biometrics.png
diff --git a/app/public/assets/biometrics.svg b/app/public/assets/biometrics.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 7V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H7M17 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V7M21 17V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H17M7 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V17M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14M9 9H9.01M15 9H15.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/app/public/assets/cleanHands.png b/app/public/assets/cleanHands.png
diff --git a/app/public/assets/cleanHands.svg b/app/public/assets/cleanHands.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.8168 12.65V8.4C17.8168 7.94913 17.6491 7.51673 17.3506 7.19792C17.0522 6.87911 16.6473 6.7 16.2252 6.7C15.8031 6.7 15.3983 6.87911 15.0998 7.19792C14.8013 7.51673 14.6336 7.94913 14.6336 8.4M14.6336 11.8V6.7C14.6336 6.24913 14.4659 5.81673 14.1674 5.49792C13.869 5.17911 13.4641 5 13.042 5C12.6199 5 12.2151 5.17911 11.9166 5.49792C11.6181 5.81673 11.4504 6.24913 11.4504 6.7V8.4M11.4504 8.4V12.225M11.4504 8.4C11.4504 7.94913 11.2827 7.51673 10.9842 7.19792C10.6858 6.87911 10.2809 6.7 9.85881 6.7C9.43669 6.7 9.03186 6.87911 8.73338 7.19792C8.4349 7.51673 8.26721 7.94913 8.26721 8.4V15.2M17.8168 10.1C17.8168 9.64913 17.9845 9.21673 18.283 8.89792C18.5815 8.57911 18.9863 8.4 19.4084 8.4C19.8305 8.4 20.2353 8.57911 20.5338 8.89792C20.8323 9.21673 21 9.64913 21 10.1V15.2C21 17.0035 20.3293 18.7331 19.1353 20.0083C17.9414 21.2836 16.3221 22 14.6336 22H13.042C10.8138 22 9.46091 21.269 8.27517 20.011L5.41029 16.951C5.13649 16.6271 4.98978 16.2031 5.00055 15.7669C5.01133 15.3307 5.17875 14.9155 5.46816 14.6075C5.75757 14.2995 6.14681 14.1221 6.55527 14.1122C6.96373 14.1022 7.36013 14.2604 7.6624 14.554L9.06301 16.05" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.49045 11.06C2.87449 11.1163 3.35307 11.06 3.35307 11.4371C3.35307 11.5864 3.41532 11.7296 3.52612 11.8351C3.63692 11.9407 3.7872 12 3.9439 12C4.1006 12 4.25088 11.9407 4.36168 11.8351C4.47249 11.7296 4.53474 11.5864 4.53474 11.4371C4.54064 11.1413 4.97195 11.1163 5.40917 11.0544C5.56587 11.0544 5.71615 10.9951 5.82695 10.8896C5.93775 10.784 6 10.6408 6 10.4916C6 10.3423 5.93775 10.1991 5.82695 10.0936C5.71615 9.98801 5.56587 9.92871 5.40917 9.92871C4.97195 9.87242 4.53474 9.87835 4.54064 9.56285C4.54064 9.41357 4.47839 9.27041 4.36759 9.16486C4.25679 9.0593 4.10651 9 3.94981 9C3.79311 9 3.64283 9.0593 3.53203 9.16486C3.42123 9.27041 3.35898 9.41357 3.35898 9.56285C3.35898 9.92871 2.91585 9.88368 2.51409 9.93433C2.37105 9.95219 2.23981 10.0193 2.14512 10.123C2.05044 10.2267 1.99884 10.3598 2.00006 10.4972C1.99802 10.6313 2.04629 10.7617 2.1362 10.8648C2.2261 10.968 2.35173 11.0373 2.49045 11.06Z" fill="currentColor"/>
+<path d="M6.03858 7.36307C6.03858 5.65834 9.36569 5.08385 9.4016 5.08385C9.5603 5.08385 9.71251 5.01806 9.82473 4.90096C9.93695 4.78385 10 4.62502 10 4.45941C10 4.2938 9.93695 4.13497 9.82473 4.01786C9.71251 3.90076 9.5603 3.83497 9.4016 3.83497C9.34774 3.84121 6.03858 3.3479 6.03858 1.62444C6.03858 1.45883 5.97553 1.3 5.86331 1.1829C5.75109 1.06579 5.59889 1 5.44018 1C5.28147 1 5.12927 1.06579 5.01705 1.1829C4.90482 1.3 4.84178 1.45883 4.84178 1.62444C4.84178 3.3479 1.55057 3.85995 1.52065 3.86619C1.37578 3.88601 1.24286 3.96045 1.14696 4.07547C1.05106 4.1905 0.998799 4.33817 1.00004 4.49063C0.998407 4.64123 1.04899 4.78736 1.14246 4.90211C1.23593 5.01686 1.36599 5.09249 1.50868 5.11508C1.54458 5.11508 4.84178 5.67083 4.84178 7.37556C4.84178 7.54117 4.90482 7.7 5.01705 7.8171C5.12927 7.93421 5.28147 8 5.44018 8C5.59889 8 5.75109 7.93421 5.86331 7.8171C5.97553 7.7 6.03858 7.54117 6.03858 7.37556V7.36307Z" fill="currentColor"/>
+</svg>
diff --git a/app/public/assets/idCard.png b/app/public/assets/idCard.png
diff --git a/app/public/assets/idCard.svg b/app/public/assets/idCard.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 10H18M16 14H18M6.17 15C6.37614 14.414 6.7591 13.9065 7.26602 13.5474C7.77294 13.1884 8.37881 12.9955 9 12.9955C9.62119 12.9955 10.2271 13.1884 10.734 13.5474C11.2409 13.9065 11.6239 14.414 11.83 15M11 11C11 12.1046 10.1046 13 9 13C7.89543 13 7 12.1046 7 11C7 9.89543 7.89543 9 9 9C10.1046 9 11 9.89543 11 11ZM4 5H20C21.1046 5 22 5.89543 22 7V17C22 18.1046 21.1046 19 20 19H4C2.89543 19 2 18.1046 2 17V7C2 5.89543 2.89543 5 4 5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/app/public/assets/smartphone.png b/app/public/assets/smartphone.png
diff --git a/app/public/assets/smartphone.svg b/app/public/assets/smartphone.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 18H12.01M7 2H17C18.1046 2 19 2.89543 19 4V20C19 21.1046 18.1046 22 17 22H7C5.89543 22 5 21.1046 5 20V4C5 2.89543 5.89543 2 7 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/platforms/src/Biometrics/Providers-config.ts b/platforms/src/Biometrics/Providers-config.ts
@@ -2,7 +2,7 @@ import { requestSBT } from "../HumanID/shared/utils.js";
 import { PlatformGroupSpec, PlatformSpec } from "../types.js";
 
 export const PlatformDetails: PlatformSpec = {
-  icon: "./assets/biometrics.png",
+  icon: "./assets/biometrics.svg",
   platform: "Biometrics",
   name: "Biometrics",
   description: "Verify your uniqueness using facial biometrics",
diff --git a/platforms/src/CleanHands/Providers-config.ts b/platforms/src/CleanHands/Providers-config.ts
@@ -3,7 +3,7 @@ import { CleanHandsProvider } from "./Providers/index.js";
 import { requestSBT } from "../HumanID/shared/utils.js";
 
 export const PlatformDetails: PlatformSpec = {
-  icon: "./assets/cleanHands.png",
+  icon: "./assets/cleanHands.svg",
   platform: "CleanHands",
   name: "Proof of Clean Hands",
   description: "Prove you're not on sanctions lists",
diff --git a/platforms/src/HumanIdKyc/Providers-config.ts b/platforms/src/HumanIdKyc/Providers-config.ts
@@ -3,7 +3,7 @@ import { HumanIdKycProvider } from "./Providers/humanIdKyc.js";
 import { requestSBT } from "../HumanID/shared/utils.js";
 
 export const PlatformDetails: PlatformSpec = {
-  icon: "./assets/idCard.png",
+  icon: "./assets/idCard.svg",
   platform: "HumanIdKyc",
   name: "Government ID",
   description: "Verify your identity with government ID",
diff --git a/platforms/src/HumanIdPhone/Providers-config.ts b/platforms/src/HumanIdPhone/Providers-config.ts
@@ -3,7 +3,7 @@ import { HumanIdPhoneProvider } from "./Providers/humanIdPhone.js";
 import { requestSBT } from "../HumanID/shared/utils.js";
 
 export const PlatformDetails: PlatformSpec = {
-  icon: "./assets/smartphone.png",
+  icon: "./assets/smartphone.svg",
   platform: "HumanIdPhone",
   name: "Phone Verification",
   description: "Verify your phone number",
