mirador
Version:
An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.
163 lines (161 loc) • 6.25 kB
JSX
import SvgIcon from '@mui/material/SvgIcon';
/**
* WorkspaceTypeMosaicIcon ~
*/
export default function WorkspaceTypeMosaicIcon(props) {
return (
<SvgIcon {...props}>
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="90" viewBox="0 0 300 225">
<defs>
<linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
<stop offset="0" />
<stop offset="0.14" stopOpacity="0.631" />
<stop offset="1" stopOpacity="0" />
</linearGradient>
<linearGradient id="linear-gradient-2" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
<stop offset="0" stopColor="#fff" stopOpacity="0" />
<stop offset="0.23" stopColor="#fff" stopOpacity="0.012" />
<stop offset="0.36" stopColor="#fff" stopOpacity="0.039" />
<stop offset="0.47" stopColor="#fff" stopOpacity="0.102" />
<stop offset="0.57" stopColor="#fff" stopOpacity="0.18" />
<stop offset="0.67" stopColor="#fff" stopOpacity="0.278" />
<stop offset="0.75" stopColor="#fff" stopOpacity="0.412" />
<stop offset="0.83" stopColor="#fff" stopOpacity="0.561" />
<stop offset="0.91" stopColor="#fff" stopOpacity="0.741" />
<stop offset="0.98" stopColor="#fff" stopOpacity="0.929" />
<stop offset="1" stopColor="#fff" />
</linearGradient>
<clipPath id="clip-mosaic_icon">
<rect width="300" height="225" />
</clipPath>
</defs>
<g id="mosaic_icon" data-name="mosaic icon" clipPath="url(#clip-mosaic_icon)">
<rect width="300" height="225" fill="#fff" />
<path
id="checkbox"
d="M258.766,37.316v146.5H39.053V37.316Zm40.07-39.254h-300v225h300Z"
transform="translate(1.163 1.938)"
fill="#010101"
fillRule="evenodd"
opacity="0.5"
/>
<path
id="checkbox-2"
data-name="checkbox"
d="M258.766,37.316v146.5H39.053V37.316Zm40.07-39.254h-300v225h300Z"
transform="translate(1.164 1.938)"
fill="#010101"
fillRule="evenodd"
opacity="0.246"
/>
<g id="Path_821" data-name="Path 821" transform="translate(40 39)" fill="none">
<path d="M0,0H220V147H0Z" stroke="none" />
<path
d="M 2 2 L 2 145 L 218 145 L 218 2 L 172.9869689941406 2 L 2 2 M 0 0 L 172.9869689941406 0 L 220 0 L 220 147 L 0 147 L 0 0 Z"
stroke="none"
fill="#01579b"
/>
</g>
<g
id="Rectangle_257"
data-name="Rectangle 257"
transform="translate(40 39)"
fill="#fff"
stroke="#01579b"
strokeWidth="2"
>
<rect width="20" height="147" stroke="none" />
<rect x="1" y="1" width="18" height="145" fill="none" />
</g>
<g id="Group_688" data-name="Group 688" transform="translate(-27.5 -126)">
<circle
id="teal_circle"
data-name="teal circle"
cx="7.5"
cy="7.5"
r="7.5"
transform="translate(70 171)"
fill="#009688"
/>
<g id="Group_333" data-name="Group 333" transform="translate(70 171)" opacity="0.12">
<path
id="gradient_border_2"
data-name="gradient border 2"
d="M3408,959.089A4.911,4.911,0,1,1,3403.09,964a4.911,4.911,0,0,1,4.911-4.911m0-.089a5,5,0,1,0,5,5,5,5,0,0,0-5-5Z"
transform="translate(-3403 -959)"
fill="url(#linear-gradient)"
/>
<path
id="gradient_border_1"
data-name="gradient border 1"
d="M3408,959.089A4.911,4.911,0,1,1,3403.09,964a4.911,4.911,0,0,1,4.911-4.911m0-.089a5,5,0,1,0,5,5,5,5,0,0,0-5-5Z"
transform="translate(-3403 -959)"
fill="url(#linear-gradient-2)"
/>
</g>
</g>
<g
id="Rectangle_270"
data-name="Rectangle 270"
transform="translate(60 40.647)"
fill="#88c6c3"
stroke="#707070"
strokeWidth="1"
opacity="0.747"
>
<rect width="99" height="72" stroke="none" />
<rect x="0.5" y="0.5" width="98" height="71" fill="none" />
</g>
<g
id="Rectangle_271"
data-name="Rectangle 271"
transform="translate(159 40.647)"
fill="#88c6c3"
stroke="#707070"
strokeWidth="1"
opacity="0.747"
>
<rect width="99" height="72" stroke="none" />
<rect x="0.5" y="0.5" width="98" height="71" fill="none" />
</g>
<g
id="Rectangle_272"
data-name="Rectangle 272"
transform="translate(192 112.647)"
fill="#88c6c3"
stroke="#707070"
strokeWidth="1"
opacity="0.747"
>
<rect width="66" height="71.45" stroke="none" />
<rect x="0.5" y="0.5" width="65" height="70.45" fill="none" />
</g>
<g
id="Rectangle_284"
data-name="Rectangle 284"
transform="translate(60 112.647)"
fill="#88c6c3"
stroke="#707070"
strokeWidth="1"
opacity="0.747"
>
<rect width="66" height="71.45" stroke="none" />
<rect x="0.5" y="0.5" width="65" height="70.45" fill="none" />
</g>
<g
id="Rectangle_285"
data-name="Rectangle 285"
transform="translate(126 112.647)"
fill="#88c6c3"
stroke="#707070"
strokeWidth="1"
opacity="0.747"
>
<rect width="66" height="71.45" stroke="none" />
<rect x="0.5" y="0.5" width="65" height="70.45" fill="none" />
</g>
</g>
</svg>
</SvgIcon>
);
}