client/src/components/SvgIcon.tsx

/*
 * Copyright (C) 2022 Savoir-faire Linux Inc.
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU Affero 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 Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public
 * License along with this program.  If not, see
 * <https://www.gnu.org/licenses/>.
 */
import { SvgIcon, SvgIconProps } from '@mui/material';

/*
    We use SvgIcon so the icons can be handled more easily by Material ui components.
    Here some tips to add an SvgIcon in case you too struggle to find informations online:
    - Open the svg with https://jakearchibald.github.io/svgomg/ in order to clean it from useless information.
    - Replace the <svg> tag for <SvgIcon>.
    - Try removing "style" attributes. They are often uncessary and cause errors.
    - If some "style" attributes are necessary, convert them to the React inline style syntax (https://reactjs.org/docs/dom-elements.html#style).
    - Play with the viewBox attribute in order to center the icon and make it uses all available space. Adding a temporary border with inline style might help.
*/

export const ArrowIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 -3 20 20">
      <g>
        <path
          d="M0.302825536,7.53652162 L6.27862638,13.4439361 L6.37822306,13.542393 C6.77660979,13.9362206 7.47378655,13.8377637 7.77257659,13.4439361 C8.07136664,13.0501085 8.07136664,12.3609101 7.67297991,12.0655394 L3.39032264,7.83189235 L18.9274048,7.83189235 C19.5249849,7.83189235 19.9233716,7.43806472 19.9233716,6.84732327 C19.9233716,6.25658182 19.5249849,5.86275419 18.9274048,5.86275419 L3.39032264,5.86275419 L7.67297991,1.62910716 C7.97176996,1.23527953 7.97176996,0.742994993 7.67297991,0.349167363 C7.27459319,-0.0446602682 6.67701311,-0.143117176 6.27862638,0.250710455 L0.302825536,6.15812492 C0.00403549366,6.45349564 -0.0955611871,6.84732327 0.103632174,7.2411509 C0.103632174,7.33960781 0.203228855,7.43806472 0.302825536,7.53652162"
          id="Fill-1"
        ></path>
      </g>
    </SvgIcon>
  );
};

export const Arrow2Icon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 21.776 20.23">
      <path
        style={{ fill: 'none', stroke: '#7e7e7e', strokeMiterlimit: 10, strokeWidth: '1.75px' }}
        d="M.219 18.221a.771.771 0 0 1-.143-.87l3.942-8.124L.076 1.1A.77.77 0 0 1 1.085.068l18.461 8.461a.765.765 0 0 1 0 1.394L1.085 18.385a.771.771 0 0 1-.867-.164Z"
        transform="translate(.903 .901)"
      />
    </SvgIcon>
  );
};

export const Arrow3Icon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 21.045 14.743">
      <path
        d="m15.54 32.48 8.635 6.49a.2.2 0 0 0 .319-.174V34.74c9.823.666 10.982 4.984 10.982 4.984 0-8.982-7.186-10.228-10.982-10.257v-3.651a.187.187 0 0 0-.319-.145l-8.635 6.49a.227.227 0 0 0 0 .319Z"
        transform="translate(-14.93 -25.11)"
        style={{ fill: 'none', stroke: '#005699' }}
      />
    </SvgIcon>
  );
};

export const ArrowLeftCurved = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 16 8.814">
      <path d="M8.184 8.813a2.761 2.761 0 0 1-1.964-.815L1.627 3.409l1.782-1.782L7.998 6.22a.268.268 0 0 0 .368 0L14.218.368 16 2.15l-5.852 5.848a2.761 2.761 0 0 1-1.964.815Z" />
      <path d="M2.518 7.555H0v-6.3A1.259 1.259 0 0 1 1.259 0h6.3v2.518H2.518Z" />
    </SvgIcon>
  );
};

export const ArrowLeftDown = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="6 4.5 10.5 12.5">
      <path
        d="M15.25009097 14.59477981h-6.3300199l8.5305362-8.5305362-1.45522575-1.45522576-8.5305362 8.5305362v-6.3300199l-2.05555942.01909189v9.82171319l9.84009797.01838477Z"
        strokeWidth=".5"
      />
    </SvgIcon>
  );
};

export const ArrowRightUp = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="4.5 5.5 11.5 12.5">
      <path
        d="m6.82975394 7.48428721 6.3293128.0007071-8.53053621 8.53053622 1.45522575 1.45522575 8.53053621-8.5305362v6.3300199l2.05555941-.01909188V5.4294349l-9.84009796-.01838477Z"
        strokeWidth=".5"
      />
    </SvgIcon>
  );
};

export const AudioCallIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 15.338 16">
      {/* <svg
        xmlns="http://www.w3.org/2000/svg"
        width="15.338"
        height="16"
        viewBox="0 0 15.338 16"
      >
        <defs>
          <style>.a{"fill:#005699;"}</style>
        </defs> */}
      <g transform="translate(-2.404 -1.956)">
        <g transform="translate(2.404 1.956)">
          <g transform="translate(0)">
            <path
              className="a"
              d="M10.417,14.956a6.077,6.077,0,0,1-1.676-.239C4.669,13.6.359,9.049-.44,4.9A5.052,5.052,0,0,1,1.237-.37h0a2.456,2.456,0,0,1,2.075-.639A1.767,1.767,0,0,1,4.51.109a7.417,7.417,0,0,0,.4.8c.718,1.357,1.2,2.395.4,3.273h-.08l-.4.319c-1.118.718-1.118.8-.958,1.038a9.647,9.647,0,0,0,4.39,4.869c.239.16.319.16,1.038-.8.16-.16.239-.319.4-.479l.08-.08c.958-.8,1.916-.16,3.432.718l.559.319a1.849,1.849,0,0,1,.958,1.277,2.7,2.7,0,0,1-.718,2A4.721,4.721,0,0,1,10.417,14.956ZM1.875.508A3.893,3.893,0,0,0,.6,4.659c.718,3.752,4.79,7.983,8.382,9.02a3.72,3.72,0,0,0,4.151-1.038,1.254,1.254,0,0,0,.479-1.118.761.761,0,0,0-.479-.559l-.479-.319c-1.277-.8-1.756-1.038-2.075-.8a1.741,1.741,0,0,1-.319.4c-.639.8-1.357,1.756-2.475,1.118A10.6,10.6,0,0,1,2.913,6.016C2.195,4.9,3.232,4.18,4.19,3.541L4.51,3.3c.239-.319,0-.8-.639-1.916a7.417,7.417,0,0,1-.4-.8A.72.72,0,0,0,2.993.109c-.239-.08-.639.08-1.118.4Z"
              transform="translate(0.596 1.044)"
            />
          </g>
        </g>
      </g>
      {/* </svg> */}
    </SvgIcon>
  );
};

export const BlockContactIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 16 15.52">
      {/* <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.52">
        <defs>
          <style>.a{"fill:#005699;"}</style>
        </defs> */}
      <g transform="translate(-2 -2.3)">
        <path
          className="a"
          d="M15.88,11.5a4.08,4.08,0,1,0,4.08,4.08A4.1,4.1,0,0,0,15.88,11.5Zm0,.96a3.282,3.282,0,0,1,1.76.56l-4.48,4a3.309,3.309,0,0,1-.4-1.52A3.22,3.22,0,0,1,15.88,12.46Zm0,6.24a3.091,3.091,0,0,1-2.16-.88l4.56-4.08a2.852,2.852,0,0,1,.64,1.84A3.007,3.007,0,0,1,15.88,18.7Z"
          transform="translate(-1.96 -1.84)"
        />
        <path
          className="a"
          d="M12,10.94l.56-.32A6.445,6.445,0,0,0,9.92,9.5a3.626,3.626,0,0,0,2.56-3.52A3.555,3.555,0,0,0,8.88,2.3,3.735,3.735,0,0,0,7.76,9.58,7.327,7.327,0,0,0,2,17.02a.547.547,0,0,0,.56.56.547.547,0,0,0,.56-.56c0-3.6,2.64-6.56,5.92-6.56a5.3,5.3,0,0,1,2.88.88A.971.971,0,0,1,12,10.94ZM8.88,8.7A2.68,2.68,0,1,1,11.6,6.06,2.631,2.631,0,0,1,8.88,8.7Z"
        />
      </g>
      {/* </svg> */}
    </SvgIcon>
  );
};

