fix: Fixed SVG icons on light and dark mode (#11173)

apps/web/components/eventtype/EventSetupTab.tsx

@@ -13,7 +13,6 @@ import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType, MeetLocationType, LocationType } from "@calcom/app-store/locations";
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
-import cx from "@calcom/lib/classNames";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
@@ -302,13 +301,7 @@ export const EventSetupTab = (
                     <div className="flex items-center">
                       <img
                         src={eventLocationType.iconUrl}
-                        className={cx(
-                          "h-4 w-4",
-                          // invert all the icons except app icons
-                          eventLocationType.iconUrl &&
-                            eventLocationType.iconUrl.includes("-dark") &&
-                            "dark:invert"
-                        )}
+                        className="h-4 w-4 dark:invert-[.65]"
                         alt={`${eventLocationType.label} logo`}
                       />
                       <span className="ms-1 line-clamp-1 text-sm">{`${eventLabel} ${

apps/web/components/ui/form/LocationSelect.tsx

@@ -22,14 +22,7 @@ export type GroupOptionType = GroupBase<LocationOption>;
 const OptionWithIcon = ({ icon, label }: { icon?: string; label: string }) => {
   return (
     <div className="flex items-center gap-3">
-      {icon && (
-        <img
-          src={icon}
-          alt="cover"
-          // invert all the icons except app icons
-          className={classNames(icon.includes("-dark") && "dark:invert", "h-3.5 w-3.5")}
-        />
-      )}
+      {icon && <img src={icon} alt="cover" className="h-3.5 w-3.5 dark:invert-[.65]" />}
       <span className={classNames("text-sm font-medium")}>{label}</span>
     </div>
   );

packages/features/bookings/components/event-meta/AvailableEventLocations.tsx

@@ -21,11 +21,7 @@ function RenderIcon({
   return (
     <img
       src={eventLocationType.iconUrl}
-      className={classNames(
-        "me-[10px] h-4 w-4 opacity-70 dark:opacity-100",
-        eventLocationType.iconUrl?.includes("-dark") ? "dark:invert-[.65]" : "",
-        eventLocationType.iconUrl?.includes("-dark") && isTooltip && "invert"
-      )}
+      className="me-[10px] h-4 w-4 opacity-70 invert-[.65] dark:invert-0"
       alt={`${eventLocationType.label} icon`}
     />
   );