feat(react-ui-kit): cells file type icons [WPB-15686]

packages/react-ui-kit/src/Icon/Files/ArchiveFileIcon.tsx

@@ -0,0 +1,38 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {SVGIcon, SVGIconProps} from '../SVGIcon';
+
+export const ArchiveFileIcon = ({...props}: SVGIconProps) => {
+  return (
+    <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
+      <path
+        fill="var(--archive-file-icon-bg)"
+        stroke="var(--archive-file-icon-stroke)"
+        d="M.996 2.5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9.006a2.5 2.5 0 0 1-.719 1.754l-1.47 1.494a2.5 2.5 0 0 1-1.782.746h-6.03a2 2 0 0 1-2-2v-11Z"
+      />
+      <path stroke="var(--archive-file-icon-stroke)" d="M12.996 11.5a4 4 0 0 0-4 4" />
+      <path fill="var(--archive-file-icon-stroke)" d="M3.496 8.5a.5.5 0 1 0 1 0h-1Zm0-8v8h1v-8h-1Z" />
+      <path
+        stroke="var(--archive-file-icon-stroke)"
+        d="M5.496 2h-1M3.496 3h-1M5.496 4h-1M3.496 5h-1M5.496 6h-1M3.496 7h-1"
+      />
+    </SVGIcon>
+  );
+};

packages/react-ui-kit/src/Icon/Files/AudioFileIcon.tsx

@@ -0,0 +1,41 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {SVGIcon, SVGIconProps} from '../SVGIcon';
+
+export const AudioFileIcon = ({...props}: SVGIconProps) => {
+  return (
+    <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
+      <path
+        fill="var(--audio-file-icon-bg)"
+        stroke="var(--audio-file-icon-stroke)"
+        d="M1 2.5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9.006a2.5 2.5 0 0 1-.719 1.754l-1.47 1.494a2.5 2.5 0 0 1-1.782.746H3a2 2 0 0 1-2-2v-11Z"
+      />
+      <path stroke="var(--audio-file-icon-stroke)" d="M13 11.5a4 4 0 0 0-4 4" />
+      <path fill="var(--audio-file-icon-stroke)" d="M5.5 4.5A.5.5 0 0 1 6 5v4.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z" />
+      <circle cx="4.5" cy="9.5" r="1" stroke="var(--audio-file-icon-stroke)" />
+      <path fill="var(--audio-file-icon-stroke)" d="M9.5 3.5a.5.5 0 0 1 .5.5v4.5a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5Z" />
+      <circle cx="8.5" cy="8.5" r="1" stroke="var(--audio-file-icon-stroke)" />
+      <path
+        fill="var(--audio-file-icon-stroke)"
+        d="M9.985 3.879a.5.5 0 0 1-.364.606l-4 1a.5.5 0 0 1-.242-.97l4-1a.5.5 0 0 1 .606.364Z"
+      />
+    </SVGIcon>
+  );
+};

packages/react-ui-kit/src/Icon/Files/CodeFileIcon.tsx

@@ -0,0 +1,36 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {SVGIcon, SVGIconProps} from '../SVGIcon';
+
+export const CodeFileIcon = ({...props}: SVGIconProps) => {
+  return (
+    <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
+      <path
+        fill="var(--code-file-icon-bg)"
+        stroke="var(--code-file-icon-stroke)"
+        d="M1 2.5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9.006a2.5 2.5 0 0 1-.719 1.754l-1.47 1.494a2.5 2.5 0 0 1-1.782.746H3a2 2 0 0 1-2-2v-11Z"
+      />
+      <path
+        stroke="var(--code-file-icon-stroke)"
+        d="M13 11.5a4 4 0 0 0-4 4M6.148 9.606 7.66 6.5M5 6.5 3.5 8 5 9.5M9 6.5 10.5 8 9 9.5"
+      />
+    </SVGIcon>
+  );
+};

packages/react-ui-kit/src/Icon/Files/DocumentFileIcon.tsx