export const CallEndIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 0h24v24H0z" fill="none" />
        <path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z" />
      </svg>
    </SvgIcon>
  );
};

export const CameraIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="2 3 20 19">
      <path d="M3.6 20.3c-.4 0-.8-.2-1.1-.5-.2-.2-.4-.6-.4-.9V7.7c-.1-.3.1-.7.4-1 .2-.3.5-.4.8-.5H7.9l1.2-2.5h5.7L16 6.2h4.3c.4 0 .8.2 1.1.5.2.2.4.6.4.9v11.2c0 .4-.2.8-.5 1.1-.2.2-.6.4-.9.4H3.6zm0-12.6-.1 11v.1h17.1V7.7h-5.3L14 5.2h-4L8.8 7.7H3.6zm8.4 9.7c-1.2 0-2.3-.5-3.2-1.3-.8-.8-1.3-2-1.3-3.2 0-1.2.5-2.3 1.3-3.2.8-.8 2-1.3 3.2-1.3 1.2 0 2.3.5 3.2 1.3.8.8 1.3 2 1.3 3.2s-.5 2.3-1.3 3.2c-.9.8-2 1.3-3.2 1.3zm0-7.5c-.8 0-1.6.3-2.1.9S9 12.1 9 12.9s.3 1.6.9 2.1c1.1 1.1 3.1 1.1 4.3 0 .6-.6.9-1.3.9-2.1s-.3-1.6-.9-2.1c-.6-.6-1.4-.9-2.2-.9z" />
    </SvgIcon>
  );
};

export const CameraInBubbleIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 25 25">
      <path d="M25 25H12.5A12.379 12.379 0 0 1 0 12.5 12.379 12.379 0 0 1 12.5 0 12.379 12.379 0 0 1 25 12.5ZM12.5 1.75a11 11 0 0 0-7.625 3.125 10.865 10.865 0 0 0 0 15.25A10.781 10.781 0 0 0 12.5 23.25h10.75V12.5a11 11 0 0 0-3.125-7.625A11 11 0 0 0 12.5 1.75Z" />
      <path d="M15.125 18.375H6.75a1.329 1.329 0 0 1-1.5-1.25v-8a1.465 1.465 0 0 1 1.375-1.25H15a1.286 1.286 0 0 1 1.375 1.25v.75l1.375-.75A1.146 1.146 0 0 1 19.125 9a1.034 1.034 0 0 1 .625 1v6.25a1.248 1.248 0 0 1-.625 1.125 1.479 1.479 0 0 1-1.25-.125L16.5 16.5v.75a1.276 1.276 0 0 1-1.375 1.125Zm-8.25-1.625h8v-1.625a1.08 1.08 0 0 1 .375-.75.8.8 0 0 1 .75 0l2 1.125v-4.75l-1.875 1.125a.8.8 0 0 1-.75 0 .685.685 0 0 1-.5-.75V9.5h-8Zm11.875-.875Z" />
    </SvgIcon>
  );
};

export const CancelIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="2 2 20 20">
      <path d="M12 2C6.4771525 2 2 6.4771525 2 12s4.4771525 10 10 10 10-4.4771525 10-10S17.5228475 2 12 2Zm0 1.33333168c2.0746076-.00128199 4.079864.74684198 5.6466667 2.10666832L5.39333333 17.5933333c-2.17561675-2.5749862-2.66070945-6.17789412-1.2436087-9.23660098C5.56682538 5.29802546 8.62897124 3.33855529 12 3.33333168Zm0 17.33333502c-2.08385186-.000638-4.09692832-.7561338-5.66666667-2.1266667L18.5866667 6.38c2.1903962 2.57136307 2.6872505 6.1810635 1.2730136 9.2485834C18.4454435 18.6961032 15.3778286 20.6624553 12 20.6666667Z" />
    </SvgIcon>
  );
};

export const ChatBubbleIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <g id="Icons_Outline">
        <g id="Chat_Black_24dp">
          <g id="Shape" transform="translate(3.000000, 4.000000)">
            <g>
              <path
                d="M4.6,17c-0.2,0-0.4,0-0.6-0.1c-0.6-0.3-0.9-0.8-0.9-1.5V13H2.3C0.5,13-1,11.5-1,9.6V2.3C-1,0.5,0.5-1,2.3-1h13.3
					C17.5-1,19,0.5,19,2.3v7.3c0,1.8-1.5,3.3-3.3,3.3H9.5l-3.8,3.6C5.4,16.8,5,17,4.6,17z M2.3,0.4c-1.1,0-1.9,0.9-1.9,2v7.3
					c0,1,0.8,1.9,1.9,1.9h2.2v3.9c0,0,0,0.1,0.1,0.1s0.1,0,0.2,0l4.2-4h6.7c1,0,1.9-0.8,1.9-1.9V2.3c0-1-0.8-1.9-1.9-1.9H2.3
					L2.3,0.4z"
              />
            </g>
          </g>
        </g>
      </g>
    </SvgIcon>
  );
};

export const CheckedIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 16 16">
      <path d="M11.138 5.152 6.802 9.486l-1.936-1.94a.64205296.64205296 0 0 0-.908.908l2.39 2.394a.642.642 0 0 0 .908 0l4.79-4.785a.6431145.6431145 0 0 0-.908-.911Z" />
      <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 1.284A6.716 6.716 0 1 0 14.716 8 6.723 6.723 0 0 0 8 1.284Z" />
    </SvgIcon>
  );
};

export const ContactDetailsIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 14.647 16">
      {/* <svg
        xmlns="http://www.w3.org/2000/svg"
        width="14.647"
        height="16"
        viewBox="0 0 14.647 16"
      >
        <defs>
          <style>.a{"fill:#005699;"}</style>
        </defs> */}
      <path
        className="a"
        d="M11.258,9.562A3.774,3.774,0,0,0,13.965,5.9,3.79,3.79,0,0,0,10.144,2,3.871,3.871,0,0,0,8.95,9.562,7.806,7.806,0,0,0,2.9,17.443a.557.557,0,1,0,1.114,0c0-3.821,2.786-6.925,6.209-6.925s6.209,3.1,6.209,6.925a.557.557,0,0,0,1.114,0C17.388,13.463,14.681,10.119,11.258,9.562ZM7.278,5.9a2.866,2.866,0,1,1,5.731,0,2.787,2.787,0,0,1-2.866,2.786A2.838,2.838,0,0,1,7.278,5.9Z"
        transform="translate(-2.9 -2)"
      />
      {/* </svg> */}
    </SvgIcon>
  );
};

