[에러 핸들링] Warning: Invalid DOM property `clip-path`. Did you mean `clipPath`?

Warning: Invalid DOM property clip-path. Did you mean clipPath?

사이드 프로젝트중에 이런 에러를 만나게 되었는데 의외로 간단하게 해결 할 수 있었다.
React.Js는 - 문자가 있을때 읽을 수 없다는 에러이다.

이미지파일을 받아오려고 프로젝트 폴더내부에 assets/icon.svg 들을 다수 넣어뒀는데,
거기서 에러가 나온것이다.

import React from 'react';

export const MypageSvg = () => {
  return (
    <svg
      width="24"
      height="25"
      viewBox="0 0 24 25"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clip-path="url(#clip0_705_7800)"> // 에러 난 부분 clip-path 를 -> clipPath로 바꿔주면 된다.
        <path
          d="M7.38999 17.0388C6.00145 16.0596 4.96074 14.6638 4.41862 13.0535C3.87651 11.4432 3.86115 9.70216 4.37479 8.08258C4.88842 6.46299 5.90435 5.049 7.27541 4.04547C8.64646 3.04193 10.3014 2.50098 12.0005 2.50098C13.6996 2.50098 15.3545 3.04193 16.7256 4.04547C18.0966 5.049 19.1126 6.46299 19.6262 8.08258C20.1398 9.70216 20.1245 11.4432 19.5824 13.0535C19.0402 14.6638 17.9995 16.0596 16.611 17.0388L18.694 21.7988C18.7274 21.875 18.7413 21.9583 18.7344 22.0413C18.7275 22.1242 18.7001 22.2041 18.6545 22.2737C18.6089 22.3433 18.5467 22.4005 18.4734 22.44C18.4001 22.4794 18.3182 22.5 18.235 22.4998H5.76499C5.6819 22.4999 5.6001 22.4794 5.52697 22.4399C5.45383 22.4005 5.39168 22.3435 5.34612 22.274C5.30056 22.2045 5.27303 22.1248 5.26603 22.042C5.25902 21.9592 5.27275 21.876 5.30599 21.7998L7.38899 17.0388H7.38999ZM8.11899 11.4698C8.33654 12.3343 8.83649 13.1014 9.53956 13.6495C10.2426 14.1975 11.1085 14.4952 12 14.4952C12.8914 14.4952 13.7574 14.1975 14.4604 13.6495C15.1635 13.1014 15.6634 12.3343 15.881 11.4698L13.941 10.9848C13.8333 11.4182 13.5837 11.803 13.232 12.0781C12.8802 12.3532 12.4465 12.5026 12 12.5026C11.5535 12.5026 11.1198 12.3532 10.768 12.0781C10.4162 11.803 10.1666 11.4182 10.059 10.9848L8.11899 11.4698Z"
          fill="#A2ADC5"
        />
      </g>
      <defs>
        <clipPath id="clip0_705_7800">
          <rect
            width="24"
            height="24"
            fill="white"
            transform="translate(0 0.5)"
          />
        </clipPath>
      </defs>
    </svg>
  );
};

다른 - 문자가 들어간 파일들도 다 수정해 주었더니 에러가 다 사라졌다.

예시

stroke-width="2"        ->   strokeWidth="2"
stroke-linecap="round"  ->   strokeLinecap="round"
stroke-linejoin="round" ->   strokeLinejoin="round"