feat: Add CSS class to SVG images

Author: szuperaz

projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.html

@@ -14,6 +14,7 @@
       [class.str-chat__message-attachment-with-actions]="
         attachment.actions && attachment.actions.length > 0
       "
+      [class.str-chat__message-attachment--svg-image]="isSvg(attachment)"
     >
       <img
         *ngIf="isImage(attachment)"
@@ -48,6 +49,9 @@
             data-testclass="gallery-image"
             (click)="openImageModal(attachment.images!, index)"
             (keyup.enter)="openImageModal(attachment.images!, index)"
+            [class.str-chat__message-attachment--svg-image]="
+              isSvg(galleryImage)
+            "
           >
             <img
               [src]="
@@ -65,6 +69,9 @@
             data-testclass="gallery-image"
             (click)="openImageModal(attachment.images!, index)"
             (keyup.enter)="openImageModal(attachment.images!, index)"
+            [class.str-chat__message-attachment--svg-image]="
+              isSvg(galleryImage)
+            "
             [ngStyle]="{
               'background-image':
                 'url(' +

projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.spec.ts

@@ -407,6 +407,28 @@ describe('AttachmentListComponent', () => {
 
       expect(spy).toHaveBeenCalledWith(undefined);
     });
+
+    it('should display add necessary CSS class for SVG images', () => {
+      component.attachments = [
+        { type: 'image', img_url: 'image/url', fallback: 'image.svg' },
+      ];
+      component.ngOnChanges();
+      fixture.detectChanges();
+
+      expect(
+        nativeElement.querySelector('.str-chat__message-attachment--svg-image')
+      ).not.toBeNull();
+
+      component.attachments = [
+        { type: 'image', img_url: 'image/url', fallback: 'image.jpg' },
+      ];
+      component.ngOnChanges();
+      fixture.detectChanges();
+
+      expect(
+        nativeElement.querySelector('.str-chat__message-attachment--svg-image')
+      ).toBeNull();
+    });
   });
 
   describe('should display file attachment', () => {

projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts

@@ -78,6 +78,11 @@ export class AttachmentListComponent implements OnChanges {
     return isImageAttachment(attachment);
   }
 
+  isSvg(attachment: Attachment) {
+    const filename = attachment.fallback || '';
+    return !!filename.toLowerCase().endsWith('.svg');
+  }
+
   isFile(attachment: Attachment) {
     return attachment.type === 'file';
   }