export const CrossedEyeIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 15.931 12.145">
      <path d="M7.933 10.41a7.081 7.081 0 0 1-3.7-1.292 12.409 12.409 0 0 1-2.874-2.717.237.237 0 0 1 0-.366 14.122 14.122 0 0 1 2.429-2.372L3 2.873a14.6 14.6 0 0 0-2.836 2.93.629.629 0 0 0 .019.87 13.62 13.62 0 0 0 4.222 3.834 7.4 7.4 0 0 0 3.547 1 7.067 7.067 0 0 0 2.948-.711l-.848-.848a5.577 5.577 0 0 1-2.119.462ZM15.74 5.784a13.154 13.154 0 0 0-4.26-3.856A7.284 7.284 0 0 0 8.145.941a6.436 6.436 0 0 0-2.892.6l.848.848a5.691 5.691 0 0 1 1.793-.348 5.788 5.788 0 0 1 2.583.617 11.437 11.437 0 0 1 3.586 2.783c.193.212.347.424.54.636a.209.209 0 0 1 .019.289 13.993 13.993 0 0 1-2.256 2.275l.79.79a14.6 14.6 0 0 0 2.6-2.737.658.658 0 0 0-.016-.91Z" />
      <path d="m9.687 5.974 1 1a3.349 3.349 0 0 0 .1-.752 2.867 2.867 0 0 0-2.835-2.848 2.576 2.576 0 0 0-.771.116l1.022 1.021a1.738 1.738 0 0 1 1.484 1.463ZM5.311 5.205a2.6 2.6 0 0 0-.193 1.022A2.867 2.867 0 0 0 7.971 9.06a3.005 3.005 0 0 0 1.022-.193l-.906-.906h-.135a1.749 1.749 0 0 1-1.734-1.773v-.077ZM2.882.173A.514.514 0 0 0 2.493 0a.659.659 0 0 0-.556.386.49.49 0 0 0 .135.578l11.007 11.007a.514.514 0 0 0 .386.173.659.659 0 0 0 .559-.386.49.49 0 0 0-.131-.577Z" />
    </SvgIcon>
  );
};

export const CrossIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 10 10">
      <path
        d="M32 979.362a.652.652 0 0 0-.652.652v3.7h-3.7a.652.652 0 0 0 0 1.3h3.7v3.7a.652.652 0 0 0 1.3 0v-3.7h3.7a.652.652 0 0 0 0-1.3h-3.7v-3.7a.652.652 0 0 0-.648-.652Z"
        transform="translate(-27 -979.362)"
      />
    </SvgIcon>
  );
};

export const ExtensionIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <g id="Icons_Outline" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
        <g id="Plugin" fill="#000000" fillRule="nonzero" stroke="#ffffff" strokeWidth="1">
          <g id="noun_add-on-plugin_2469914" transform="translate(2.000000, 2.000000)">
            <path
              d="M7.95454545,-2.58379177e-14 C6.07714045,-2.58379177e-14 4.54545455,1.53168636 4.54545455,3.40909091 C4.54545455,3.81146364 4.63639864,4.18709545 4.765625,4.54545455 L0.454545455,4.54545455 C0.203517329,4.54547964 -3.28047432e-07,4.74897187 -3.28047432e-07,5 L-3.28047432e-07,9.54545909 C-3.28047432e-07,9.69805849 0.0762260247,9.84056553 0.20341697,9.92488084 C0.330607915,10.0091961 0.49161786,10.0240699 0.632102273,9.96448182 C0.928123182,9.84116364 1.2500475,9.77273182 1.59090909,9.77273182 C2.977005,9.77273182 4.09090909,10.8866409 4.09090909,12.2727318 C4.09090909,13.6588227 2.977005,14.7727318 1.59090909,14.7727318 C1.2500475,14.7727318 0.928123182,14.7043 0.632102273,14.5809591 C0.491614149,14.5213694 0.330599681,14.5362456 0.203407479,14.6205663 C0.0762152768,14.704887 -3.28047432e-07,14.8474011 -3.28047432e-07,15 L-3.28047432e-07,19.5454591 C-3.28047432e-07,19.7964872 0.203517329,20 0.454545455,20 L15.4545455,20 C15.7055736,20 15.9090658,19.7964872 15.9090909,19.5454591 L15.9090909,15.6108 C16.1285164,15.6553682 16.3589991,15.6818227 16.5909091,15.6818227 C18.4683141,15.6818227 19.9999997,14.1501409 19.9999997,12.2727318 C19.9999997,10.3953227 18.4683141,8.86363636 16.5909091,8.86363636 C16.3589991,8.86363636 16.1285164,8.89009545 15.9090909,8.93465909 L15.9090909,5 C15.9090658,4.74897187 15.7055736,4.54547964 15.4545455,4.54545455 L11.1434659,4.54545455 C11.2726923,4.18709545 11.3636364,3.81146364 11.3636364,3.40909091 C11.3636364,1.53168636 9.83195045,-2.58379177e-14 7.95454545,-2.58379177e-14 L7.95454545,-2.58379177e-14 Z M7.95454545,0.909090909 C9.34064136,0.909090909 10.4545455,2.02299545 10.4545455,3.40909091 C10.4545455,3.90517045 10.3070727,4.36090227 10.0568182,4.75142045 C9.96529803,4.89157836 9.95820859,5.07069263 10.0383647,5.21764558 C10.1185209,5.36459852 10.272952,5.45561067 10.4403409,5.45454545 L15,5.45454545 L15,9.54545909 C14.9998246,9.69805849 15.076226,9.84056553 15.203417,9.92488084 C15.3306079,10.0091961 15.4916179,10.0240699 15.6321023,9.96448182 C15.928123,9.84116364 16.2500475,9.77273182 16.5909091,9.77273182 C17.977005,9.77273182 19.0909091,10.8866409 19.0909091,12.2727318 C19.0909091,13.6588227 17.977005,14.7727318 16.5909091,14.7727318 C16.2500475,14.7727318 15.928123,14.7043 15.6321023,14.5809591 C15.4916141,14.5213694 15.3305997,14.5362456 15.2034075,14.6205663 C15.0762153,14.704887 14.999817,14.8474011 15,15.0000045 L15,19.0909136 L0.909090909,19.0909136 L0.909090909,15.6108 C1.12851636,15.6553682 1.35899909,15.6818227 1.59090909,15.6818227 C3.46831409,15.6818227 5,14.1501409 5,12.2727318 C5,10.3953227 3.46831409,8.86363636 1.59090909,8.86363636 C1.35899909,8.86363636 1.12851636,8.89009545 0.909090909,8.93465909 L0.909090909,5.45454545 L5.46875,5.45454545 C5.6361389,5.45561067 5.79057002,5.36459852 5.87072617,5.21764558 C5.95088232,5.07069263 5.94379288,4.89157836 5.85227273,4.75142045 C5.60201818,4.36090227 5.45454545,3.90517045 5.45454545,3.40909091 C5.45454545,2.02299545 6.56844955,0.909090909 7.95454545,0.909090909 L7.95454545,0.909090909 Z"
              id="Shape"
            ></path>
          </g>
        </g>
      </g>
    </SvgIcon>
  );
};

export const EmojiIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 25 25">
      <path d="M12.5 0A12.5 12.5 0 1 0 25 12.5 12.537 12.537 0 0 0 12.5 0Zm0 23.25A10.75 10.75 0 1 1 23.25 12.5 10.749 10.749 0 0 1 12.5 23.25Z" />
      <path d="M18.25 14a.688.688 0 0 0-.625.25 9.558 9.558 0 0 1-5.125 1.625 7.867 7.867 0 0 1-5.125-1.625C7.25 14 6.875 14 6.75 14a1.34 1.34 0 0 0-.75.25c-.125.125-.125.5-.125.75a.853.853 0 0 0 .375.625A10.559 10.559 0 0 0 12.5 17.5a11.419 11.419 0 0 0 6.25-1.875 1.726 1.726 0 0 0 .375-.5V15a.937.937 0 0 0-.125-.625ZM7.5 10.75a1.049 1.049 0 0 0 1.125-1.125A1.049 1.049 0 0 0 7.5 8.5a1.049 1.049 0 0 0-1.125 1.125A1.049 1.049 0 0 0 7.5 10.75ZM17.5 10.75a1.049 1.049 0 0 0 1.125-1.125A1.116 1.116 0 0 0 17.5 8.5a1.208 1.208 0 0 0-1.125 1.125.994.994 0 0 0 1.125 1.125Z" />
    </SvgIcon>
  );
};

export const ExpandLessIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 25 25">
      <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
    </SvgIcon>
  );
};

