import React from "react";

export default () => {
  return (
    <div className="m-5">
      <div className="container">
        <div className="row my-5">
          <div className="col h3 text-danger">
            Fontawesome icons have been deprecated in favour of material-ui icons and these icons
            will be removed in a future version!
          </div>
        </div>
        <div className="row my-5">
          <div className="col">
            A list of all available icons are listed here:
            <br />
            <a href="https://fontawesome.com/icons?d=gallery&m=free">
              https://fontawesome.com/icons?d=gallery&m=free
            </a>
          </div>
        </div>
        <div className="row my-5">
          <div className="col">
            There are 3 types of icons: regular, solid and brands:
            <br />
            <code>{"import calendarIcon from \"@cloudbees/honeyui-icons/regular/calendar.svg\";"}</code>
            <br />
            <code>{"import archiveIcon from \"@cloudbees/honeyui-icons/solid/archive.svg\";"}</code>
            <br />
            <code>{"import appleIcon from \"@cloudbees/honeyui-icons/brands/apple.svg\";"}</code>
          </div>
        </div>
        <div className="row my-5">
          <div className="col">
            Example how to use Icons with Webpack can be found here:
            <br />
            <a href="https://github.com/cloudbees/honeyui/tree/master/examples/svg-icons-react-webpack">
              https://github.com/cloudbees/honeyui/tree/master/examples/svg-icons-react-webpack
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};
