svg아이콘을 포함한 리스트

기존에 이러한 Modal list가 존재했다.

처음에는 이런 식으로 svg파일을 따로 생성한 후
svg 파일을 Component로 불러와서

import React from 'react';
import { ReactComponent as ProfileModalIcon } from '../images/ProfileModalIcon.svg';
import { ReactComponent as PwdModalIcon } from '../images/PwdModalIcon.svg';

export const UPDATE_LIST_DATA = [
  {
    id: 1,
    name: 'profileModal',
    title: '프로필 수정',
    icon: <ProfileModalIcon />,
  },
  { id: 2, name: 'pwdModal', title: '비밀번호 수정', icon: <PwdModalIcon /> },
];

const Profile = () => {
--- 생략 ---
  return (
    <div className="profileMenuBox" data-testid="profileMenuBox">
      {UPDATE_LIST_DATA.map(({ id, name, title, icon }) => (
        <div
          key={id}
          className="profileMenuLists"
          onClick={() => openModal(name)}
        >
         {icon}
          <div>{title}</div>
        </div>
      ))}
   --- 생략 ---
    </div>
  );
};

테스트 코드에서 에러가 난다.

svg 코드에서는 class이고 React element에서는 className이므로 존재하면 JSX 호환이 어렵다.
사실 width와 height 처럼 svg 코드에 스타일을 직접 설정해주어도 되지만
svg를 호출하는 함수를 만들어 사용하는 방법을 이용했다.

export const UPDATE_LIST_DATA = [
  {
    id: 1,
    name: 'profileModal',
    title: '프로필 수정',
    icon: () => (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth="1.5"
        stroke="currentColor"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
        />
      </svg>
    ),
  },
  {
    id: 2,
    name: 'pwdModal',
    title: '비밀번호 수정',
    icon: () => (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth="1.5"
        stroke="currentColor"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
        />
      </svg>
    ),
  },
];

// profile.js
          <div className="profileIcon"> {icon()}</div>