export const EyeIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 15.931 10.568">
      <path d="M7.933 9.469a7.081 7.081 0 0 1-3.7-1.292A12.409 12.409 0 0 1 1.359 5.46a.237.237 0 0 1 0-.366c.733-.892 3.322-3.276 4.685-3.702l-.791-.79a18.682 18.682 0 0 0-5.089 4.26.629.629 0 0 0 .019.867 13.62 13.62 0 0 0 4.222 3.837 7.4 7.4 0 0 0 3.547 1 7.067 7.067 0 0 0 2.948-.711l-.847-.853a5.577 5.577 0 0 1-2.12.467Z" />
      <path d="M15.74 4.843A13.154 13.154 0 0 0 11.48.987 7.284 7.284 0 0 0 8.145 0a6.436 6.436 0 0 0-2.892.6l.848.848A5.691 5.691 0 0 1 7.894 1.1a5.788 5.788 0 0 1 2.583.617A11.437 11.437 0 0 1 14.063 4.5c.193.212.347.424.54.636a.209.209 0 0 1 .019.289 17.151 17.151 0 0 1-4.627 3.6l.79.79a21.4 21.4 0 0 0 4.973-4.067.658.658 0 0 0-.018-.905Z" />
      <g transform="translate(4.952 1.963)" style={{ stroke: '#005699', fill: 'none' }}>
        <circle cx="3" cy="3" r="3" style={{ stroke: 'none' }} />
        <circle cx="3" cy="3" r="2.5" />
      </g>
    </SvgIcon>
  );
};

export const FileIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <path
        d="M14.2,2.3C14,2.1,13.7,2,13.4,2H5.5C4.8,2,4.3,2.5,4.3,3.2v6.3v1.6v9.7c0,0.7,0.5,1.2,1.2,1.2h13.1c0.7,0,1.2-0.5,1.2-1.2
	V18V8.4c0-0.3-0.1-0.6-0.3-0.8L14.2,2.3z M18,7.7H14c0,0,0,0,0,0V3.7L18,7.7z M18.6,20.9C18.6,20.9,18.6,20.9,18.6,20.9l-13.1,0
	c0,0,0,0,0,0v-9.7V9.5V3.2c0,0,0,0,0,0h7.4v4.5c0,0.7,0.5,1.2,1.2,1.2h4.5v9.2V20.9z"
      />
    </SvgIcon>
  );
};

export const FolderIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 17.504 14.812">
      <path d="M15.484 14.812H2.02a.675.675 0 0 1-.666-.578L.007 4.809a.674.674 0 0 1 .665-.769h.673V.673A.674.674 0 0 1 2.02 0h4.039a.676.676 0 0 1 .373.113l1.85 1.233h7.2a.674.674 0 0 1 .673.673v2.02h.673a.675.675 0 0 1 .667.769l-1.346 9.426a.677.677 0 0 1-.665.578ZM1.449 5.387 2.6 13.466h12.3l1.154-8.079Zm1.244-4.04v2.692h12.118V2.693H8.078A.677.677 0 0 1 7.7 2.58L5.855 1.346Z" />
    </SvgIcon>
  );
};

export const FullScreenIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <g>
        <polygon points="2,9.4 3.8,9.4 3.8,3.8 9.7,3.8 9.7,2 2,2  " />
        <polygon points="3.8,14.3 2,14.3 2,22 9.4,22 9.4,20.2 3.8,20.2  " />
        <polygon points="20.2,20.2 14.3,20.2 14.3,22 22,22 22,14.6 20.2,14.6  " />
        <polygon points="14.6,2 14.6,3.8 20.2,3.8 20.2,9.7 22,9.7 22,2  " />
      </g>
    </SvgIcon>
  );
};

export const GroupAddIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <path
        d="M16.1,11.3c1.1-0.7,1.8-2,1.8-3.3c0-2.2-1.8-4-4-4c-2.2,0-4,1.8-4,4c0,1.3,0.7,2.6,1.8,3.3c-0.6,0.3-1.2,0.6-1.8,1.1
	c-0.3-0.3-0.6-0.5-1-0.7c0.6-0.6,1-1.4,1-2.3c0-1.8-1.4-3.2-3.2-3.2c-1.8,0-3.2,1.4-3.2,3.2c0,0.9,0.4,1.7,1,2.3
	c-1.5,0.8-2.5,2.4-2.5,4.2c0,0.6,0.5,1.1,1.1,1.1h4.7c0,0.6,0.5,1.1,1.1,1.1h6.5l-0.3-0.2c-0.3-0.2-0.5-0.6-0.7-1l0-0.1H9.1
	c0-0.3,0.1-0.7,0.1-1c0.1-0.6,0.4-1.1,0.7-1.6c0.2-0.3,0.4-0.6,0.7-0.8c0.9-0.8,2.1-1.3,3.3-1.3c1.1,0,2.1,0.4,3,1l0.1,0.1l0.1-0.1
	c0.1-0.2,0.2-0.4,0.4-0.6c0.1-0.1,0.1-0.1,0.2-0.2l0.1-0.1l-0.1-0.1C17.2,11.8,16.6,11.5,16.1,11.3z M16.6,7.9
	c0,1.5-1.2,2.7-2.7,2.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7C15.4,5.2,16.6,6.4,16.6,7.9z M6.6,11.3c-1.1,0-2-0.9-2-2
	c0-1.1,0.9-2,2-2c1.1,0,2,0.9,2,2C8.6,10.4,7.7,11.3,6.6,11.3z M9,13.3c-0.5,0.7-0.9,1.5-1.1,2.4H3.2c0.1-1.8,1.6-3.3,3.4-3.3
	C7.5,12.4,8.4,12.7,9,13.3z"
      />
      <path
        d="M21.2,15.6l-1.7,0l0-1.7c0-0.4-0.3-0.7-0.7-0.7c-0.2,0-0.4,0.1-0.5,0.2c-0.1,0.1-0.2,0.3-0.2,0.5l0,1.7l-1.7,0
	c-0.2,0-0.4,0.1-0.5,0.2c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.4,0.3,0.7,0.7,0.7l1.7,0l0,1.7c0,0.4,0.3,0.7,0.7,0.7h0
	c0.2,0,0.4-0.1,0.5-0.2c0.1-0.1,0.2-0.3,0.2-0.5l0-1.7l1.7,0c0.2,0,0.4-0.1,0.5-0.2c0.1-0.1,0.2-0.3,0.2-0.5
	C21.9,16,21.6,15.7,21.2,15.6z"
      />
    </SvgIcon>
  );
};

export const InfoIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="2 2 20 20">
      <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
    </SvgIcon>
  );
};

export const ListIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <path d="M3.4 5.4C2.6 5.4 2 4.8 2 4v-.1c0-.7.6-1.3 1.3-1.3h.1c.7 0 1.3.6 1.3 1.3V4c.1.8-.5 1.4-1.3 1.4zM21 3H8.9c-.5 0-1 .4-1 1 0 .5.4 1 1 1H21c.5 0 1-.4 1-1s-.4-1-1-1zM3.4 13.4c-.8 0-1.4-.6-1.4-1.4 0-.7.6-1.3 1.3-1.3h.1c.7 0 1.3.6 1.3 1.3.1.8-.5 1.4-1.3 1.4zM21 13H8.9c-.5 0-1-.4-1-1 0-.5.4-1 1-1H21c.5 0 1 .4 1 1s-.4 1-1 1zM3.4 21.4c-.8 0-1.4-.6-1.4-1.3V20c0-.7.6-1.3 1.3-1.3h.1c.7 0 1.3.6 1.3 1.3v.1c.1.7-.5 1.3-1.3 1.3zM21 21H8.9c-.5 0-1-.5-1-1s.4-1 1-1H21c.5 0 1 .4 1 1s-.4 1-1 1z" />
    </SvgIcon>
  );
};