@@ -0,0 +1,36 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {SVGIcon, SVGIconProps} from '../SVGIcon';
+
+export const DocumentFileIcon = ({...props}: SVGIconProps) => {
+  return (
+    <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
+      <path
+        fill="var(--document-file-icon-bg)"
+        stroke="var(--document-file-icon-stroke)"
+        d="M.999 2.498a2 2 0 0 1 2-2h7.998a2 2 0 0 1 2 2v9.005a2.5 2.5 0 0 1-.719 1.754l-1.47 1.493a2.5 2.5 0 0 1-1.781.746H2.998a2 2 0 0 1-2-2V2.498Z"
+      />
+      <path
+        stroke="var(--document-file-icon-stroke)"
+        d="M4.498 4.999h5M4.498 6.998h5M4.498 8.998h3.5M12.997 11.497a4 4 0 0 0-4 4"
+      />
+    </SVGIcon>
+  );
+};

packages/react-ui-kit/src/Icon/Files/ImageFileIcon.tsx

@@ -0,0 +1,39 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {SVGIcon, SVGIconProps} from '../SVGIcon';
+
+export const ImageFileIcon = ({...props}: SVGIconProps) => {
+  return (
+    <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
+      <path
+        fill="var(--image-file-icon-bg)"
+        stroke="var(--image-file-icon-stroke)"
+        d="M.996 2.5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9.006a2.5 2.5 0 0 1-.719 1.754l-1.47 1.494a2.5 2.5 0 0 1-1.782.746h-6.03a2 2 0 0 1-2-2v-11Z"
+      />
+      <path stroke="var(--image-file-icon-stroke)" d="M12.996 11.5a4 4 0 0 0-4 4" />
+      <circle cx="6.496" cy="4.5" r="1" fill="var(--image-file-icon-bg)" stroke="var(--image-file-icon-stroke)" />
+      <path
+        fill="var(--image-file-icon-bg)"
+        stroke="var(--image-file-icon-stroke)"
+        d="M6.33 10.25 8.497 6.5l2.165 3.75H6.33ZM3.697 10.25 4.996 8l1.299 2.25H3.697Z"
+      />
+    </SVGIcon>
+  );
+};

packages/react-ui-kit/src/Icon/Files/OtherFileIcon.tsx

@@ -0,0 +1,33 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {SVGIcon, SVGIconProps} from '../SVGIcon';
+
+export const OtherFileIcon = ({...props}: SVGIconProps) => {
+  return (
+    <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
+      <path
+        fill="var(--other-file-icon-bg)"
+        stroke="var(--other-file-icon-stroke)"
+        d="M1 2.5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9.006a2.5 2.5 0 0 1-.719 1.754l-1.47 1.494a2.5 2.5 0 0 1-1.782.746H3a2 2 0 0 1-2-2v-11Z"
+      />
+      <path stroke="var(--other-file-icon-stroke)" d="M13 11.5a4 4 0 0 0-4 4" />
+    </SVGIcon>
+  );
+};

packages/react-ui-kit/src/Icon/Files/PdfFileIcon.tsx

@@ -0,0 +1,37 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {SVGIcon, SVGIconProps} from '../SVGIcon';
+
+export const PdfFileIcon = ({...props}: SVGIconProps) => {
+  return (
+    <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
+      <path
+        fill="var(--pdf-file-icon-bg)"
+        stroke="var(--pdf-file-icon-stroke)"
+        d="M1 2.5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9.006a2.5 2.5 0 0 1-.719 1.754l-1.47 1.494a2.5 2.5 0 0 1-1.782.746H3a2 2 0 0 1-2-2v-11Z"
+      />
+      <path stroke="var(--pdf-file-icon-stroke)" d="M13 11.5a4 4 0 0 0-4 4" />
+      <path
+        fill="var(--pdf-file-icon-stroke)"
+        d="M3.231 11.17a.985.985 0 0 0 .746.33 1.88 1.88 0 0 0 1.077-.406c.329-.24.69-.884 1.038-1.756a24.574 24.574 0 0 1 1.705-.415c.57.573 1.293.967 2.082 1.135a1.025 1.025 0 0 0 .962-.433.966.966 0 0 0 .043-.99c-.135-.254-.502-.683-1.458-.69-.467.02-.931.074-1.39.162A5.57 5.57 0 0 1 7.018 6.58c.125-.415.247-.844.368-1.277l.125-.429A2.32 2.32 0 0 0 7.6 3.94c-.099-.696-.546-.967-.933-.937-.49.043-.963.551-.917 1.442.033.74.188 1.47.46 2.159a37.817 37.817 0 0 1-.693 2.092c-.985.307-1.852.66-2.158.99a1.094 1.094 0 0 0-.128 1.485Zm6.191-2.475c.598 0 .76.221.795.287a.195.195 0 0 1 0 .208.272.272 0 0 1-.266.099 2.727 2.727 0 0 1-1.179-.545c.215-.03.43-.046.647-.05h.003Zm-2.69-4.95c.017 0 .09.062.115.264.02.211-.002.424-.065.627l-.125.439c-.016.06-.036.122-.053.184a6.487 6.487 0 0 1-.088-.851c-.033-.445.138-.643.213-.65l.004-.013Zm-.029 3.848c.147.237.31.464.486.68-.256.056-.516.118-.775.184.102-.277.19-.567.289-.864Zm-2.792 2.623a3.815 3.815 0 0 1 1.238-.594 2.344 2.344 0 0 1-.535.845c-.453.33-.736.3-.818.205-.082-.096-.049-.278.115-.46v.004Z"
+      />
+    </SVGIcon>
+  );
+};

