contextIcon.tsx 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. import {css, useTheme} from '@emotion/react';
  2. import logoAmazon from 'sentry-logos/logo-amazon.svg';
  3. import logoAmd from 'sentry-logos/logo-amd.svg';
  4. import logoAndroid from 'sentry-logos/logo-android.svg';
  5. import logoAndroidPhone from 'sentry-logos/logo-android-phone.svg';
  6. import logoAndroidTablet from 'sentry-logos/logo-android-tablet.svg';
  7. import logoApple from 'sentry-logos/logo-apple.svg';
  8. import logoApplePhone from 'sentry-logos/logo-apple-phone.svg';
  9. import logoAppleTablet from 'sentry-logos/logo-apple-tablet.svg';
  10. import logoAppleTv from 'sentry-logos/logo-apple-tv.svg';
  11. import logoAppleWatch from 'sentry-logos/logo-apple-watch.svg';
  12. import logoArm from 'sentry-logos/logo-arm.svg';
  13. import logoChrome from 'sentry-logos/logo-chrome.svg';
  14. import logoChromium from 'sentry-logos/logo-chromium.svg';
  15. import logoCloudflareWorker from 'sentry-logos/logo-cloudflare-worker.svg';
  16. import logoCrystal from 'sentry-logos/logo-crystal.svg';
  17. import logoDeno from 'sentry-logos/logo-deno.svg';
  18. import logoDotnet from 'sentry-logos/logo-dotnet.svg';
  19. import logoEdgeNew from 'sentry-logos/logo-edge-new.svg';
  20. import logoEdgeOld from 'sentry-logos/logo-edge-old.svg';
  21. import logoElectron from 'sentry-logos/logo-electron.svg';
  22. import logoFirefox from 'sentry-logos/logo-firefox.svg';
  23. import logoGoogle from 'sentry-logos/logo-google.svg';
  24. import logoIe from 'sentry-logos/logo-ie.svg';
  25. import logoLinux from 'sentry-logos/logo-linux.svg';
  26. import logoMonogorilla from 'sentry-logos/logo-monogorilla.svg';
  27. import logoMotorola from 'sentry-logos/logo-motorola.svg';
  28. import logoNetcore from 'sentry-logos/logo-netcore.svg';
  29. import logoNetframework from 'sentry-logos/logo-netframework.svg';
  30. import logoNintendo from 'sentry-logos/logo-nintendo.svg';
  31. import logoNintendoSwitch from 'sentry-logos/logo-nintendo-switch.svg';
  32. import logoNode from 'sentry-logos/logo-node.svg';
  33. import logoNvidia from 'sentry-logos/logo-nvidia.svg';
  34. import logoOpera from 'sentry-logos/logo-opera.svg';
  35. import logoPhp from 'sentry-logos/logo-php.svg';
  36. import logoPlaystation from 'sentry-logos/logo-playstation.svg';
  37. import logoPython from 'sentry-logos/logo-python.svg';
  38. import logoQq from 'sentry-logos/logo-qq.svg';
  39. import logoRuby from 'sentry-logos/logo-ruby.svg';
  40. import logoSafari from 'sentry-logos/logo-safari.svg';
  41. import logoSamsung from 'sentry-logos/logo-samsung.svg';
  42. import logoUbuntu from 'sentry-logos/logo-ubuntu.svg';
  43. import logoUnity from 'sentry-logos/logo-unity.svg';
  44. import logoUnknown from 'sentry-logos/logo-unknown.svg';
  45. import logoVercel from 'sentry-logos/logo-vercel.svg';
  46. import logoWindows from 'sentry-logos/logo-windows.svg';
  47. import ConfigStore from 'sentry/stores/configStore';
  48. import {useLegacyStore} from 'sentry/stores/useLegacyStore';
  49. import type {IconSize} from 'sentry/utils/theme';
  50. const LOGO_MAPPING = {
  51. 'android-phone': logoAndroidPhone,
  52. 'android-tablet': logoAndroidTablet,
  53. 'chrome-mobile-ios': logoChrome,
  54. 'google-chrome': logoChrome,
  55. 'internet-explorer': logoIe,
  56. 'legacy-edge': logoEdgeOld,
  57. 'mac-os-x': logoApple,
  58. 'chrome-os': logoChrome,
  59. 'mobile-safari': logoSafari,
  60. 'nintendo-switch': logoNintendoSwitch,
  61. 'net-core': logoNetcore,
  62. 'net-framework': logoNetframework,
  63. 'qq-browser': logoQq,
  64. 'nintendo-os': logoNintendo,
  65. amazon: logoAmazon,
  66. amd: logoAmd,
  67. android: logoAndroid,
  68. apple: logoApple,
  69. appletv: logoAppleTv,
  70. arm: logoArm,
  71. chrome: logoChrome,
  72. chromium: logoChromium,
  73. cloudflare: logoCloudflareWorker,
  74. cpython: logoPython,
  75. crystal: logoCrystal,
  76. darwin: logoApple,
  77. deno: logoDeno,
  78. edge: logoEdgeNew,
  79. electron: logoElectron,
  80. firefox: logoFirefox,
  81. google: logoGoogle,
  82. il: logoUnity,
  83. ios: logoApple,
  84. ipad: logoAppleTablet,
  85. iphone: logoApplePhone,
  86. ipod: logoApplePhone,
  87. linux: logoLinux,
  88. mac: logoApple,
  89. macos: logoApple,
  90. mono: logoMonogorilla,
  91. motorola: logoMotorola,
  92. net: logoDotnet,
  93. node: logoNode,
  94. nvidia: logoNvidia,
  95. opera: logoOpera,
  96. php: logoPhp,
  97. playstation: logoPlaystation,
  98. python: logoPython,
  99. ruby: logoRuby,
  100. safari: logoSafari,
  101. samsung: logoSamsung,
  102. tvos: logoApple,
  103. ubuntu: logoUbuntu,
  104. vercel: logoVercel,
  105. watch: logoAppleWatch,
  106. watchos: logoApple,
  107. windows: logoWindows,
  108. };
  109. export const NAMES = Object.keys(LOGO_MAPPING);
  110. // The icons in this list will be inverted when the theme is set to dark mode
  111. const INVERT_IN_DARKMODE = [
  112. 'darwin',
  113. 'ios',
  114. 'macos',
  115. 'tvos',
  116. 'mac-os-x',
  117. 'mac',
  118. 'apple',
  119. 'watchos',
  120. 'vercel',
  121. ];
  122. const darkCss = css`
  123. filter: invert(100%);
  124. opacity: 0.8;
  125. `;
  126. export function getLogoImage(name: string) {
  127. if (name.startsWith('amd-')) {
  128. return logoAmd;
  129. }
  130. if (name.startsWith('nvidia-')) {
  131. return logoNvidia;
  132. }
  133. return LOGO_MAPPING[name] ?? logoUnknown;
  134. }
  135. export interface ContextIconProps {
  136. name: string;
  137. size?: IconSize;
  138. }
  139. export function ContextIcon({name, size: providedSize = 'xl'}: ContextIconProps) {
  140. const theme = useTheme();
  141. const size = theme.iconSizes[providedSize];
  142. // Apply darkmode CSS to icon when in darkmode
  143. const isDarkmode = useLegacyStore(ConfigStore).theme === 'dark';
  144. const extraCass = isDarkmode && INVERT_IN_DARKMODE.includes(name) ? darkCss : null;
  145. const imageName = getLogoImage(name);
  146. return <img height={size} width={size} css={extraCass} src={imageName} />;
  147. }
  148. export default ContextIcon;