export const LockIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 12.727 15.636">
      <path d="M10.727 15.636H2a2 2 0 0 1-2-2V7.454a2 2 0 0 1 2-2h8.727a2 2 0 0 1 2 2v6.182a2 2 0 0 1-2 2ZM2 6.545a.91.91 0 0 0-.909.909v6.182a.91.91 0 0 0 .909.909h8.727a.908.908 0 0 0 .909-.909V7.454a.908.908 0 0 0-.909-.909Z" />
      <path d="M10.363 6.546h-8A.546.546 0 0 1 1.818 6V4.181a4.048 4.048 0 0 1 1.35-2.974A4.73 4.73 0 0 1 6.364 0a4.729 4.729 0 0 1 3.195 1.207 4.048 4.048 0 0 1 1.35 2.974V6a.546.546 0 0 1-.546.546Zm-4-5.455a3.645 3.645 0 0 0-2.462.923 2.918 2.918 0 0 0-.993 2.167v1.274h6.91V4.181a2.918 2.918 0 0 0-.993-2.167 3.644 3.644 0 0 0-2.461-.923ZM6.363 11.272a1.636 1.636 0 1 1 1.636-1.636 1.638 1.638 0 0 1-1.636 1.636Zm0-2.182a.545.545 0 1 0 .545.545.546.546 0 0 0-.545-.544Z" />
      <path d="M5.818 10.727v1.819a.5455.5455 0 1 0 1.091 0v-1.819a.5455.5455 0 0 0-1.091 0Z" />
    </SvgIcon>
  );
};

export const MessageIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 16 14.554">
      {/* <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="14.554"
        viewBox="0 0 16 14.554"
      >
        <defs>
          <style>.a{"fill:#005699;"}</style>
        </defs> */}
      <g transform="translate(-3.7 -4.4)">
        <g transform="translate(3.7 4.4)">
          <g transform="translate(0 0)">
            <path
              className="a"
              d="M5.134,14.954a.869.869,0,0,1-.482-.1A1.252,1.252,0,0,1,3.881,13.7V11.773H3.3a2.614,2.614,0,0,1-2.6-2.7V3.1A2.675,2.675,0,0,1,3.3.4H14a2.635,2.635,0,0,1,2.7,2.7v5.88a2.694,2.694,0,0,1-2.7,2.7H9.086L6,14.569A1.222,1.222,0,0,1,5.134,14.954ZM3.3,1.653A1.547,1.547,0,0,0,1.76,3.292v5.88A1.585,1.585,0,0,0,3.3,10.713H5.037V13.8a.094.094,0,0,0,.1.1h.193L8.7,10.617h5.4A1.585,1.585,0,0,0,15.64,9.075V3.1A1.585,1.585,0,0,0,14.1,1.557H3.3Z"
              transform="translate(-0.7 -0.4)"
            />
          </g>
        </g>
      </g>
      {/* </svg> */}
    </SvgIcon>
  );
};

export const MoreVerticalIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <g>
        <circle cx="12" cy="4.3" r="2.3" />
        <circle cx="12" cy="12" r="2.3" />
        <circle cx="12" cy="19.7" r="2.3" />
      </g>
    </SvgIcon>
  );
};

export const MicroIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <g>
        <path
          d="M12,16.2c1.1,0,2.1-0.4,2.8-1.2c0.8-0.8,1.2-1.9,1.2-2.8V6c0-1.1-0.4-2.1-1.2-2.8C13.3,1.6,10.7,1.6,9,3C8.4,3.8,8,4.8,8,6
          v6c0,1.1,0.4,2.1,1.2,2.8C9.9,15.8,10.9,16.2,12,16.2z M9.3,6c0-0.7,0.3-1.3,0.8-1.9c0.5-0.5,1.2-0.8,1.9-0.8s1.3,0.3,1.9,0.8
          s0.8,1.1,0.8,1.9v6c0,0.7-0.3,1.3-0.8,1.9c-1.1,1.1-2.7,1.1-3.6,0c-0.5-0.5-0.9-1.1-0.9-1.9V6z"
        />
        <path
          d="M18.7,8.8c-0.3-0.3-0.7-0.3-1.1,0c-0.1,0.1-0.3,0.3-0.3,0.5V12c0,3.1-2.4,5.5-5.5,5.5S6.5,15.1,6.5,12V9.2
          c0-0.4-0.3-0.7-0.7-0.7l0,0c-0.1,0-0.4,0.1-0.5,0.3c-0.1,0-0.1,0.3-0.1,0.4V12c0,3.5,2.7,6.4,6.2,6.8v1.7H9.2
          c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7h5.6c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7h-2.1v-1.7
          c3.5-0.4,6.2-3.4,6.2-6.8V9.2C18.8,9.1,18.8,8.9,18.7,8.8z"
        />
      </g>
    </SvgIcon>
  );
};

export const MicroOffIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <g>
        <path
          d="M12,16.1c1.1,0,2.1-0.4,2.8-1.2c0.8-0.8,1.2-1.9,1.2-2.8V6c0-1.1-0.4-2.1-1.2-2.8c-1.5-1.5-4.2-1.5-5.8,0
          C8.4,3.8,8,4.9,8,6v6.2c0,1.1,0.4,2.1,1.2,2.8C9.9,15.7,10.8,16.1,12,16.1z M9.4,6c0-0.7,0.3-1.3,0.8-1.9c0.5-0.5,1.1-0.8,1.9-0.8
          c0.7,0,1.3,0.3,1.9,0.8c0.5,0.5,0.8,1.1,0.8,1.9v6.2c0,0.7-0.3,1.3-0.8,1.9c-1.1,1.1-2.7,1.1-3.6,0c-0.5-0.5-0.8-1.1-0.8-1.9
          C9.4,12.1,9.4,6,9.4,6z"
        />
        <path
          d="M18.6,8.8c-0.3-0.3-0.7-0.3-1.1,0c0,0.1-0.1,0.3-0.1,0.5v2.8c0,3.1-2.4,5.5-5.5,5.5s-5.5-2.4-5.5-5.5V9.3
          c0-0.4-0.3-0.7-0.7-0.7l0,0c-0.1-0.1-0.3,0-0.4,0.1C5.1,8.9,5.1,9,5.1,9.3v2.8c0,3.5,2.7,6.4,6.2,6.8v1.7h-2
          c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7h5.6c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7h-2.1V19c3.5-0.4,6.2-3.4,6.2-6.8
          V9.3C18.9,9,18.9,9,18.6,8.8z"
        />
      </g>
      <g>
        <path
          d="M5.5,21.9c-0.1,0-0.3,0-0.4-0.1c-0.3-0.3-0.4-0.7-0.3-1.1L17.7,2.6c0.3-0.3,0.7-0.4,1.1-0.3C19,2.6,19.1,3,19,3.4L6,21.6
          C5.9,21.8,5.6,21.9,5.5,21.9z"
        />
      </g>
    </SvgIcon>
  );
};

export const MicroInBubbleIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 25 25">
      <g transform="translate(-2 -2)">
        <g transform="translate(2 2)">
          <path
            d="M23.375,5.625A12.372,12.372,0,0,0,14.5,2,12.379,12.379,0,0,0,2,14.5,12.379,12.379,0,0,0,14.5,27H27V14.5A12.372,12.372,0,0,0,23.375,5.625ZM25.25,25.25H14.5a11,11,0,0,1-7.625-3.125A10.781,10.781,0,0,1,3.75,14.5,11,11,0,0,1,6.875,6.875a10.865,10.865,0,0,1,15.25,0A10.781,10.781,0,0,1,25.25,14.5Z"
            transform="translate(-2 -2)"
          />
          <path
            d="M16.6,10.35a.649.649,0,0,0-.25.5V12.6a3.125,3.125,0,0,1-6.25,0V10.85a.948.948,0,0,0-.25-.5.649.649,0,0,0-.5-.25h0a.649.649,0,0,0-.5.25.649.649,0,0,0-.25.5V12.6a4.563,4.563,0,0,0,3.875,4.5v.625H11.35a.625.625,0,0,0,0,1.25h3.5a.625.625,0,0,0,0-1.25H13.725V17.1A4.68,4.68,0,0,0,17.6,12.6V10.85a.948.948,0,0,0-.25-.5A.564.564,0,0,0,16.6,10.35Zm-7.25.125Z"
            transform="translate(-0.35 0.025)"
          />
        </g>
        <g transform="translate(12.625 8.5)">
          <path
            d="M12.75,15.575a2.241,2.241,0,0,1-2.25-2.25V9.45a2.25,2.25,0,0,1,4.5,0v4A2.138,2.138,0,0,1,12.75,15.575Zm0-6.875a.72.72,0,0,0-.75.75v4a.75.75,0,1,0,1.5,0v-4A.807.807,0,0,0,12.75,8.7Z"
            transform="translate(-10.5 -7.2)"
          />
        </g>
      </g>
    </SvgIcon>
  );
};

