Icons

By default, the timeline track shows a simple circle made with CSS for each time point. This can be changed so that each item on the timeline track shows a different icon.

Wrap all the icons in a wrapper with a class name chrono-icons and the component will make sure the icons are embedded on each timeline point in the same order as they appear in the code.

jsx

  <Chrono items={data} mode="VERTICAL_ALTERNATING">
    <div className="chrono-icons">
      <img
        src="https://img.icons8.com/ios-filled/100/000000/twitter.png"
        alt="twitter"
      />
      <img
        src="https://img.icons8.com/ios-filled/100/000000/about.png"
        alt="twitter"
      />
      <img
        src="https://img.icons8.com/ios-filled/100/000000/contacts.png"
        alt="twitter"
      />
      <img
        src="https://img.icons8.com/ios-filled/100/000000/briefcase.png"
        alt="twitter"
      />
      <img
        src="https://img.icons8.com/ios-filled/100/000000/idea.png"
        alt="twitter"
      />
      <img
        src="https://img.icons8.com/ios-filled/100/000000/sun.png"
        alt="twitter"
      />
      <img
        src="https://img.icons8.com/ios-filled/100/000000/info.png"
        alt="twitter"
      />
    </div>
  </Chrono>

icons

Icons #

Icons