Add Image component

3 files changed, 17 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/image/Image.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/image/Image.tsx
new file mode 100644
index 0000000000..1bf58c5040
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/image/Image.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export interface ImageProps {
+  source: string;
+  onClick?: (event: React.MouseEvent) => void;
+  width?: number;
+  height?: number;
+  className?: string;
+}
+
+export const Image = ({ source, ...props }: ImageProps) => {
+  const url = source.startsWith('data:') ? source : `../../assets/images/${source}.svg`;
+
+  return <img src={url} {...props} />;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/image/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/image/index.ts
new file mode 100644
index 0000000000..4bbac90149
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/image/index.ts
@@ -0,0 +1 @@
+export * from './Image';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts
index 045fa16316..a425560461 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts
@@ -3,6 +3,7 @@ export * from './button';
 export * from './filter-chip';
 export * from './container';
 export * from './flex';
+export * from './image';
 export * from './icon';
 export * from './icon-button';
 export * from './layout';