packages/react-ui-kit/src/Icon/Files/PresentationFileIcon.tsx

@@ -0,0 +1,42 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {SVGIcon, SVGIconProps} from '../SVGIcon';
+
+export const PresentationFileIcon = ({...props}: SVGIconProps) => {
+  return (
+    <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
+      <path
+        fill="var(--presentation-file-icon-bg)"
+        stroke="var(--presentation-file-icon-stroke)"
+        d="M1 2.5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9.006a2.5 2.5 0 0 1-.719 1.754l-1.47 1.494a2.5 2.5 0 0 1-1.782.746H3a2 2 0 0 1-2-2v-11Z"
+      />
+      <path stroke="var(--presentation-file-icon-stroke)" d="M13 11.5a4 4 0 0 0-4 4M5.5 9.5 5 11M8 9.5l.5 1.5" />
+      <rect
+        width="5.5"
+        height="3.971"
+        x="4"
+        y="5"
+        fill="var(--presentation-file-icon-bg)"
+        stroke="var(--presentation-file-icon-stroke)"
+        rx="1"
+      />
+    </SVGIcon>
+  );
+};

packages/react-ui-kit/src/Icon/Files/SpreadsheetFileIcon.tsx

@@ -0,0 +1,43 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {SVGIcon, SVGIconProps} from '../SVGIcon';
+
+export const SpreadsheetFileIcon = ({...props}: SVGIconProps) => {
+  return (
+    <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
+      <path
+        fill="var(--spreadsheet-file-icon-bg)"
+        stroke="var(--spreadsheet-file-icon-stroke)"
+        d="M1 2.5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9.006a2.5 2.5 0 0 1-.719 1.754l-1.47 1.494a2.5 2.5 0 0 1-1.782.746H3a2 2 0 0 1-2-2v-11Z"
+      />
+      <path stroke="var(--spreadsheet-file-icon-stroke)" d="M13 11.5a4 4 0 0 0-4 4" />
+      <rect
+        width="7.5"
+        height="4"
+        x="3.5"
+        y="5"
+        fill="var(--spreadsheet-file-icon-bg)"
+        stroke="var(--spreadsheet-file-icon-stroke)"
+        rx="1"
+      />
+      <path stroke="var(--spreadsheet-file-icon-stroke)" d="M3.895 7h6.71M6.505 5v4" />
+    </SVGIcon>
+  );
+};

packages/react-ui-kit/src/Icon/Files/VideoFileIcon.tsx

@@ -0,0 +1,36 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {SVGIcon, SVGIconProps} from '../SVGIcon';
+
+export const VideoFileIcon = ({...props}: SVGIconProps) => {
+  return (
+    <SVGIcon realWidth={14} realHeight={16} fill="none" {...props}>
+      <path
+        fill="var(--video-file-icon-bg)"
+        stroke="var(--video-file-icon-stroke)"
+        d="M1 2.5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9.006a2.5 2.5 0 0 1-.719 1.754l-1.47 1.494a2.5 2.5 0 0 1-1.782.746H3a2 2 0 0 1-2-2v-11Z"
+      />
+      <path
+        stroke="var(--video-file-icon-stroke)"
+        d="M13 11.5a4 4 0 0 0-4 4M9.25 7.317a.5.5 0 0 1 0 .866l-3.375 1.949a.5.5 0 0 1-.75-.433V5.8a.5.5 0 0 1 .75-.433L9.25 7.317Z"
+      />
+    </SVGIcon>
+  );
+};