feat: add support for new icon components that are already in the design system

perryfardella · perryfardella · commit 8c44e3eccee9 · 2025-10-29T09:43:33.000-04:00
diff --git a/packages/core/content-manager/admin/src/components/ComponentIcon.tsx b/packages/core/content-manager/admin/src/components/ComponentIcon.tsx
@@ -82,6 +82,9 @@ const COMPONENT_ICONS: Record<string, React.ComponentType<any>> = {
   file: Icons.File,
   fileError: Icons.FileError,
   filePdf: Icons.FilePdf,
+  fileXls: Icons.FileXls,
+  fileZip: Icons.FileZip,
+  fileCsv: Icons.FileCsv,
   filter: Icons.Filter,
   folder: Icons.Folder,
   gate: Icons.CastleTurret,
diff --git a/packages/core/content-type-builder/admin/src/components/IconPicker/constants.ts b/packages/core/content-type-builder/admin/src/components/IconPicker/constants.ts
@@ -51,6 +51,9 @@ const COMPONENT_ICONS: Record<string, Icon> = {
   file: Icons.File,
   fileError: Icons.FileError,
   filePdf: Icons.FilePdf,
+  fileXls: Icons.FileXls,
+  fileZip: Icons.FileZip,
+  fileCsv: Icons.FileCsv,
   filter: Icons.Filter,
   folder: Icons.Folder,
   gate: Icons.CastleTurret,
diff --git a/packages/core/upload/admin/src/ai/components/AIAssetCard.tsx b/packages/core/upload/admin/src/ai/components/AIAssetCard.tsx
@@ -29,7 +29,7 @@ import { styled } from 'styled-components';
 import { AudioPreview } from '../../components/AssetCard/AudioPreview';
 import { VideoPreview } from '../../components/AssetCard/VideoPreview';
 import { type Asset, EditAssetContent } from '../../components/EditAssetDialog/EditAssetContent';
-import { AssetType } from '../../constants';
+import { AssetType, DocType } from '../../enums';
 import { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';
 import { useRemoveAsset } from '../../hooks/useRemoveAsset';
 import {
@@ -162,7 +162,7 @@ const AssetCardActions = ({ asset }: { asset: File }) => {
  * -----------------------------------------------------------------------------------------------*/
 
 interface AssetProps {
-  assetType: AssetType;
+  assetType: AssetType | DocType;
   thumbnailUrl: string;
   assetUrl: string;
   asset: File;
@@ -269,14 +269,22 @@ const StyledCard = styled(Card)`
   padding: 0;
 `;
 
-const getAssetBadgeLabel = (assetType: AssetType) => {
+const getAssetBadgeLabel = (assetType: AssetType | DocType) => {
   switch (assetType) {
     case AssetType.Image:
       return { id: getTrad('settings.section.image.label'), defaultMessage: 'IMAGE' };
     case AssetType.Video:
       return { id: getTrad('settings.section.video.label'), defaultMessage: 'VIDEO' };
     case AssetType.Audio:
       return { id: getTrad('settings.section.audio.label'), defaultMessage: 'AUDIO' };
+    case DocType.Pdf:
+      return { id: getTrad('settings.section.pdf.label'), defaultMessage: 'PDF' };
+    case DocType.Csv:
+      return { id: getTrad('settings.section.csv.label'), defaultMessage: 'CSV' };
+    case DocType.Xls:
+      return { id: getTrad('settings.section.xls.label'), defaultMessage: 'XLS' };
+    case DocType.Zip:
+      return { id: getTrad('settings.section.zip.label'), defaultMessage: 'ZIP' };
     default:
       return { id: getTrad('settings.section.doc.label'), defaultMessage: 'DOC' };
   }
diff --git a/packages/core/upload/admin/src/ai/components/AIUploadModal.tsx b/packages/core/upload/admin/src/ai/components/AIUploadModal.tsx
@@ -10,11 +10,10 @@ import {
   AddAssetStep,
   FileWithRawFile,
 } from '../../components/UploadAssetDialog/AddAssetStep/AddAssetStep';
-import { AssetType } from '../../constants';
 import { useBulkEdit } from '../../hooks/useBulkEdit';
 import { useTracking } from '../../hooks/useTracking';
 import { useUpload } from '../../hooks/useUpload';
-import { getTrad, typeFromMime } from '../../utils';
+import { getTrad } from '../../utils';
 
 import { AIAssetCard, AIAssetCardSkeletons } from './AIAssetCard';
 
diff --git a/packages/core/upload/admin/src/components/AssetCard/AssetCard.tsx b/packages/core/upload/admin/src/components/AssetCard/AssetCard.tsx
@@ -1,4 +1,4 @@
-import { AssetType } from '../../constants';
+import { AssetType } from '../../enums';
 import { createAssetUrl, getFileExtension, prefixFileUrlWithBackendUrl } from '../../utils';
 
 import { AudioAssetCard } from './AudioAssetCard';
diff --git a/packages/core/upload/admin/src/components/AssetCard/DocAssetCard.tsx b/packages/core/upload/admin/src/components/AssetCard/DocAssetCard.tsx
@@ -1,8 +1,9 @@
 import { Flex, Typography } from '@strapi/design-system';
-import { File, FilePdf } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 
+import { getFileIconComponent } from '../../utils/icons';
+
 import { AssetCardBase, AssetCardBaseProps } from './AssetCardBase';
 
 const CardAsset = styled(Flex)`
@@ -27,6 +28,7 @@ export const DocAssetCard = ({
   ...restProps
 }: DocAssetCardProps) => {
   const { formatMessage } = useIntl();
+  const IconComponent = getFileIconComponent(extension);
   return (
     <AssetCardBase
       name={name}
@@ -37,12 +39,7 @@ export const DocAssetCard = ({
     >
       <CardAsset width="100%" height={size === 'S' ? `8.8rem` : `16.4rem`} justifyContent="center">
         <Flex gap={2} direction="column" alignItems="center">
-          {extension === 'pdf' ? (
-            <FilePdf aria-label={name} fill="neutral500" width={24} height={24} />
-          ) : (
-            <File aria-label={name} fill="neutral500" width={24} height={24} />
-          )}
-
+          <IconComponent aria-label={name} fill="neutral500" width={24} height={24} />
           <Typography textColor="neutral500" variant="pi">
             {formatMessage({
               id: 'noPreview',
diff --git a/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.tsx b/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.tsx
@@ -15,7 +15,7 @@ import {
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 
-import { AssetType } from '../../constants';
+import { AssetType } from '../../enums';
 import { useUpload } from '../../hooks/useUpload';
 import { getTrad } from '../../utils';
 import { UploadProgress } from '../UploadProgress/UploadProgress';
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/AssetPreview.tsx b/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/AssetPreview.tsx
@@ -3,11 +3,12 @@ import * as React from 'react';
 
 import MuxPlayer from '@mux/mux-player-react';
 import { Box, Flex, Typography } from '@strapi/design-system';
-import { File, FilePdf } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled, useTheme } from 'styled-components';
 
-import { AssetType } from '../../../constants';
+import { AssetType } from '../../../enums';
+import { typeFromMime } from '../../../utils';
+import { getFileIconComponent } from '../../../utils/icons';
 
 const CardAsset = styled(Flex)`
   min-height: 26.4rem;
@@ -32,19 +33,21 @@ export const AssetPreview = React.forwardRef<
 >(({ mime, url, name, ...props }, ref) => {
   const theme = useTheme();
 
+  const assetType = typeFromMime(mime);
+
   const { formatMessage } = useIntl();
 
-  if (mime.includes(AssetType.Image)) {
+  if (assetType === AssetType.Image) {
     return (
       <img ref={ref as React.ForwardedRef<HTMLImageElement>} src={url} alt={name} {...props} />
     );
   }
 
-  if (mime.includes(AssetType.Video)) {
+  if (assetType === AssetType.Video) {
     return <MuxPlayer src={url} accentColor={theme.colors.primary500} />;
   }
 
-  if (mime.includes(AssetType.Audio)) {
+  if (assetType === AssetType.Audio) {
     return (
       <Box margin="5">
         <audio controls src={url} ref={ref as React.ForwardedRef<HTMLAudioElement>} {...props}>
@@ -54,27 +57,13 @@ export const AssetPreview = React.forwardRef<
     );
   }
 
-  if (mime.includes('pdf')) {
-    return (
-      <CardAsset width="100%" justifyContent="center" {...props}>
-        <Flex gap={2} direction="column" alignItems="center">
-          <FilePdf aria-label={name} fill="neutral500" width={24} height={24} />
-          <Typography textColor="neutral500" variant="pi">
-            {formatMessage({
-              id: 'noPreview',
-              defaultMessage: 'No preview available',
-            })}
-          </Typography>
-        </Flex>
-      </CardAsset>
-    );
-  }
-
+  // getFileIconComponent will handle all other file types, eg. PDF, CSV, XLS, ZIP
+  // If the file type is not recognized, the default icon will be used
+  const IconComponent = getFileIconComponent(assetType);
   return (
     <CardAsset width="100%" justifyContent="center" {...props}>
       <Flex gap={2} direction="column" alignItems="center">
-        <File aria-label={name} fill="neutral500" width={24} height={24} />
-
+        <IconComponent aria-label={name} fill="neutral500" width={24} height={24} />
         <Typography textColor="neutral500" variant="pi">
           {formatMessage({
             id: 'noPreview',
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/PreviewBox.tsx b/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/PreviewBox.tsx
@@ -7,7 +7,7 @@ import cropperjscss from 'cropperjs/dist/cropper.css?raw';
 import { useIntl } from 'react-intl';
 import { createGlobalStyle } from 'styled-components';
 
-import { AssetType } from '../../../constants';
+import { AssetType } from '../../../enums';
 import { useCropImg } from '../../../hooks/useCropImg';
 import { useEditAsset } from '../../../hooks/useEditAsset';
 import { useTracking } from '../../../hooks/useTracking';
diff --git a/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAsset.tsx b/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAsset.tsx
@@ -1,9 +1,9 @@
 import { Box, Flex } from '@strapi/design-system';
-import { File, FilePdf } from '@strapi/icons';
 import { styled } from 'styled-components';
 
-import { AssetType } from '../../../constants';
+import { AssetType } from '../../../enums';
 import { createAssetUrl } from '../../../utils';
+import { getFileIconComponent } from '../../../utils/icons';
 import { AudioPreview } from '../../AssetCard/AudioPreview';
 import { VideoPreview } from '../../AssetCard/VideoPreview';
 
@@ -73,13 +73,11 @@ export const CarouselAsset = ({ asset }: { asset: FileAsset }) => {
     );
   }
 
+  const IconComponent = getFileIconComponent(asset.ext);
+
   return (
     <DocAsset width="100%" height="100%" justifyContent="center" hasRadius>
-      {asset.ext?.includes('pdf') ? (
-        <FilePdf aria-label={asset.alternativeText || asset.name} width="24px" height="32px" />
-      ) : (
-        <File aria-label={asset.alternativeText || asset.name} width="24px" height="32px" />
-      )}
+      <IconComponent aria-label={asset.alternativeText || asset.name} width="24px" height="32px" />
     </DocAsset>
   );
 };
diff --git a/packages/core/upload/admin/src/components/TableList/PreviewCell.tsx b/packages/core/upload/admin/src/components/TableList/PreviewCell.tsx
@@ -11,7 +11,7 @@ import {
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 
-import { AssetType } from '../../constants';
+import { AssetType } from '../../enums';
 import {
   createAssetUrl,
   getFileExtension,
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.tsx b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Button, Flex, Grid, KeyboardNavigable, Modal, Typography } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
-import { AssetType } from '../../../constants';
+import { AssetType } from '../../../enums';
 import { useTracking } from '../../../hooks/useTracking';
 import { getTrad } from '../../../utils';
 import { AssetCard } from '../../AssetCard/AssetCard';
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/PendingAssetStep.test.tsx b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/PendingAssetStep.test.tsx
@@ -3,7 +3,7 @@ import { render as renderTL } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
-import { AssetType } from '../../../../constants';
+import { AssetType } from '../../../../enums';
 import { PendingAssetStep } from '../PendingAssetStep';
 
 jest.mock('../../../../utils', () => ({
diff --git a/packages/core/upload/admin/src/constants.ts b/packages/core/upload/admin/src/constants.ts
@@ -1,12 +1,5 @@
 import { getTrad } from './utils';
 
-export enum AssetType {
-  Video = 'video',
-  Image = 'image',
-  Document = 'doc',
-  Audio = 'audio',
-}
-
 export enum AssetSource {
   Url = 'url',
   Computer = 'computer',
diff --git a/packages/core/upload/admin/src/enums.ts b/packages/core/upload/admin/src/enums.ts
@@ -0,0 +1,13 @@
+export enum DocType {
+  Pdf = 'pdf',
+  Csv = 'csv',
+  Xls = 'xls',
+  Zip = 'zip',
+}
+
+export enum AssetType {
+  Video = 'video',
+  Image = 'image',
+  Document = 'doc',
+  Audio = 'audio',
+}
diff --git a/packages/core/upload/admin/src/utils/icons.ts b/packages/core/upload/admin/src/utils/icons.ts
@@ -0,0 +1,33 @@
+import { SVGProps } from 'react';
+
+import { File, FileCsv, FilePdf, FileXls, FileZip } from '@strapi/icons';
+import { DefaultTheme } from 'styled-components';
+
+import { DocType } from '../enums';
+
+// The IconProps interface is not exported from our design library package, so we need to redefine it here
+interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'stroke'> {
+  /**
+   * @default "currentColor"
+   */
+  fill?: keyof DefaultTheme['colors'] | string;
+  stroke?: keyof DefaultTheme['colors'] | string;
+}
+
+type IconComponent = React.FC<IconProps>;
+
+export const FILE_TYPE_ICON_COMPONENT_MAP: Record<string, IconComponent> = {
+  [DocType.Pdf]: FilePdf,
+  [DocType.Csv]: FileCsv,
+  [DocType.Xls]: FileXls,
+  [DocType.Zip]: FileZip,
+} as const;
+
+export const DEFAULT_FILE_ICON: IconComponent = File;
+
+export const getFileIconComponent = (docType?: string) => {
+  if (Object.values(DocType).some((type) => docType?.includes(type))) {
+    return FILE_TYPE_ICON_COMPONENT_MAP[docType as DocType] ?? DEFAULT_FILE_ICON;
+  }
+  return DEFAULT_FILE_ICON;
+};
diff --git a/packages/core/upload/admin/src/utils/tests/typeFromMime.test.ts b/packages/core/upload/admin/src/utils/tests/typeFromMime.test.ts
@@ -1,4 +1,4 @@
-import { AssetType } from '../../constants';
+import { AssetType, DocType } from '../../enums';
 import { typeFromMime } from '../typeFromMime';
 
 describe('typeFromMime', () => {
@@ -14,9 +14,33 @@ describe('typeFromMime', () => {
     expect(type).toBe(AssetType.Video);
   });
 
-  it('gives a type of document when the mime is neither video nor image', () => {
+  it('gives a type of pdf when the mime contains "pdf"', () => {
     const type = typeFromMime('application/pdf');
 
+    expect(type).toBe(DocType.Pdf);
+  });
+
+  it('gives a type of csv when the mime contains "csv"', () => {
+    const type = typeFromMime('text/csv');
+
+    expect(type).toBe(DocType.Csv);
+  });
+
+  it('gives a type of xls when the mime contains "excel"', () => {
+    const type = typeFromMime('application/vnd.ms-excel');
+
+    expect(type).toBe(DocType.Xls);
+  });
+
+  it('gives a type of zip when the mime contains "zip"', () => {
+    const type = typeFromMime('application/zip');
+
+    expect(type).toBe(DocType.Zip);
+  });
+
+  it('gives a type of document as the default when the doc type is not recognised and handled', () => {
+    const type = typeFromMime('application/random-document-type');
+
     expect(type).toBe(AssetType.Document);
   });
 });
diff --git a/packages/core/upload/admin/src/utils/typeFromMime.ts b/packages/core/upload/admin/src/utils/typeFromMime.ts
@@ -1,15 +1,22 @@
-import { AssetType } from '../constants';
-
-export const typeFromMime = (mime: string) => {
-  if (mime.includes(AssetType.Image)) {
-    return AssetType.Image;
-  }
-  if (mime.includes(AssetType.Video)) {
-    return AssetType.Video;
-  }
-  if (mime.includes(AssetType.Audio)) {
-    return AssetType.Audio;
-  }
-
-  return AssetType.Document;
+import { AssetType, DocType } from '../enums';
+
+const MIME_TYPE_MAP: Record<string, AssetType | DocType> = {
+  image: AssetType.Image,
+  video: AssetType.Video,
+  audio: AssetType.Audio,
+  pdf: DocType.Pdf,
+  csv: DocType.Csv,
+  // For XLS files the mime is application/vnd.ms-excel so we need to check for 'excel' not 'xls'
+  excel: DocType.Xls,
+  zip: DocType.Zip,
+};
+
+const MIME_TYPE_KEYS = Object.keys(MIME_TYPE_MAP) as Array<keyof typeof MIME_TYPE_MAP>;
+
+export const typeFromMime = (mime: string): AssetType | DocType => {
+  const mimeTypeKey = MIME_TYPE_KEYS.find((m) => mime.toLowerCase().includes(m));
+
+  if (mimeTypeKey === undefined) return AssetType.Document;
+
+  return MIME_TYPE_MAP[mimeTypeKey] ?? AssetType.Document;
 };

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { AssetType } from '../../constants';`
	`1`	`+import { AssetType } from '../../enums';`
`2`	`2`	`import { createAssetUrl, getFileExtension, prefixFileUrlWithBackendUrl } from '../../utils';`
`3`	`3`
`4`	`4`	`import { AudioAssetCard } from './AudioAssetCard';`