fix: oauth icon add styles adjustment

ui/src/index.scss

@@ -309,6 +309,10 @@ img:not(a img, img.broken) {
 
 
 .btnSvg, .btnSvg:hover {
+  display: inline-block;
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
   fill: currentColor;
   vertical-align: -0.125em;
 }

ui/src/pages/Users/Settings/Account/components/MyLogins/index.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Modal } from '@/components';
 import { useOauthConnectorInfoByUser, userOauthUnbind } from '@/services';
 import { useToast } from '@/hooks';
+import { base64ToSvg } from '@/utils';
 
 const Index = () => {
   const { data, mutate } = useOauthConnectorInfoByUser();
@@ -54,12 +55,10 @@ const Index = () => {
                 variant={item.binding ? 'outline-danger' : 'outline-secondary'}
                 href={item.link}
                 onClick={(e) => deleteLogins(e, item)}>
-                <img
-                  src={`data:image/svg+xml;base64,${item.icon}`}
-                  alt=""
-                  width={16}
-                  height={16}
-                  className="btnSvg me-2"
+                <span
+                  dangerouslySetInnerHTML={{
+                    __html: base64ToSvg(item.icon),
+                  }}
                 />
                 <span>
                   {' '}

ui/src/plugins/PluginOauth/index.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
 
 import { useGetStartUseOauthConnector } from '@/services';
+import { base64ToSvg } from '@/utils';
 
 interface Props {
   className?: string;
@@ -19,13 +20,12 @@ const Index: FC<Props> = ({ className }) => {
       {data?.map((item) => {
         return (
           <Button variant="outline-secondary" href={item.link} key={item.name}>
-            <img
-              src={`data:image/svg+xml;base64,${item.icon}`}
-              alt=""
-              width={16}
-              height={16}
-              className="btnSvg me-2"
+            <span
+              dangerouslySetInnerHTML={{
+                __html: base64ToSvg(item.icon),
+              }}
             />
+
             <span>{t('connect', { auth_name: item.name })}</span>
           </Button>
         );

ui/src/utils/common.ts

@@ -259,6 +259,26 @@ function htmlToReact(html: string) {
   return parse(ele.innerHTML);
 }
 
+function base64ToSvg(base64: string) {
+  // base64 to svg xml
+  const svgxml = atob(base64);
+
+  // svg add class btnSvg
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(svgxml, 'image/svg+xml');
+  const svg = doc.querySelector('svg');
+  let str = '';
+  if (svg) {
+    svg.classList.add('btnSvg');
+    svg.classList.add('me-2');
+
+    // transform svg to string
+    const serializer = new XMLSerializer();
+    str = serializer.serializeToString(doc);
+  }
+  return str;
+}
+
 export {
   thousandthDivision,
   formatCount,
@@ -275,4 +295,5 @@ export {
   handleFormError,
   diffText,
   htmlToReact,
+  base64ToSvg,
 };