Search Provider icons

src/pages/homepage/components/Search/Search.tsx

@@ -81,6 +81,8 @@ export default function Search({
 		setProviderURL,
 		providerPrefix,
 		setProviderPrefix,
+		providerIcon,
+		setProviderIcon,
 		searchValue,
 		setSearchValue,
 		defaultProviderURL,
@@ -89,10 +91,13 @@ export default function Search({
 		setDefaultProviderLabel,
 		defaultProviderPrefix,
 		setDefaultProviderPrefix,
+		defaultProviderIcon,
+		setDefaultProviderIcon,
 	} = useCommonHooks();
 	const [placeholderValue, setPlaceholderValue] = useState<string>('');
 	const [value, setValue] = useState(0);
 	const [historyMultiplier, setHistoryMultiplier] = useState(1);
+	const Icon = allIcons[providerIcon];
 
 	const handleResetSearch = () => {
 		setSearchValue('');
@@ -259,6 +264,7 @@ export default function Search({
 			setProviderLabel('Google Search');
 			setProviderURL('https://www.google.com/search?q=');
 			setProviderPrefix('/g');
+			setProviderIcon('FaGoogle');
 		} else if (item.target.value.startsWith('/')) {
 			const provider = providers?.find(
 				(p: Provider) => p.prefix === item.target.value.split(' ')[0],
@@ -266,6 +272,7 @@ export default function Search({
 			setProviderLabel(provider?.name ?? 'Invalid Search');
 			setProviderURL(provider?.url ?? '');
 			setProviderPrefix(provider?.prefix ?? '');
+			setProviderIcon(provider?.icon ?? '');
 		} else if (item.target.value.startsWith('!')) {
 			if (item.target.value === '!w' || item.target.value === '!weather') {
 				setProviderLabel('Show weather');
@@ -283,6 +290,7 @@ export default function Search({
 			setProviderLabel(defaultProviderLabel);
 			setProviderURL(defaultProviderURL);
 			setProviderPrefix(defaultProviderPrefix);
+			setProviderIcon(defaultProviderIcon);
 		}
 	};
 
@@ -333,7 +341,12 @@ export default function Search({
 	};
 
 	const renderItem: any = (item: any) => {
-		const Icon = allIcons[item.option.icon];
+		const Icon =
+			allIcons[
+				(item.option.icon ?? item.option.prefix === '/g')
+					? 'FaGoogle'
+					: (providers.find((p: Provider) => p.prefix === item.option.prefix)?.icon ?? '')
+			];
 		return !searchValue.startsWith('!') ? (
 			item.option.value === 'load' ? (
 				<Group
@@ -363,6 +376,7 @@ export default function Search({
 					handleSearchHistoryItem={handleSearchHistoryItem}
 					searchEndpoint={searchEndpoint}
 					setSearchValue={setSearchValue}
+					Icon={Icon}
 				/>
 			)
 		) : (
@@ -470,6 +484,7 @@ export default function Search({
 			);
 			setDefaultProviderPrefix(defaultProviderData[0]?.prefix ?? '/g');
 			setDefaultProviderLabel(defaultProviderData[0]?.name ?? 'Google Search');
+			setDefaultProviderIcon(defaultProviderData[0]?.icon ?? 'FaGoogle');
 		}
 	}, [defaultProviderData, defaultProviderDataIsFetched]);
 
@@ -520,7 +535,18 @@ export default function Search({
 					spellCheck={true}
 					searchable
 					autoFocus={!isMobile}
-					leftSection={providerLabel}
+					leftSection={
+						providerIcon ? (
+							<Icon
+								style={{
+									height: 32,
+									width: 32,
+								}}
+							/>
+						) : (
+							providerLabel
+						)
+					}
 					rightSection={<div />}
 					clearable
 					onClear={handleResetSearch}