@squiz/generic-browser-lib 1.35.1-alpha.34

package/src/Icons/Icon.stories.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import { Icon } from './Icon';
+
+export default {
+  title: 'Icons/Icon',
+  component: Icon,
+} as Meta<typeof Icon>;
+
+const Template: StoryFn<typeof Icon> = (props) => <Icon {...props} />;
+
+export const Error = Template.bind({});
+Error.args = {
+  icon: 'error',
+};
+
+export const ArrowRight = Template.bind({});
+ArrowRight.args = {
+  icon: 'arrow-right',
+};
+
+export const Selected = Template.bind({});
+Selected.args = {
+  icon: 'selected',
+};
+
+export const Root = Template.bind({});
+Root.args = {
+  icon: 'root',
+};
+
+export const Audio = Template.bind({});
+Audio.args = {
+  icon: 'audio_file',
+  resourceSource: 'matrix',
+};
+
+export const Excel = Template.bind({});
+Excel.args = {
+  icon: 'excel_doc',
+  resourceSource: 'matrix',
+};
+
+export const Folder = Template.bind({});
+Folder.args = {
+  icon: 'folder',
+  resourceSource: 'matrix',
+};
+
+export const GenericFile = Template.bind({});
+GenericFile.args = {
+  icon: 'generic_file',
+  resourceSource: 'matrix',
+};
+
+export const Image = Template.bind({});
+Image.args = {
+  icon: 'image',
+  resourceSource: 'matrix',
+};
+
+export const Page = Template.bind({});
+Page.args = {
+  icon: 'page_standard',
+  resourceSource: 'matrix',
+};
+
+export const Pdf = Template.bind({});
+Pdf.args = {
+  icon: 'pdf_file',
+  resourceSource: 'matrix',
+};
+
+export const Powerpoint = Template.bind({});
+Powerpoint.args = {
+  icon: 'powerpoint_doc',
+  resourceSource: 'matrix',
+};
+
+export const Site = Template.bind({});
+Site.args = {
+  icon: 'site',
+  resourceSource: 'matrix',
+};
+
+export const Video = Template.bind({});
+Video.args = {
+  icon: 'video_file',
+  resourceSource: 'matrix',
+};
+
+export const Word = Template.bind({});
+Word.args = {
+  icon: 'word_doc',
+  resourceSource: 'matrix',
+};
+
+export const LargeIcon = Template.bind({});
+LargeIcon.args = {
+  className: 'w-36 h-36',
+};
+
+export const SmallIcon = Template.bind({});
+SmallIcon.args = {
+  className: 'w-4 h-4',
+};
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/Icons/Icon.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import GenericIconMap from './Generics/GenericIconMap';
+import MatrixResourceMap from './MatrixResources/MatrixResourceMap';
+
+export const iconSources = {
+  generic: GenericIconMap,
+  matrix: MatrixResourceMap,
+};
+
+// The resource sources options
+export type ResourceSources = keyof typeof iconSources;
+export type IconOptions = string;
+
+/**
+ * Renders an icon based on the resource source and the icon name
+ * @param {{resourceSource?: ResourceSources; icon?: IconOptions; props: React.HTMLAttributes<HTMLOrSVGElement>}} props - The props for the Icon component
+ * @returns {React.FunctionComponent} - The icon component
+ * @example
+ * <Icon />
+ * @example
+ * <Icon resourceSource="generic" icon="generic_file" />
+ * @example
+ * <Icon resourceSource="matrix" icon="page" />
+ * @example
+ * <Icon resourceSource="matrix" icon="page" height={24} width={24} />
+ * @example
+ * <Icon resourceSource="matrix" icon="page" className="custom-class" />
+ */
+export function Icon({
+  resourceSource = 'generic',
+  icon,
+  isDecorative = true,
+  ...props
+}: {
+  icon?: IconOptions;
+  resourceSource?: ResourceSources;
+  isDecorative?: boolean;
+} & React.HTMLAttributes<HTMLElement> &
+  React.SVGAttributes<SVGElement>) {
+  const icons = (iconSources[resourceSource] as any) || null;
+
+  // If the resource source is the current source and the icon is in the current source map, render the icon
+  if (icons && icon && icon in icons) {
+    // Get the icon from the current source map
+    const Icon = icons[icon] as React.FunctionComponent<{ isDecorative: boolean } & React.SVGProps<SVGSVGElement>>;
+
+    // Render the icon
+    return <Icon isDecorative={isDecorative} {...props} />;
+  }
+
+  // If the icon is not defined, render the default icon
+  const DefaultIcon = MatrixResourceMap['generic_file'];
+  return <DefaultIcon isDecorative={isDecorative} {...props} />;
+}

