Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-04-21 21:47:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 91
fleet/frontend/components/graphics/FilePkg.tsx
RachelElysia 092b55a760
FE: Ensure ids are unique (#36124)
2025-12-04 09:54:52 -05:00

151 lines
6.8 KiB
TypeScript
Raw Blame History

import React from "react";
import { uniqueId } from "lodash";
const FilePkg = () => {
const clipPathIdA = uniqueId("clip-path-");
const clipPathIdB = uniqueId("clip-path-");
const maskId = uniqueId("mask-");
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"
/>
<g clipPath={`url(#${clipPathIdB})`}>
<path
fill="#533006"
d="m16.685 30.474 7.826-4.518-7.826-4.518-7.826 4.518 7.826 4.518Z"
/>
<path
fill="#FFE400"
d="M24.51 25.956v-9.068l-7.825-4.518v9.036l7.826 4.55Z"
opacity={0.75}
/>
<path
fill="#533006"
d="M24.51 25.956v-6.068l-7.825-4.568v6.086l7.826 4.55Z"
opacity={0.5}
/>
<path
fill="#FBC191"
d="m24.51 19.87 2.609-2.982-7.825-4.518-2.61 2.949 7.827 4.55Z"
opacity={0.75}
/>
<path
fill="#FBFFAC"
d="m8.859 25.956 7.826-4.55V12.37l-7.826 4.518v9.068Z"
opacity={0.75}
/>
<path
fill="#533006"
d="m8.859 25.956 7.826-4.55V15.32l-7.826 4.55v6.086Z"
opacity={0.5}
/>
<path
fill="#EFAE7E"
d="m8.859 19.869 7.826-4.55-1.74-2.95-7.825 4.518 1.739 2.982Z"
opacity={0.75}
/>
<path
fill="#FFEE64"
d="m16.685 21.406 7.826-4.518-7.826-4.518-7.826 4.518 7.826 4.518Z"
opacity={0.75}
/>
<path
fill="#FFD400"
d="M8.859 16.887v9.069l7.826 4.518v-9.068l-7.826-4.518Z"
opacity={0.85}
/>
<path
fill="#E8B503"
d="M16.685 30.486v-9.068L24.51 16.9v9.068l-7.825 4.518Z"
opacity={0.85}
/>
<path
fill="#884D1E"
d="M8.859 19.496v6.46l7.826 4.518V23.8l-7.826-4.304Z"
opacity={0.85}
/>
<path
fill="#DEA176"
d="m8.859 19.496-1.74 2.981 7.827 4.519 1.739-3.196-7.826-4.304Z"
opacity={0.85}
/>
<path
fill="#975C2F"
d="M16.685 30.5v-6.656l7.825-4.518V26l-7.825 4.5Z"
opacity={0.85}
/>
<path
fill="#D49567"
d="m18.424 26.826-1.74-2.982 7.826-4.518 1.74 2.982-7.826 4.518Z"
opacity={0.85}
/>
<path
fill="#192147"
d="m8.65 19.5.07-.132a.15.15 0 0 0-.199.055l.129.077Zm7.964 4.432a.15.15 0 0 0 .142-.264l-.142.264Zm-8.035-4.3 8.035 4.3.142-.264-8.035-4.3-.142.264Zm-.058-.21-.3.5.258.155.3-.5-.258-.154Z"
/>
<path
stroke="#192147"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit={10}
strokeWidth={0.3}
d="m16.69 23.82 7.96-4.52.45.7"
/>
<path
stroke="#fff"
strokeMiterlimit={10}
strokeWidth={0.054}
d="M16.685 30.474v-9.036l7.825-4.55M8.859 16.887l7.826 4.55"
/>
<mask
id={maskId}
width={22}
height={20}
x={6.12}
y={11.37}
fill="#000"
maskUnits="userSpaceOnUse"
>
<path fill="#fff" d="M6.12 11.37h22v20h-22z" />
<path
fillRule="evenodd"
d="M8.859 25.956v-2.474l-1.74-1.005 1.631-2.794-1.63-2.796 7.826-4.517.441.749 1.298-.75 1.727.998.882-.997 7.825 4.518-2.418 2.764 1.549 2.655-1.74 1.005v2.644l-7.798 4.503v.015h-.054v-.015l-7.8-4.503Zm15.505-.085.145.084-.145-.084Z"
clipRule="evenodd"
/>
</mask>
<path
fill="#192147"
d="M8.859 23.482h.5a.5.5 0 0 0-.25-.433l-.25.433Zm0 2.474h-.5a.5.5 0 0 0 .25.433l.25-.433Zm-1.74-3.479-.431-.252a.5.5 0 0 0 .182.685l.25-.433Zm1.631-2.794.432.252a.5.5 0 0 0 0-.504l-.432.252Zm-1.63-2.796-.25-.433a.5.5 0 0 0-.182.685l.432-.252Zm7.826-4.517.43-.254a.5.5 0 0 0-.68-.18l.25.434Zm.441.749-.43.254a.5.5 0 0 0 .68.179l-.25-.433Zm1.298-.75.25-.432a.5.5 0 0 0-.5 0l.25.433Zm0 0-.25.433a.5.5 0 0 0 .5.001l-.25-.433Zm0 0 .25-.432a.5.5 0 0 0-.5 0l.25.433Zm1.727.998-.25.432a.5.5 0 0 0 .624-.101l-.374-.332Zm.882-.997.25-.433a.5.5 0 0 0-.625.101l.375.332Zm7.825 4.518.376.329a.5.5 0 0 0-.126-.762l-.25.433ZM24.7 19.652l-.377-.329a.5.5 0 0 0-.055.581l.432-.252Zm1.549 2.655.25.434a.5.5 0 0 0 .182-.685l-.432.252Zm-1.74 1.005-.25-.434a.5.5 0 0 0-.25.434h.5Zm0 2.644.25.433a.5.5 0 0 0 .25-.433h-.5Zm-7.798 4.503-.25-.433a.5.5 0 0 0-.25.433h.5Zm0 .015v.5a.5.5 0 0 0 .5-.5h-.5Zm-.054 0h-.5a.5.5 0 0 0 .5.5v-.5Zm0-.015h.5a.5.5 0 0 0-.25-.433l-.25.433Zm7.705-4.588-.25-.433a.5.5 0 0 0 0 .866l.25-.433Zm0 0 .252-.433a.5.5 0 0 0-.501 0l.25.433Zm.146.084-.25.433a.5.5 0 0 0 .501-.865l-.251.432Zm-16.15-2.473v2.474h1v-2.474h-1Zm-1.49-.572 1.74 1.005.5-.866-1.74-1.005-.5.866Zm1.45-3.48-1.631 2.795.863.504 1.631-2.794-.864-.504Zm-1.631-2.29 1.63 2.794.864-.503-1.63-2.796-.864.504Zm8.008-5.204L6.87 16.454l.5.866 7.826-4.517-.5-.867Zm1.122.929-.442-.75-.86.508.44.75.862-.508Zm.617-.928-1.298.748.5.867 1.298-.75-.5-.865Zm.5 0-.5.865.5-.865Zm-.5 0 .5.866-.5-.867Zm2.227.997-1.727-.997-.5.866 1.727.996.5-.865Zm.257-.896-.882.997.75.663.881-.997-.75-.663Zm8.45 4.417-7.825-4.518-.5.866 7.825 4.518.5-.866Zm-2.292 3.527 2.418-2.765-.752-.658-2.419 2.764.753.659Zm1.605 2.074-1.55-2.656-.863.504 1.549 2.655.864-.503Zm-1.921 1.689L26.5 22.74l-.5-.866-1.74 1.003.5.867Zm.25 2.211v-2.645h-1v2.645h1Zm-8.05 4.936 7.8-4.503-.5-.866-7.8 4.503.5.866Zm.25-.418v-.015h-1v.015h1Zm-.526.5h.027v-1h-.027v1Zm-.027 0h.027v-1h-.027v1Zm-.5-.515v.015h1v-.015h-1Zm-7.55-4.07 7.8 4.503.5-.866-7.8-4.503-.5.866Zm16.005-.085h.001l-.5-.866.5.866Zm.146-.782-.146-.084-.5.866.146.084.5-.866Zm-.646.78.145.085.502-.864-.145-.085-.502.865Z"
mask={`url(#${maskId})`}
/>
</g>
<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>
<defs>
<clipPath id={clipPathIdA}>
<path fill="#fff" d="M0 0h34v40H0z" />
</clipPath>
<clipPath id={clipPathIdB}>
<path fill="#fff" d="M6.5 11h21v21h-21z" />
</clipPath>
</defs>
</svg>
);
};
export default FilePkg;
Reference in a new issue View git blame Copy permalink