mirador/src/components/icons/WorkspaceTypeMosaicIcon.jsx

An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.

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>
  );
}