export const OppositeArrowsIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 16.123 17" style={{ fill: 'none', stroke: '#005699', fillRule: 'evenodd' }}>
      <path d="M15.623 11.025a.358.358 0 0 0-.358-.358h-8.1v-1.4a.358.358 0 0 0-.537-.31l-2.972 1.717-2.977 1.72a.358.358 0 0 0 0 .62l2.977 1.718 2.975 1.719a.358.358 0 0 0 .537-.31v-1.4h8.1a.358.358 0 0 0 .358-.358v-3.36ZM.5 2.615a.358.358 0 0 1 .358-.358h8.1v-1.4a.358.358 0 0 1 .537-.31l2.976 1.718 2.977 1.72a.358.358 0 0 1 0 .62l-2.977 1.718-2.978 1.719a.358.358 0 0 1-.537-.31v-1.4h-8.1a.358.358 0 0 1-.358-.358v-3.36Z" />
    </SvgIcon>
  );
};

export const PaperClipIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 12.208 25.75">
      <path
        style={{ fill: '#7e7e7e', stroke: '#7e7e7e', strokeMiterlimit: 10, strokeWidth: '.75px' }}
        d="M5.729 25A5.736 5.736 0 0 1 0 19.271V4.167a4.167 4.167 0 0 1 8.333 0v13.541a2.6 2.6 0 0 1-5.208 0V5.7a.521.521 0 1 1 1.042 0v12.008a1.563 1.563 0 0 0 3.125 0V4.167a3.125 3.125 0 0 0-6.25 0v15.1a4.687 4.687 0 0 0 9.375 0V5.053a.521.521 0 0 1 1.042 0v14.218A5.736 5.736 0 0 1 5.729 25Z"
      />
    </SvgIcon>
  );
};

export const PenIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 14.863 14.863">
      <path d="m0 14.863.025-5.4L9.49 0l5.373 5.388-3.941 3.941-.711-.715.918-.913-3.967-3.966-6.123 6.129v3.966H5l2.959-2.958.71.715L5.4 14.838ZM9.49 1.426l-1.6 1.6 3.946 3.946 1.6-1.6L9.49 1.427Z" />
    </SvgIcon>
  );
};

export const PeopleWithPlusSignIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="2 2 20 20">
      <path d="M16.1 11.3c1.1-.7 1.8-2 1.8-3.3 0-2.2-1.8-4-4-4s-4 1.8-4 4c0 1.3.7 2.6 1.8 3.3-.6.3-1.2.6-1.8 1.1-.3-.3-.6-.5-1-.7.6-.6 1-1.4 1-2.3 0-1.8-1.4-3.2-3.2-3.2-1.8 0-3.2 1.4-3.2 3.2 0 .9.4 1.7 1 2.3C3 12.5 2 14.1 2 15.9c0 .6.5 1.1 1.1 1.1h4.7c0 .6.5 1.1 1.1 1.1h6.5l-.3-.2c-.3-.2-.5-.6-.7-1v-.1H9.1c0-.3.1-.7.1-1 .1-.6.4-1.1.7-1.6.2-.3.4-.6.7-.8.9-.8 2.1-1.3 3.3-1.3 1.1 0 2.1.4 3 1l.1.1.1-.1c.1-.2.2-.4.4-.6l.2-.2.1-.1-.1-.1c-.5-.3-1.1-.6-1.6-.8zm.5-3.4c0 1.5-1.2 2.7-2.7 2.7-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7 1.5 0 2.7 1.2 2.7 2.7zm-10 3.4c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2.4 2c-.5.7-.9 1.5-1.1 2.4H3.2c.1-1.8 1.6-3.3 3.4-3.3.9 0 1.8.3 2.4.9z" />
      <path d="M21.2 15.6h-1.7v-1.7c0-.4-.3-.7-.7-.7-.2 0-.4.1-.5.2-.1.1-.2.3-.2.5v1.7h-1.7c-.2 0-.4.1-.5.2-.1.1-.2.3-.2.5 0 .4.3.7.7.7h1.7v1.7c0 .4.3.7.7.7.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5V17h1.7c.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5 0-.3-.3-.6-.7-.7z" />
    </SvgIcon>
  );
};

export const PersonIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <g stroke="#03B9E9" strokeWidth="1.75" fill="none" fillRule="evenodd" strokeLinejoin="round">
        <path d="M17 6.5c0 2.48522308-2.0147769 4.5-4.5 4.5C10.01477692 11 8 8.98522308 8 6.5 8 4.0147769 10.01477692 2 12.5 2 14.9852231 2 17 4.0147769 17 6.5ZM3 22c0-5.5228267 4.02947764-10 9.00005436-10C16.9705224 12 21 16.4771733 21 22" />
      </g>
    </SvgIcon>
  );
};

export const RecordingIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <path
        d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20.3c-4.6,0-8.3-3.7-8.3-8.3S7.4,3.7,12,3.7
	s8.3,3.7,8.3,8.3S16.6,20.3,12,20.3z"
      />
    </SvgIcon>
  );
};

export const RemoveContactIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 16 16">
      {/* <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 16 16"
      >
        <defs>
          <style>.a{"fill:#005699;"}</style>
        </defs> */}
      <g transform="translate(-2 -2)">
        <g transform="translate(2 2)">
          <path
            className="a"
            d="M8,0a8,8,0,1,0,8,8A8.024,8.024,0,0,0,8,0ZM8,1.04a6.5,6.5,0,0,1,4.48,1.68L2.72,12.48A6.9,6.9,0,0,1,1.68,5.12,7.081,7.081,0,0,1,8,1.04ZM8,14.96a7.274,7.274,0,0,1-4.56-1.68l9.84-9.76a6.9,6.9,0,0,1,1.04,7.36A7.032,7.032,0,0,1,8,14.96Z"
          />
        </g>
      </g>
      {/* </svg> */}
    </SvgIcon>
  );
};

export const RoundCrossIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 16 16">
      <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z" />
      <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z" />
    </SvgIcon>
  );
};

export const RoundSaltireIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 16 16">
      <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z" />
      <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z" />
    </SvgIcon>
  );
};

export const SaltireIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="5 5 14 14">
      <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
    </SvgIcon>
  );
};

export const ScreenShareArrowIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <path id="Path" d="M12.6,8.9V7.7l2.6,2.2l-2.6,2.2V11c-3.4,0.1-4.3,2.6-4.3,2.6C8.5,9.6,11.7,9,12.6,8.9z" />
      <g id="Icons_Outline">
        <g id="Laptop_Black_24dp">
          <g transform="translate(2.000000, 5.000000)">
            <g id="Shape">
              <path
                d="M17.1,12.1H2.7c-0.5,0-0.9-0.2-1.2-0.5c-0.4-0.4-0.6-0.8-0.6-1.3v-9c0-0.5,0.2-0.9,0.5-1.2s0.8-0.5,1.2-0.5h14.5
                c0.5,0,0.9,0.2,1.2,0.5c0.3,0.3,0.5,0.8,0.5,1.2v9c0,0.5-0.2,0.9-0.5,1.2C18,11.8,17.6,12.1,17.1,12.1z M2.7,0.8
                c-0.1,0-0.2,0.1-0.3,0.1c0,0.1-0.1,0.2-0.1,0.3v9c0,0.1,0,0.2,0.1,0.3c0,0,0.1,0.1,0.3,0.1h14.4c0.1,0,0.2-0.1,0.3-0.1
                c0.1-0.1,0.1-0.2,0.1-0.3v-9c0-0.1,0-0.2-0.1-0.3c0,0-0.1-0.1-0.3-0.1C17.1,0.8,2.7,0.8,2.7,0.8z"
              />
            </g>
            <g id="Line-2">
              <path d="M19.6,14.5H0.4c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h19.3c0.4,0,0.7,0.3,0.7,0.7S20,14.5,19.6,14.5z" />
            </g>
          </g>
        </g>
      </g>
    </SvgIcon>
  );
};

