Closed wilsonreyhan closed 3 months ago
can you share your CalendarDaysIcon
as well
@hectarescraps on the heroicons website I tried with both jsx and svg I used this code and it works completely fine
<DatePicker selectorIcon={<Image src="/calendar.svg" alt="calendar" width={20} height={20} />} />
<DatePicker selectorIcon={<CalendarIcon />} />
function CalendarIcon() {
return (
<svg
className="size-6"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M12.75 12.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM7.5 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM8.25 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM9.75 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM10.5 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM12.75 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM14.25 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM15 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM16.5 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM15 12.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM16.5 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" />
<path
clipRule="evenodd"
d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z"
fillRule="evenodd"
/>
</svg>
);
}
Thank you so much @abhinandan-verma - got it working on my end as well now. Closing.
NextUI Version
@nextui-org/date-picker@2.1.2
Describe the bug
I've designated Heroicons' Calendar Days icon as my Date Picker Selector Icon, but when loading the component, no icon appears. See code below.
<DatePicker className="text-orange-500 font-light text-sm " label="" defaultValue={now(getLocalTimeZone())} granularity="day" isRequired hideTimeZone selectorIcon={<CalendarDaysIcon />} popoverProps={{ placement: "bottom", shouldFlip: false, backdrop: "opaque", }} />
Your Example Website or App
No response
Steps to Reproduce the Bug or Issue
Implement component with custom selectorIcon prop.
Expected behavior
Expected to see Heroicons CalendarDays icon as my custom selectorIcon. Instead, saw no icon at all.
Screenshots or Videos
Operating System Version
macOS
Browser
Chrome