feat: integrate colored SVG icons in getConnectorIcon

- Use Next.js Image component for SVG icons (20x20px)
- Replace 16 Tabler/Lucide icons with branded SVGs
- Add support for Teams, Zoom, YouTube string cases
- Clean up unused icon imports
- Maintain fallback for connectors without SVG icons

surfsense_web/contracts/enums/connectorIcons.tsx

@@ -1,20 +1,6 @@
 import {
-	IconBook,
-	IconBooks,
-	IconBrandDiscord,
-	IconBrandElastic,
-	IconBrandGithub,
-	IconBrandNotion,
-	IconBrandSlack,
-	IconBrandYoutube,
-	IconCalendar,
-	IconChecklist,
-	IconLayoutKanban,
 	IconLinkPlus,
-	IconMail,
 	IconSparkles,
-	IconTable,
-	IconTicket,
 	IconUsersGroup,
 	IconWorldWww,
 } from "@tabler/icons-react";
@@ -27,52 +13,53 @@ import {
 	Sparkles,
 	Telescope,
 	Webhook,
-	HardDrive,
 } from "lucide-react";
+import Image from "next/image";
 import { EnumConnectorName } from "./connector";
 
 export const getConnectorIcon = (connectorType: EnumConnectorName | string, className?: string) => {
 	const iconProps = { className: className || "h-4 w-4" };
+	const imgProps = { className: className || "h-5 w-5", width: 20, height: 20 };
 
 	switch (connectorType) {
 		case EnumConnectorName.LINKUP_API:
 			return <IconLinkPlus {...iconProps} />;
 		case EnumConnectorName.LINEAR_CONNECTOR:
-			return <IconLayoutKanban {...iconProps} />;
+			return <Image src="/connectors/linear.svg" alt="Linear" {...imgProps} />;
 		case EnumConnectorName.GITHUB_CONNECTOR:
-			return <IconBrandGithub {...iconProps} />;
+			return <Image src="/connectors/github.svg" alt="GitHub" {...imgProps} />;
 		case EnumConnectorName.TAVILY_API:
 			return <IconWorldWww {...iconProps} />;
 		case EnumConnectorName.SEARXNG_API:
 			return <Globe {...iconProps} />;
 		case EnumConnectorName.BAIDU_SEARCH_API:
-			return <Search {...iconProps} />;
+			return <Image src="/connectors/baidu-search.svg" alt="Baidu" {...imgProps} />;
 		case EnumConnectorName.SLACK_CONNECTOR:
-			return <IconBrandSlack {...iconProps} />;
+			return <Image src="/connectors/slack.svg" alt="Slack" {...imgProps} />;
 		case EnumConnectorName.NOTION_CONNECTOR:
-			return <IconBrandNotion {...iconProps} />;
+			return <Image src="/connectors/notion.svg" alt="Notion" {...imgProps} />;
 		case EnumConnectorName.DISCORD_CONNECTOR:
-			return <IconBrandDiscord {...iconProps} />;
+			return <Image src="/connectors/discord.svg" alt="Discord" {...imgProps} />;
 		case EnumConnectorName.JIRA_CONNECTOR:
-			return <IconTicket {...iconProps} />;
+			return <Image src="/connectors/jira.svg" alt="Jira" {...imgProps} />;
 		case EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR:
-			return <IconCalendar {...iconProps} />;
+			return <Image src="/connectors/google-calendar.svg" alt="Google Calendar" {...imgProps} />;
 		case EnumConnectorName.GOOGLE_GMAIL_CONNECTOR:
-			return <IconMail {...iconProps} />;
+			return <Image src="/connectors/google-gmail.svg" alt="Gmail" {...imgProps} />;
 		case EnumConnectorName.GOOGLE_DRIVE_CONNECTOR:
-			return <HardDrive {...iconProps} />;
+			return <Image src="/connectors/google-drive.svg" alt="Google Drive" {...imgProps} />;
 		case EnumConnectorName.AIRTABLE_CONNECTOR:
-			return <IconTable {...iconProps} />;
+			return <Image src="/connectors/airtable.svg" alt="Airtable" {...imgProps} />;
 		case EnumConnectorName.CONFLUENCE_CONNECTOR:
-			return <IconBook {...iconProps} />;
+			return <Image src="/connectors/confluence.svg" alt="Confluence" {...imgProps} />;
 		case EnumConnectorName.BOOKSTACK_CONNECTOR:
-			return <IconBooks {...iconProps} />;
+			return <Image src="/connectors/bookstack.svg" alt="BookStack" {...imgProps} />;
 		case EnumConnectorName.CLICKUP_CONNECTOR:
-			return <IconChecklist {...iconProps} />;
+			return <Image src="/connectors/clickup.svg" alt="ClickUp" {...imgProps} />;
 		case EnumConnectorName.LUMA_CONNECTOR:
 			return <IconSparkles {...iconProps} />;
 		case EnumConnectorName.ELASTICSEARCH_CONNECTOR:
-			return <IconBrandElastic {...iconProps} />;
+			return <Image src="/connectors/elasticsearch.svg" alt="Elasticsearch" {...imgProps} />;
 		case EnumConnectorName.WEBCRAWLER_CONNECTOR:
 			return <Globe {...iconProps} />;
 		case EnumConnectorName.CIRCLEBACK_CONNECTOR:
@@ -83,7 +70,13 @@ export const getConnectorIcon = (connectorType: EnumConnectorName | string, clas
 		case "CRAWLED_URL":
 			return <Globe {...iconProps} />;
 		case "YOUTUBE_VIDEO":
-			return <IconBrandYoutube {...iconProps} />;
+			return <Image src="/connectors/youtube.svg" alt="YouTube" {...imgProps} />;
+		case "MICROSOFT_TEAMS":
+		case "ms-teams":
+			return <Image src="/connectors/microsoft-teams.svg" alt="Microsoft Teams" {...imgProps} />;
+		case "ZOOM":
+		case "zoom":
+			return <Image src="/connectors/zoom.svg" alt="Zoom" {...imgProps} />;
 		case "FILE":
 			return <File {...iconProps} />;
 		case "NOTE":