export const ScreenShareRegularIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <g id="Icons_Outline">
        <g id="Laptop_Black_24dp">
          <g transform="translate(2.000000, 5.000000)">
            <g id="Shape">
              <path
                d="M17.1,12.1H2.7c-0.5,0-0.9-0.2-1.2-0.5c-0.4-0.4-0.6-0.8-0.6-1.3v-9c0-0.5,0.2-0.9,0.5-1.2s0.8-0.5,1.2-0.5h14.5
                c0.5,0,0.9,0.2,1.2,0.5c0.3,0.3,0.5,0.8,0.5,1.2v9c0,0.5-0.2,0.9-0.5,1.2C18,11.8,17.6,12.1,17.1,12.1z M2.7,0.8
                c-0.1,0-0.2,0.1-0.3,0.1c0,0.1-0.1,0.2-0.1,0.3v9c0,0.1,0,0.2,0.1,0.3c0,0,0.1,0.1,0.3,0.1h14.4c0.1,0,0.2-0.1,0.3-0.1
                c0.1-0.1,0.1-0.2,0.1-0.3v-9c0-0.1,0-0.2-0.1-0.3c0,0-0.1-0.1-0.3-0.1C17.1,0.8,2.7,0.8,2.7,0.8z"
              />
            </g>
            <g id="Line-2">
              <path d="M19.6,14.5H0.4c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h19.3c0.4,0,0.7,0.3,0.7,0.7S20,14.5,19.6,14.5z" />
            </g>
          </g>
        </g>
      </g>
    </SvgIcon>
  );
};

export const ScreenShareScreenAreaIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <path
        d="M19.7,16.4V7.6C21,7.4,22,6.2,22,4.9C22,3.3,20.7,2,19.1,2c-1.4,0-2.5,1-2.8,2.3H7.6C7.4,3,6.2,2,4.9,2C3.3,2,2,3.3,2,4.9
      c0,1.4,1,2.5,2.3,2.8v8.7C3,16.6,2,17.8,2,19.1C2,20.7,3.3,22,4.9,22c1.4,0,2.5-1,2.8-2.2h8.7c0.3,1.3,1.4,2.2,2.8,2.2
      c1.6,0,2.9-1.3,2.9-2.9C22,17.8,21,16.6,19.7,16.4z M18.5,11v2.9l-4.7,4.7H11L18.5,11z M5.5,13v-2.9l4.7-4.7H13L5.5,13z M19.1,17.5
      c0.9,0,1.6,0.7,1.6,1.6c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C17.5,18.2,18.2,17.5,19.1,17.5z M4.9,17.5
      c0.9,0,1.6,0.7,1.6,1.6c0,0.9-0.7,1.6-1.6,1.6s-1.6-0.7-1.6-1.6C3.2,18.2,3.9,17.5,4.9,17.5z M5.8,16.8C5.8,16.8,5.8,16.8,5.8,16.8
      L5.8,16.8L5.8,16.8z M6.3,17C6.3,17,6.3,17,6.3,17L6.3,17L6.3,17z M16.8,5.9L16.8,5.9L16.8,5.9L16.8,5.9z M16.7,6.4L6.4,16.7
      c0,0-0.1-0.1-0.1-0.1l-0.1,0c0,0-0.1,0-0.2-0.1l-0.3-0.1c-0.1,0-0.1,0-0.2-0.1v-1.6l9.3-9.3h1.6c0,0.1,0,0.2,0.1,0.2
      c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1l0,0.1c0,0.1,0,0.1,0.1,0.2l0,0.1C16.7,6.3,16.7,6.3,16.7,6.4L16.7,6.4z M18.2,7.2L18.2,7.2
      L18.2,7.2L18.2,7.2z M7.1,17.9L7.1,17.9L7.1,17.9C7.1,17.9,7.1,17.9,7.1,17.9z M7.2,17.6L17.6,7.3c0,0,0.1,0.1,0.1,0.1l0.1,0
      c0,0,0.1,0,0.2,0.1l0.3,0.1c0.1,0,0.1,0,0.2,0.1v1.6c0,0,0,0,0,0l-9.3,9.3H7.6c0-0.1,0-0.2-0.1-0.2l0-0.1c0,0,0-0.1,0-0.1l0-0.1
      c0-0.1,0-0.1-0.1-0.1l0-0.1C7.3,17.7,7.3,17.7,7.2,17.6L7.2,17.6z M19.1,6.5c-0.4,0-0.8-0.2-1.1-0.4L18,6c0,0-0.1-0.1-0.1-0.1
      c-0.3-0.3-0.4-0.7-0.4-1.1c0-0.9,0.7-1.6,1.6-1.6c0.9,0,1.6,0.7,1.6,1.6C20.8,5.8,20,6.5,19.1,6.5z M16.7,5.7L16.7,5.7
      C16.7,5.7,16.7,5.7,16.7,5.7L16.7,5.7z M4.9,6.5c-0.9,0-1.6-0.7-1.6-1.6c0-0.9,0.7-1.6,1.6-1.6S6.5,4,6.5,4.9
      C6.5,5.8,5.8,6.5,4.9,6.5z M6.3,7L6.3,7L6.3,7L6.3,7z M6.1,7.1L6.1,7.1L6.1,7.1L6.1,7.1z M5.9,7.2L5.9,7.2L5.9,7.2L5.9,7.2z
      M5.7,7.3L5.7,7.3L5.7,7.3C5.7,7.3,5.7,7.3,5.7,7.3z M5.3,7.4L5.3,7.4L5.3,7.4L5.3,7.4z M5.5,8.4V7.6c0.1,0,0.2,0,0.2-0.1l0.1,0
      c0,0,0.1,0,0.1,0l0.1,0c0.1,0,0.1,0,0.1-0.1l0.1,0c0,0,0.1,0,0.1-0.1l0.1-0.1c0,0,0.1-0.1,0.1-0.1l0.1,0C6.7,7,6.8,6.9,6.9,6.9
      C6.9,6.8,7,6.7,7,6.7l0.2-0.3c0,0,0.1-0.1,0.1-0.1l0-0.1c0,0,0-0.1,0.1-0.2c0,0,0-0.1,0-0.1l0.1-0.2c0-0.1,0-0.1,0.1-0.2h0.8
      L5.5,8.4z M6.9,6.4L6.9,6.4L6.9,6.4C6.9,6.4,6.9,6.4,6.9,6.4z M7.3,18.3L7.3,18.3C7.3,18.3,7.3,18.3,7.3,18.3L7.3,18.3z M17.7,17
      L17.7,17L17.7,17L17.7,17z M18.3,16.7L18.3,16.7L18.3,16.7C18.3,16.7,18.3,16.7,18.3,16.7z M18.5,15.6v0.8c-0.1,0-0.2,0-0.2,0.1
      c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0l-0.1,0c-0.1,0-0.1,0-0.1,0.1l-0.1,0c0,0-0.1,0.1-0.2,0.1l-0.1,0c0,0-0.1,0.1-0.1,0.1l-0.1,0
      c-0.1,0.1-0.1,0.1-0.2,0.2c-0.1,0.1-0.1,0.1-0.2,0.2l-0.2,0.2l0.2,0.2l-0.3-0.1c0,0-0.1,0.1-0.1,0.1l0,0.1c0,0-0.1,0.1-0.1,0.2
      l-0.1,0.3c0,0.1,0,0.1-0.1,0.2h-0.8L18.5,15.6z M17.1,17.6L17.1,17.6L17.1,17.6L17.1,17.6z M16.8,18.2L16.8,18.2
      C16.8,18.2,16.8,18.2,16.8,18.2L16.8,18.2z"
      />
    </SvgIcon>
  );
};