package/src/Icons/MatrixResources/Audio.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+/**
+ * Renders the Audio icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Audio component
+ * @returns {JSX.Element} - The Audio component
+ * @example
+ * <Audio />
+ * @example
+ * <Audio height={24} width={24} />
+ * @example
+ * <Audio className="custom-class" />
+ */
+export default function Audio({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <rect fill="#cce9ed" height="19" rx="1.5" stroke="#73c0cb" width="19" x="2.5" y="2.5" />
+      <path
+        d="m9.5 7.4798c0-.23683.16616-.44118.39802-.48949l5.99998-1.25c.3105-.06468.602.17234.602.48949v1.2904c0 .23683-.1662.44118-.398.48949l-6 1.25c-.31051.06468-.602-.17234-.602-.48949z"
+        fill="#73c0cb"
+        stroke="#057e91"
+      />
+      <path d="m9 8c0-.55228.44772-1 1-1v9.5c0 .2761-.22386.5-.5.5s-.5-.2239-.5-.5z" fill="#057e91" />
+      <circle cx="7.5" cy="16.5" fill="#73c0cb" r="2" stroke="#057e91" />
+      <path d="m16 7 1 .32v7.18c0 .2761-.2239.5-.5.5s-.5-.2239-.5-.5z" fill="#057e91" />
+      <circle cx="14.5" cy="14.5" fill="#73c0cb" r="2" stroke="#057e91" />
+      {!isDecorative && <title>audio file icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/Excel.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+/**
+ * Renders the Excel icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Excel component
+ * @returns {JSX.Element} - The Excel component
+ * @example
+ * <Excel />
+ * @example
+ * <Excel height={24} width={24} />
+ * @example
+ * <Excel className="custom-class" />
+ */
+export default function Excel({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M14.1716 2.5H6C5.17157 2.5 4.5 3.17157 4.5 4V20C4.5 20.8284 5.17157 21.5 6 21.5H18C18.8284 21.5 19.5 20.8284 19.5 20V7.82843C19.5 7.16539 19.2366 6.5295 18.7678 6.06066L15.9393 3.23223C15.4705 2.76339 14.8346 2.5 14.1716 2.5Z"
+        fill="#E7E7E7"
+        stroke="#BCBCBC"
+      />
+      <path d="M14.5 3V6.5C14.5 7.05228 14.9477 7.5 15.5 7.5H19" stroke="#BCBCBC" />
+      <rect y="8" width="12" height="12" rx="2" fill="#4FAD6F" />
+      <path d="M3.5 11.5L8.5 16.5" stroke="white" strokeLinecap="round" />
+      <path d="M8.5 11.5L3.5 16.5" stroke="white" strokeLinecap="round" />
+      {!isDecorative && <title>excel doc icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/Folder.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+/**
+ * Renders the Folder icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Folder component
+ * @returns {JSX.Element} - The Folder component
+ * @example
+ * <Folder />
+ * @example
+ * <Folder height={24} width={24} />
+ * @example
+ * <Folder className="custom-class" />
+ */
+export default function Folder({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="m1 5c0-1.10457.89543-2 2-2h8.1177c.6752 0 1.3049.34077 1.6743.9061l2.208 3.37961-14 3.71429z"
+        fill="#efb324"
+      />
+      <path
+        d="m3 6.5c-.82843 0-1.5.67157-1.5 1.5v11.5c0 .5523.44771 1 1 1h18.5c.8284 0 1.5-.6716 1.5-1.5v-11c0-.82843-.6716-1.5-1.5-1.5h-7.5106-2.8369z"
+        fill="#fbefd2"
+        stroke="#f5d584"
+      />
+      {!isDecorative && <title>folder icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/GenericFile.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+/**
+ * Renders the GenericFile icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the GenericFile component
+ * @returns {JSX.Element} - The GenericFile component
+ * @example
+ * <GenericFile />
+ * @example
+ * <GenericFile height={24} width={24} />
+ * @example
+ * <GenericFile className="custom-class" />
+ */
+export default function GenericFile({
+  isDecorative,
+  ...props
+}: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="m15.9393 3.23223-.3515.35154.3515-.35154c-.4688-.46884-1.1047-.73223-1.7677-.73223h-8.1716c-.82843 0-1.5.67157-1.5 1.5v16c0 .8284.67157 1.5 1.5 1.5h12c.8284 0 1.5-.6716 1.5-1.5v-12.17157c0-.66304-.2634-1.29893-.7322-1.76777z"
+        fill="#fff"
+        stroke="#74b1e6"
+      />
+      <path d="m14.5 3v3.5c0 .55228.4477 1 1 1h3.5" stroke="#74b1e6" />
+      <path d="m14.5 7.5v-5l5 5z" fill="#cce2f6" />
+      <g stroke="#74b1e6">
+        <path d="m15.9393 3.23223-.3515.35154.3515-.35154c-.4688-.46884-1.1047-.73223-1.7677-.73223h-8.1716c-.82843 0-1.5.67157-1.5 1.5v16c0 .8284.67157 1.5 1.5 1.5h12c.8284 0 1.5-.6716 1.5-1.5v-12.17157c0-.66304-.2634-1.29893-.7322-1.76777z" />
+        <path d="m14.5 3v3.5c0 .55228.4477 1 1 1h3.5" />
+      </g>
+      {!isDecorative && <title>generic file icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/Image.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+/**
+ * Renders the Image icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Image component
+ * @returns {JSX.Element} - The Image component
+ * @example
+ * <Image />
+ * @example
+ * <Image height={24} width={24} />
+ * @example
+ * <Image className="custom-class" />
+ */
+export default function Image({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="m21 17.5h.5v-.5-13c0-.82843-.6716-1.5-1.5-1.5h-16c-.82843 0-1.5.67157-1.5 1.5v13 .5h.5z"
+        fill="#cce2f6"
+        stroke="#74b1e6"
+      />
+      <circle cx="15.5" cy="8.5" fill="#fbefd2" r="3" stroke="#f0c14f" />
+      <path
+        d="m21.3749 16.0025.1251.1418v.189 3.6667c0 .8284-.6716 1.5-1.5 1.5h-8.5-1.1506l.7851-.8412 6.2481-6.6944c.6044-.6476 1.6353-.6331 2.2214.031z"
+        fill="#cee9d8"
+        stroke="#79c292"
+      />
+      <path
+        d="m2.62777 13.6262-.12777.1424v.1914 6.04c0 .8284.67157 1.5 1.5 1.5h13 1.0974l-.7201-.8281-9.25697-10.6455c-.59189-.68068-1.64634-.68877-2.2486-.0173z"
+        fill="#79c292"
+        stroke="#098934"
+      />
+      {!isDecorative && <title>image icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/MatrixResourceMap.ts

@@ -0,0 +1,19 @@
+import { Audio, Excel, Folder, GenericFile, Image, Page, Pdf, Powerpoint, Site, Video, Word } from '.';
+
+// Define our map of matrix types to icons
+const MatrixResourceMap = {
+  audio_file: Audio,
+  excel_doc: Excel,
+  folder: Folder,
+  generic_file: GenericFile, // fallback when a type doesn't match.
+  image: Image,
+  page_standard: Page,
+  pdf_file: Pdf,
+  powerpoint_doc: Powerpoint,
+  site: Site,
+  video_file: Video,
+  word_doc: Word,
+};
+
+// Export our map
+export default MatrixResourceMap;

package/src/Icons/MatrixResources/Page.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+/**
+ * Renders the Page icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Page component
+ * @returns {JSX.Element} - The Page component
+ * @example
+ * <Page />
+ * @example
+ * <Page height={24} width={24} />
+ * @example
+ * <Page className="custom-class" />
+ */
+export default function Page({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="m4 1.5c-.82843 0-1.5.67157-1.5 1.5v18c0 .8284.67157 1.5 1.5 1.5h16c.8284 0 1.5-.6716 1.5-1.5v-18c0-.82843-.6716-1.5-1.5-1.5z"
+        fill="#cee9d8"
+        stroke="#79c292"
+      />
+      <g fill="#098934">
+        <rect height="1" rx=".5" width="6" x="6" y="8" />
+        <rect height="1" rx=".5" width="6" x="6" y="10" />
+        <rect height="1" rx=".5" width="12" x="6" y="12" />
+        <rect height="1" rx=".5" width="12" x="6" y="14" />
+        <rect height="1" rx=".5" width="12" x="6" y="16" />
+        <rect height="1" rx=".5" width="12" x="6" y="18" />
+      </g>
+      {!isDecorative && <title>page standard icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/Pdf.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+/**
+ * Renders the Pdf icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Pdf component
+ * @returns {JSX.Element} - The Pdf component
+ * @example
+ * <Pdf />
+ * @example
+ * <Pdf height={24} width={24} />
+ * @example
+ * <Pdf className="custom-class" />
+ */
+export default function Pdf({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="m15.9393 3.23223-.3515.35154.3515-.35154c-.4688-.46884-1.1047-.73223-1.7677-.73223h-8.1716c-.82843 0-1.5.67157-1.5 1.5v16c0 .8284.67157 1.5 1.5 1.5h12c.8284 0 1.5-.6716 1.5-1.5v-12.17157c0-.66304-.2634-1.29893-.7322-1.76777z"
+        fill="#f6d2d1"
+        stroke="#e88483"
+      />
+      <path d="m14.5 3v3.5c0 .55228.4477 1 1 1h3.5" stroke="#e88483" />
+      <rect fill="#d72321" height="9" rx="2" width="17" y="11" />
+      <rect fill="#d72321" height="7" rx="1" width="13" x="2" y="12" />
+      <g stroke="#fff" strokeLinecap="round">
+        <path d="m3.5 17.5v-2m0 0v-1.8c0-.1105.08954-.2.2-.2h1c.55228 0 1 .4477 1 1 0 .5523-.44772 1-1 1z" />
+        <path d="m7.5 17.3v-3.6c0-.1105.08954-.2.2-.2h.3c.82843 0 1.5.6716 1.5 1.5v1c0 .8284-.67157 1.5-1.5 1.5h-.3c-.11046 0-.2-.0895-.2-.2z" />
+        <path d="m11.5 17.5v-3.8c0-.1105.0895-.2.2-.2h1.8" />
+        <path d="m11.5 15.5h1" />
+      </g>
+      {!isDecorative && <title>pdf file icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/Powerpoint.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+/**
+ * Renders the Powerpoint icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Powerpoint component
+ * @returns {JSX.Element} - The Powerpoint component
+ * @example
+ * <Powerpoint />
+ * @example
+ * <Powerpoint height={24} width={24} />
+ * @example
+ * <Powerpoint className="custom-class" />
+ */
+export default function Powerpoint({
+  isDecorative,
+  ...props
+}: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="m15.9393 3.23223-.3515.35154.3515-.35154c-.4688-.46884-1.1047-.73223-1.7677-.73223h-8.1716c-.82843 0-1.5.67157-1.5 1.5v16c0 .8284.67157 1.5 1.5 1.5h12c.8284 0 1.5-.6716 1.5-1.5v-12.17157c0-.66304-.2634-1.29893-.7322-1.76777z"
+        fill="#e7e7e7"
+        stroke="#bcbcbc"
+      />
+      <path d="m14.5 3v3.5c0 .55228.4477 1 1 1h3.5" stroke="#bcbcbc" />
+      <rect fill="#e96900" height="12" rx="2" width="12" y="8" />
+      <g stroke="#fff" strokeLinecap="round">
+        <path d="m3.5 11.5v5" />
+        <path d="m3.5 11.5h3.5c.33333 0 1.5 0 1.5 1.5s-1.16667 1.5-1.5 1.5h-3" />
+      </g>
+      {!isDecorative && <title>powerpoint doc icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/Site.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+/**
+ * Renders the Site icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Site component
+ * @returns {JSX.Element} - The Site component
+ * @example
+ * <Site />
+ * @example
+ * <Site height={24} width={24} />
+ * @example
+ * <Site className="custom-class" />
+ */
+export default function Site({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <circle cx="12" cy="12" fill="#cce2f5" r="10.5" stroke="#7db4e3" />
+      <path
+        d="m19.5 12c0 2.9434-.8684 5.5878-2.2475 7.4841-1.3795 1.8968-3.2427 3.0159-5.2525 3.0159-2.00976 0-3.87299-1.1191-5.25249-3.0159-1.37913-1.8963-2.24751-4.5407-2.24751-7.4841 0-2.94337.86838-5.58777 2.24751-7.48409 1.3795-1.8968 3.24273-3.01591 5.25249-3.01591 2.0098 0 3.873 1.11911 5.2525 3.01591 1.3791 1.89632 2.2475 4.54072 2.2475 7.48409z"
+        fill="#cce2f5"
+        stroke="#7db4e3"
+      />
+      <path
+        d="m14.5 12c0 3.0063-.3329 5.7099-.8611 7.6466-.265.9719-.5718 1.7223-.8914 2.218-.334.5181-.5981.6354-.7475.6354s-.4135-.1173-.7475-.6354c-.3196-.4957-.6264-1.2461-.8914-2.218-.52822-1.9367-.8611-4.6403-.8611-7.6466 0-3.00626.33288-5.70993.8611-7.64662.265-.97192.5718-1.72231.8914-2.21799.334-.51806.5981-.63539.7475-.63539s.4135.11733.7475.63539c.3196.49568.6264 1.24607.8914 2.21799.5282 1.93669.8611 4.64036.8611 7.64662z"
+        fill="#cce2f5"
+        stroke="#7db4e3"
+      />
+      <g fill="#7db4e3">
+        <path d="m2 14h20v1h-20z" />
+        <path d="m2 9h20v1h-20z" />
+        <path d="m5 4 2.5-1-.5 1h10l-.5-1 2.5 1 .5 1h-15z" />
+        <path d="m4 19h16l-.5 1-3 1 .5-1h-10l.5 1-3-1z" />
+      </g>
+      {!isDecorative && <title>site icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/Video.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+/**
+ * Renders the Video icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Video component
+ * @returns {JSX.Element} - The Video component
+ * @example
+ * <Video />
+ * @example
+ * <Video height={24} width={24} />
+ * @example
+ * <Video className="custom-class" />
+ */
+export default function Video({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <rect fill="#e0d9ef" height="15" rx="1.5" stroke="#ac98d5" width="21" x="1.5" y="4.5" />
+      <path
+        d="m9.5 15.2516v-6.50318c0-.38671.42019-.62704.7535-.43097l5.5277 3.25155c.3287.1934.3287.6686 0 .862l-5.5277 3.2516c-.33331.196-.7535-.0443-.7535-.431z"
+        fill="#ac98d5"
+        stroke="#6b47b4"
+        strokeLinecap="round"
+      />
+      {!isDecorative && <title>video file icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/Word.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+/**
+ * Renders the Word icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Word component
+ * @returns {JSX.Element} - The Word component
+ * @example
+ * <Word />
+ * @example
+ * <Word isDecorative={false} />
+ * @example
+ * <Word height={24} width={24} />
+ * @example
+ * <Word className="custom-class" />
+ */
+export default function Word({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="m15.9393 3.23223-.3515.35154.3515-.35154c-.4688-.46884-1.1047-.73223-1.7677-.73223h-8.1716c-.82843 0-1.5.67157-1.5 1.5v16c0 .8284.67157 1.5 1.5 1.5h12c.8284 0 1.5-.6716 1.5-1.5v-12.17157c0-.66304-.2634-1.29893-.7322-1.76777z"
+        fill="#e7e7e7"
+        stroke="#bcbcbc"
+      />
+      <path d="m14.5 3v3.5c0 .55228.4477 1 1 1h3.5" stroke="#bcbcbc" />
+      <rect fill="#0774d2" height="12" rx="2" width="12" y="8" />
+      <path d="m2.5 11.5 1.5 5 2-5 2 5 1.5-5" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" />
+      {!isDecorative && <title>word doc icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/index.tsx

@@ -0,0 +1,12 @@
+// Export all the icons from the MatrixResources folder
+export { default as Audio } from './Audio';
+export { default as Excel } from './Excel';
+export { default as Folder } from './Folder';
+export { default as GenericFile } from './GenericFile';
+export { default as Image } from './Image';
+export { default as Page } from './Page';
+export { default as Pdf } from './Pdf';
+export { default as Powerpoint } from './Powerpoint';
+export { default as Site } from './Site';
+export { default as Video } from './Video';
+export { default as Word } from './Word';