fleet/frontend/components/graphics/FileScript.tsx

import React from "react";

import { uniqueId } from "lodash";

const FileScript = () => {
  const clipPathIdA = uniqueId("clip-path-a");
  const clipPathIdB = uniqueId("clip-path-b");

  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="34" height="40" fill="none">
      <g clipPath={`url(#${clipPathIdA})`}>
        <path
          fill="#fff"
          stroke="#192147"
          strokeWidth={0.5}
          d="M29.333 39.75H4.667a2.417 2.417 0 0 1-2.417-2.416V2.667A2.417 2.417 0 0 1 4.667.25h19.562c.64 0 1.255.255 1.709.708l5.104 5.105c.453.453.708 1.068.708 1.709v29.562a2.417 2.417 0 0 1-2.417 2.416Z"
        />
        <path
          fill="#C5C7D1"
          d="M23.5.5h.834l.5 6.5 6.666.5v1h-6a2 2 0 0 1-2-2v-6Z"
        />
        <path
          stroke="#192147"
          strokeWidth={0.5}
          d="M24.5.334v5.667c0 .736.597 1.333 1.333 1.333h6"
        />
        <g clipPath={`url(#${clipPathIdB})`}>
          <path
            fill="#8B8FA2"
            d="M15.113 26.75c.829.807 1.549 1.507 2.018 1.953.545.52.85 1.241.818 1.984-.033.743-.447 1.623-1.909 1.952-2.924.647-3.218-2.154-3.218-2.154l-.087-.817 2.389-2.917h-.011Z"
          />
          <path
            fill="#E2E4EA"
            d="m8.916 17.297 8.302-7.713s2.073-.892 3.142.307c1.07 1.2.502 2.79.502 2.79l-7.506 7.3-4.44-2.684Z"
          />
          <path
            fill="#C5C7D1"
            d="M15.113 26.75c-2.378-2.312-5.63-5.474-6.044-5.91-.665-.7-1.484-2.673.196-3.819a2.68 2.68 0 0 1 1.844-.414c2.716.372 2.236 3.374 2.236 3.374l5.902-5.697 5.608 5.496s1.418 1.506.632 2.525c-.785 1.019-7.952 9.517-7.952 9.517s1.003-1.305-.131-2.833c-.655-.89-2.302-2.238-2.302-2.238h.01Z"
          />
          <path
            stroke="#515774"
            strokeMiterlimit={10}
            strokeWidth={0.5}
            d="M17.633 31.716c.84-1.008 7.113-8.456 7.854-9.411.797-1.018-.632-2.525-.632-2.525l-5.608-5.496 1.615-1.602s.567-1.592-.502-2.79c-1.07-1.2-3.142-.308-3.142-.308l-7.92 7.342-.382.371c-1.21 1.167-.458 2.897.142 3.544.415.435 3.666 3.597 6.044 5.91l-2.346 2.928.044.806s.295 2.812 3.218 2.154c.698-.159 1.157-.435 1.451-.764l.153-.159h.01Z"
          />
          <path
            stroke="#515774"
            strokeMiterlimit={10}
            strokeWidth={0.5}
            d="M15.113 26.75s1.898 1.656 2.269 2.197c.37.541 1.036 1.507.316 2.674"
          />
          <path
            stroke="#515774"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={0.5}
            d="m19.345 14.188-6.021 5.836s.458-1.337-.557-2.578c-1.167-1.443-2.934-.764-2.934-.764a3.708 3.708 0 0 0-.666.371"
          />
        </g>
      </g>
      <defs>
        <clipPath id={clipPathIdA}>
          <path fill="#fff" d="M0 0h34v40H0z" />
        </clipPath>
        <clipPath id={clipPathIdB}>
          <path fill="#fff" d="M8 9h18v24H8z" />
        </clipPath>
      </defs>
    </svg>
  );
};

export default FileScript;