From 067e3a26f53607d594089db5e8afdc1411f0b3c5 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 5 Mar 2022 13:55:41 -0600
Subject: [PATCH] Allow setting a custom verified icon

---
 app/soapbox/actions/soapbox.js               |  1 +
 app/soapbox/components/verification_badge.js | 12 ++++++++++--
 app/styles/components/dropdown-menu.scss     |  2 +-
 app/styles/ui.scss                           |  6 +++---
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/actions/soapbox.js b/app/soapbox/actions/soapbox.js
index 03814cf7c..35a32c840 100644
--- a/app/soapbox/actions/soapbox.js
+++ b/app/soapbox/actions/soapbox.js
@@ -52,6 +52,7 @@ export const makeDefaultConfig = features => {
       homeFooter: ImmutableList(),
     }),
     allowedEmoji: features.emojiReactsRGI ? allowedEmojiRGI : allowedEmoji,
+    verifiedIcon: '',
     verifiedCanEditName: false,
     displayFqn: Boolean(features.federating),
     cryptoAddresses: ImmutableList(),
diff --git a/app/soapbox/components/verification_badge.js b/app/soapbox/components/verification_badge.js
index d448b8664..49ef95a46 100644
--- a/app/soapbox/components/verification_badge.js
+++ b/app/soapbox/components/verification_badge.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
+import { useSelector } from 'react-redux';
 
-import Icon from 'soapbox/components/icon';
+import SvgIcon from 'soapbox/components/svg_icon';
 
 const messages = defineMessages({
   verified: { id: 'account.verified', defaultMessage: 'Verified Account' },
@@ -10,9 +11,16 @@ const messages = defineMessages({
 const VerificationBadge = () => {
   const intl = useIntl();
 
+  // Prefer a custom icon if found
+  const customIcon = useSelector(state => state.getIn(['soapbox', 'verifiedIcon']));
+  const icon = customIcon || require('icons/verified.svg');
+
+  // Render component based on file extension
+  const Icon = icon.endsWith('.svg') ? SvgIcon : 'img';
+
   return (
     <span className='verified-icon'>
-      <Icon src={require('icons/verified.svg')} alt={intl.formatMessage(messages.verified)} />
+      <Icon src={icon} alt={intl.formatMessage(messages.verified)} />
     </span>
   );
 };
diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss
index 5c705db81..9d6c13038 100644
--- a/app/styles/components/dropdown-menu.scss
+++ b/app/styles/components/dropdown-menu.scss
@@ -84,7 +84,7 @@
         }
       }
 
-      .svg-icon:first-child {
+      > .svg-icon:first-child {
         height: 20px;
         width: 20px;
         min-width: 20px;
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index 729b0def0..c2cbc32cc 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -730,12 +730,12 @@ article:last-child > .domain {
 }
 
 .verified-icon {
-  display: inline-block;
+  display: inline-flex;
   margin: 0 4px 0 1px;
   vertical-align: top;
   position: relative;
-  width: 15px;
-  height: 15px;
+  width: 20px;
+  height: 20px;
   flex-shrink: 0;
 
   .svg-icon svg > .bg {