[React 경고 메세지] Assign arrow function to a variable before exporting as module default import/no-anonymous-default-export

React프로젝트 진행 중 svg를 jsx 파일로 만들어 사용했는데, 

svg 파일을 exprot 할 때 잘못내보내었다는 경고 메세지가 나왔다.

 

콘솔 창에 "모듈 기본 import/no-anonymous-default-export로 내보내기 전에 변수에 개체를 할당합니다" 라는 오류가 있다.

 

 

 

변경 전

export default () => (
  <svg
    viewBox="0 0 32 32"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    role="presentation"
    focusable="false"
  >
    <g fill="none">
      <path d="m13 24c6.0751322 0 11-4.9248678 11-11 0-6.07513225-4.9248678-11-11-11-6.07513225 0-11 4.92486775-11 11 0 6.0751322 4.92486775 11 11 11zm8-3 9 9"></path>
    </g>
  </svg>
);

 

 

변경 후

const SearchButtonSvg = () => (
  <svg
    viewBox="0 0 32 32"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    role="presentation"
    focusable="false"
    // style=" fill: none; height: 20px; width: 20px; stroke: white; stroke-width: 3; overflow: visible;"
  >
    <g fill="none">
      <path d="m13 24c6.0751322 0 11-4.9248678 11-11 0-6.07513225-4.9248678-11-11-11-6.07513225 0-11 4.92486775-11 11 0 6.0751322 4.92486775 11 11 11zm8-3 9 9"></path>
    </g>
  </svg>
);

export default SearchButtonSvg;

변수에 먼저 할당하고 export해준다.

 

참고링크

https://dev.to/tmenyhart/comment/195kp