جاوا اسکریپت - چگونه می توانید از Select components در Chakra UI برای رندر SVG استفاده کنید؟


من سعی می کنم SVG های مختلف را در هر جزء گزینه مولفه Select Chakra UI ارائه کنم، اما به نظر نمی رسد هیچ تصویری را در داخل مؤلفه گزینه نمایش دهم.

هر دوی پیادهسازیهای زیر [object Object] را در گزینه نمایش میدهند.

import SVG from './file.svg'

// Also tried both of the following:
// import SVG from './file.tsx'
// import {ReactComponent as SVG} from './file.svg';

return (
    <Select>
      <option>
        <SVG />
      </option>
    </Select>
);
import SVG from './file.svg'

return (
    <Select>
      <option>
        <img src={SVG} alt=''/>
      </option>
    </Select>
);

تنها راهی که توانستم SVG را در کامپوننت Select چاکرا نمایش دهم، از طریق prop آیکون بود، اما این کار آیکون کشویی را جایگزین میکند که من نمیخواهم این کار را انجام دهم.

به من اطلاع دهید اگر راهی هست که بتوانم مشکل را بیشتر تجزیه کنم یا کاهش دهم.

آیا راهی برای سفارشی کردن مؤلفه Select من برای رندر SVG با Chakra UI وجود دارد؟