export const TrashBinIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 15.44 16">
      <path
        d="M17.2 4.08h-4.72v-.32A1.776 1.776 0 0 0 10.72 2H9.44a1.776 1.776 0 0 0-1.76 1.76V4H2.96a.56.56 0 1 0 0 1.12h1.12l.56 11.04A1.879 1.879 0 0 0 6.56 18h7.12a1.879 1.879 0 0 0 1.92-1.84l.56-11.04h1.12a.547.547 0 0 0 .56-.56c0-.32-.32-.48-.64-.48Zm-8.48 0v-.32a.631.631 0 0 1 .64-.64h1.28a.631.631 0 0 1 .64.64V4H8.72Zm6.24 1.04-.56 10.96a.8.8 0 0 1-.8.8H6.56a.756.756 0 0 1-.8-.8L5.12 5.12Z"
        transform="translate(-2.4 -2)"
      />
    </SvgIcon>
  );
};

export const TwoSheetsIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 16 15.68">
      <path
        d="M16.72 2.2H7.2a1.264 1.264 0 0 0-1.28 1.28V5.8H3.28A1.264 1.264 0 0 0 2 7.08v9.52a1.264 1.264 0 0 0 1.28 1.28h9.52a1.264 1.264 0 0 0 1.28-1.28v-2.32h2.64A1.264 1.264 0 0 0 18 13V3.48a1.264 1.264 0 0 0-1.28-1.28Zm-3.68 14.4a.212.212 0 0 1-.24.24H3.28a.212.212 0 0 1-.24-.24V7.08a.255.255 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24Zm3.92-3.6a.212.212 0 0 1-.24.24h-2.64V7.08A1.264 1.264 0 0 0 12.8 5.8H6.96V3.48a.212.212 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24V13Z"
        transform="translate(-2 -2.2)"
      />
    </SvgIcon>
  );
};

export const VideoCallIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 16 12">
      {/* <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="12"
        viewBox="0 0 16 12"
      >
        <defs>
          <style>.a{"fill:#005699;"}</style>
        </defs> */}
      <g transform="translate(-4.4 -6)">
        <g transform="translate(4.4 6)">
          <path
            className="a"
            d="M12.485,13H2.759C1.923,13,1.4,12.5,1.4,11.9V2.1A1.166,1.166,0,0,1,2.655,1H12.38a1.073,1.073,0,0,1,1.15,1.1V3.6l2.2-1.3a1.173,1.173,0,0,1,1.15,0,.993.993,0,0,1,.523.9v7.7a.842.842,0,0,1-.523.9.832.832,0,0,1-1.046-.1l-2.2-1.3v1.5A1.073,1.073,0,0,1,12.485,13ZM2.55,11.9Zm0,0H12.59V9.4c-.1-.2-.1-.3.209-.4a.485.485,0,0,1,.523,0l2.824,1.7V3.4L13.322,5A.485.485,0,0,1,12.8,5a.537.537,0,0,1-.314-.4V2.1H2.759c-.209,0-.209.1-.209.1Z"
            transform="translate(-1.4 -1)"
          />
        </g>
      </g>
      {/* </svg> */}
    </SvgIcon>
  );
};

export const VideoCameraIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <g id="Icons_Outline" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinejoin="round">
        <g id="Camera" fillRule="nonzero" stroke="#ffffff" strokeWidth="1.5">
          <g id="Ico_Camera" transform="translate(3.000000, 5.000000)">
            <path
              d="M17.739656,2.05124654 C17.62808,1.97368421 17.4421199,1.93490305 17.1817759,2.0900277 L13.4997675,4.41689751 L13.4997675,1.15927978 C13.4997675,0.849030471 13.3138075,0.5 12.7187355,0.5 L0.929800093,0.5 C0.371920037,0.538781163 0,0.810249307 0,1.19806094 L0,13.8407202 C0,14.2285319 0.371920037,14.5 0.929800093,14.5 L12.7559275,14.5 C13.3138075,14.5 13.5369596,14.1509695 13.5369596,13.8407202 L13.5369596,10.5831025 L17.2189679,12.9487535 C17.4421199,13.1038781 17.62808,13.065097 17.739656,12.9875346 C18,12.83241 18,12.5221607 18,12.4058172 L18,2.63296399 C18,2.5166205 18,2.20637119 17.739656,2.05124654 Z"
              id="Path"
            ></path>
          </g>
        </g>
      </g>
    </SvgIcon>
  );
};

export const VideoCameraOffIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <g id="Icones_Outline" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
        <g id="Camera-Off" stroke="#ffffff" strokeWidth="1.5">
          <line x1="4.5" y1="18.5" x2="15.5" y2="6.5" id="Line" strokeLinecap="round"></line>
          <g id="Ico_Camera" transform="translate(3.000000, 5.000000)" fillRule="nonzero" strokeLinejoin="round">
            <path
              d="M17.739656,2.05124654 C17.62808,1.97368421 17.4421199,1.93490305 17.1817759,2.0900277 L13.4997675,4.41689751 L13.4997675,1.15927978 C13.4997675,0.849030471 13.3138075,0.5 12.7187355,0.5 L0.929800093,0.5 C0.371920037,0.538781163 0,0.810249307 0,1.19806094 L0,13.8407202 C0,14.2285319 0.371920037,14.5 0.929800093,14.5 L12.7559275,14.5 C13.3138075,14.5 13.5369596,14.1509695 13.5369596,13.8407202 L13.5369596,10.5831025 L17.2189679,12.9487535 C17.4421199,13.1038781 17.62808,13.065097 17.739656,12.9875346 C18,12.83241 18,12.5221607 18,12.4058172 L18,2.63296399 C18,2.5166205 18,2.20637119 17.739656,2.05124654 Z"
              id="Path"
            ></path>
          </g>
        </g>
      </g>
    </SvgIcon>
  );
};

export const VolumeIcon = (props: SvgIconProps) => {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <g>
        <path
          d="M14.6,4c-0.4-0.7-1.3-0.8-2-0.4L6.8,7.7H4.1C3,7.7,2,8.7,2,9.9v4.3c0,1.2,1,2.1,2.1,2.1h2.6l5.8,4.1
		c0.2,0.2,0.5,0.2,0.8,0.2c0.8,0,1.4-0.6,1.5-1.4V4.8C14.9,4.5,14.8,4.2,14.6,4z M13.4,19.2L13.4,19.2l-5.7-4l-0.4-0.3h-1H6.1h-2
		c-0.4,0-0.7-0.3-0.7-0.7V9.9c0-0.4,0.3-0.7,0.7-0.7H6h0.2h1l0.4-0.3l5.7-4L13.4,19.2L13.4,19.2z"
        />
        <path
          d="M19.1,12c0,1.5-0.6,2.9-1.6,4c-0.3,0.3-0.7,0.3-1,0c-0.3-0.3-0.3-0.7,0-1c1.6-1.7,1.6-4.3,0-6c-0.3-0.3-0.3-0.7,0-1
		c0.3-0.3,0.7-0.3,1,0C18.6,9.1,19.1,10.5,19.1,12z"
        />
        <path
          d="M18.9,5.1c-0.3-0.3-0.7-0.2-1,0c-0.3,0.3-0.2,0.7,0,1c3.3,2.9,3.5,8,0.6,11.2c-0.2,0.2-0.4,0.4-0.6,0.6
		c-0.3,0.3-0.3,0.7,0,1c0.3,0.3,0.7,0.3,1,0c3.8-3.5,4.1-9.4,0.7-13.2C19.4,5.5,19.1,5.3,18.9,5.1L18.9,5.1z"
        />
      </g>
    </SvgIcon>
  );
};