feat: add support for svg avatar

casdoor · Dec 31, 2024 · 880ba8d · 880ba8d
1 parent e972f83
commit 880ba8d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/Header.js b/Header.js
@@ -14,14 +14,17 @@
 
 import * as React from "react";
 import {Dimensions, StyleSheet, View} from "react-native";
+
 import {Appbar, Avatar, Menu, Text, TouchableRipple} from "react-native-paper";
 import {useNotifications} from "react-native-notificated";
+import {useTranslation} from "react-i18next";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import {SvgUri} from "react-native-svg";
+
 import CasdoorLoginPage, {useCasdoorLogout} from "./CasdoorLoginPage";
+import LoginMethodSelector from "./LoginMethodSelector";
 import useStore from "./useStorage";
 import {useAccountSync} from "./useAccountStore";
-import LoginMethodSelector from "./LoginMethodSelector";
-import {useTranslation} from "react-i18next";
 
 const {width} = Dimensions.get("window");
 
@@ -111,11 +114,21 @@ const Header = () => {
             >
               <View style={styles.buttonContent}>
                 {userInfo !== null && (
-                  <Avatar.Image
-                    size={28}
-                    source={{uri: userInfo.avatar}}
-                    style={styles.avatar}
-                  />
+                  userInfo.avatar?.endsWith(".svg") ? (
+                    <View style={[styles.avatar, {width: 28, height: 28}]}>
+                      <SvgUri
+                        width="28"
+                        height="28"
+                        uri={userInfo.avatar}
+                      />
+                    </View>
+                  ) : (
+                    <Avatar.Image
+                      size={28}
+                      source={{uri: userInfo.avatar}}
+                      style={styles.avatar}
+                    />
+                  )
                 )}
                 <Text style={[
                   styles.buttonText,

diff --git a/SettingPage.js b/SettingPage.js
@@ -19,6 +19,7 @@ import {ActionSheetProvider} from "@expo/react-native-action-sheet";
 import * as Application from "expo-application";
 import {useTranslation} from "react-i18next";
 import Constants, {ExecutionEnvironment} from "expo-constants";
+import {SvgUri} from "react-native-svg";
 
 import CasdoorLoginPage, {useCasdoorLogout} from "./CasdoorLoginPage";
 import LoginMethodSelector from "./LoginMethodSelector";
@@ -62,10 +63,20 @@ const SettingPage = () => {
           <Surface style={styles.profileCard} elevation={1}>
             {userInfo ? (
               <View style={styles.profileInfo}>
-                <Avatar.Image
-                  size={60}
-                  source={{uri: userInfo.avatar}}
-                />
+                {userInfo.avatar?.endsWith(".svg") ? (
+                  <View style={{width: 60, height: 60}}>
+                    <SvgUri
+                      width="60"
+                      height="60"
+                      uri={userInfo.avatar}
+                    />
+                  </View>
+                ) : (
+                  <Avatar.Image
+                    size={60}
+                    source={{uri: userInfo.avatar}}
+                  />
+                )}
                 <View style={styles.profileText}>
                   <Text variant="titleLarge">{userInfo.name}</Text>
                   <Text variant="bodyMedium" style={{color: theme.colors.secondary}}>