feat: add svg image class to attachment

GetStream · Aug 22, 2022 · 3d0237d · 3d0237d
1 parent f5a8816
commit 3d0237d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/src/components/Attachment/AttachmentContainer.tsx b/src/components/Attachment/AttachmentContainer.tsx
@@ -10,6 +10,7 @@ import { FileAttachment as DefaultFile } from './FileAttachment';
 import {
   AttachmentContainerProps,
   isGalleryAttachmentType,
+  isSvgAttachment,
   RenderAttachmentProps,
   RenderGalleryProps,
 } from './utils';
@@ -39,6 +40,7 @@ export const AttachmentWithinContainer = <
     [`str-chat__message-attachment--${componentType}`]: componentType,
     [`str-chat__message-attachment--${attachment?.type}`]: attachment?.type,
     [`str-chat__message-attachment--${componentType}--${extra}`]: componentType && extra,
+    'str-chat__message-attachment--svg-image': isSvgAttachment(attachment),
     'str-chat__message-attachment-with-actions': extra === 'actions', // added for theme V2 (better readability)
   });
 

diff --git a/src/components/Attachment/utils.tsx b/src/components/Attachment/utils.tsx
@@ -87,6 +87,11 @@ export const isMediaAttachment = <
   (attachment.mime_type && SUPPORTED_VIDEO_FORMATS.indexOf(attachment.mime_type) !== -1) ||
   attachment.type === 'video';
 
+export const isSvgAttachment = (attachment: Attachment) => {
+  const filename = attachment.fallback || '';
+  return filename.toLowerCase().endsWith('.svg');
+};
+
 /**
  * @deprecated will be removed in the next major release,
  * replaced with the proper component equivalent `AttachmentContainer/AttachmentWithinContainer`
@@ -113,6 +118,7 @@ export const renderAttachmentWithinContainer = <
     [`str-chat__message-attachment--${componentType}`]: componentType,
     [`str-chat__message-attachment--${attachment?.type}`]: attachment?.type,
     [`str-chat__message-attachment--${componentType}--${extra}`]: componentType && extra,
+    'str-chat__message-attachment--svg-image': isSvgAttachment(attachment),
     'str-chat__message-attachment-with-actions': extra === 'actions', // added for theme V2 (better readability)
   });