2

I have been unable to add a calendar icon into the DayPickerInput component.

I have tried 

import {FaCalendar} from "react-icons/fa";

<DayPickerInput
  component={props => <input icon={FaCalendar} {...props}/>}
/>

i get the following 

Warning: Invalid value for prop `icon` on <input> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details

I have tried adding these as well

import { Input } from 'semantic-ui-react'

 <DayPickerInput                    
   component={props => <Input icon='calendar' {...props} /> }
 />

Then this happens

this happens

thanks for the help

Diego
  • 594
  • 2
  • 10
  • 29
  • Have you been install 'semantic-ui-react' library ? and are you sure have been import daypicker css ? I try your code and the icon calendar shown perfectly – Eko Bayu Mar 04 '20 at 15:40
  • I have installed the semantic-ui-react to may project, and the react-day-picker css. without the icon, i am able to interact with the calendar without a problem. it's really just the icon that's throwing me off. @EkoBayu – Diego Mar 04 '20 at 15:42
  • hmm maybe error in the css, this is my inspect element html dom generate from your code. It's perfectly shown the icon. https://imgur.com/VyEa0Ht and try update your react daypicker library version, – Eko Bayu Mar 04 '20 at 15:50
  • I'm import react day picker like this one `import DayPickerInput from 'react-day-picker/DayPickerInput'` – Eko Bayu Mar 04 '20 at 15:54
  • @EkoBayu correct I am importing it that way also. When i tried to import the daypicker css it spit an error. looking into it, Ideally i would like to just pass an icon component to the component prop – Diego Mar 04 '20 at 16:02
  • @EkoBayu I dont have access to the webpack config to fix this – Diego Mar 04 '20 at 16:08
  • `Error in node_modules/semantic-ui-css/themes/default/assets/fonts/brand-icons.ttf 1:0 Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)` – Diego Mar 04 '20 at 16:08
  • Try this one https://github.com/Semantic-Org/Semantic-UI/issues/6771 – Eko Bayu Mar 06 '20 at 03:45

0 Answers0