Integración de íconos y conexión con React Router

Script para los iconos:

<script src="https://kit.fontawesome.com/473d269aa9.js" crossorigin="anonymous"></script>

Para mejorar la aplicación e, incluso, por buena práctica, creo que deberíamos agregar un title a nuestros elementos en el HTML. Esto puede ayudar a la accesibilidad de la aplicación. Quedaría de la siguiente manera:

<i className="fas fa-trash-alt" title="Eliminar" />
<i className="fas fa-shopping-basket" title="Checkout" />

.

Font Awesome te da la opción de manejar el tamaño del ícono, yo utilicé el fa-2x para el basket (canasta) y se ve genial!

<i className="fas fa-shopping-basket fa-2x" />

Para iconos en React me gusta usar React Icons

Recomiendo utilizar React-Icons en sus proyectos. Contiene Iconos gratuitos de diferentes proveedores.

npm install react-icons --save

Importación

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

Uso

<Link to="/checkout">
  <FaShoppingBasket />
</Link> 

Para todos los que les moleste importar directamente, con solo escribír el inicio de cualquier componente de librería o propio (siempre y cuando ya esté guardado al menos su estructura inicial) pueden auto-importarlo con la ayuda de visual studio o presionando (ctrl + espacio) para que les aparezca el mensaje para importar.

	<Link 'con el indicador de tipeo justo al final de link presionar ctrl + espacio'

Yo utilice
React | Font Awesome

Funciona excelente para importarlo directamente como libreria.

Hola, les dejo el avance de mi proyecto, hecho en Nextjs con Styled Components:

https://github.com/danyel117/platzi-conf-store

Commit clase 27.

27.-Integración de íconos y conexión con React Router

Para conectar la app podemos usar el href de toda la vida pero es mejor usar las herramientas que nos proporciona react ya que con esta herramienta mantiene la historia de donde nos estamos moviendo así como otros tools para movernos de manera correcta en nuestra app.

En este caso usaremos

import {Link} from 'react-router-dom'; //El cual usaremos para conectar la App

Para los icons use React-icons:

Instalación:
npm install react-icons

Uso: 
import { FaShoppingBasket } from "react-icons/fa";
<Link to="/checkout">
  <FaShoppingBasket title="checkout" size="2rem" />
</Link>

Solo traemos los iconos que necesitamos.
Aquí los pueden ver 
https://react-icons.github.io/react-icons

React icons, me preguntaba por que la importación aumentamos /fa, pero este depende del icono que usas, ejemplo:

FontAsome

import { FaShoppingBasket } from "react-icons/fa"
...
<FaShoppingBasket title="checkout" size="2rem" />
...

Bootstrap

import { BsFillTrashFill } from "react-icons/bs"
...
<BsFillTrashFill title="Delete" size="16px" />
...

En mi caso mis rutas personalizadas no envuelven al componente Header, no funciona, no me quedó de otra mas que usar href

App.jsx

export const App = () => {
    return (
        <>
            <Layout>
                <Router />
            </Layout>

        </>
    )
}

src/components/Layout.jsx

const Layaout = ({ children }) => {
    return (
        <div className="Main">
            <Header />
            {children}
            <Footer />
        </div>
    )
}

export default Layaout

src/components/header.jsx

const Header = () => {
    return (
        <div className="Header">
            <h1 className="Header-title">PlatziConf Merch</h1>
            <a href="/checkout">
                Checkout
            </a>
        </div>
    )
}

export default Header

También pueden usar React Icons: https://react-icons.github.io/react-icons

¡Hola! Estoy siguiendo este curso, pero usando NextJS + TypeScript + Tailwind. Aún no lo termino, pero voy agregando poco a poco las cosas que vamos viendo.
 
Si les interesa ver el proyecto hasta esta clase, les dejo el link del proyecto: https://github.com/d4vsanchez/platzi-conf-merch/tree/checkout-markup
 
He hecho varios cambios hasta el momento, fuera de que ya uso Tailwind como librería de utilidades, también he ido removiendo la cantidad de divs no utiles, usando tags con mejor contenido semántico y tratando de respetar al máximo las best practices de accesibilidad.
 
Así se ve mi proyecto hasta el momento:

Creo que esto podría funcionar también, react-icons: https://react-icons.github.io/react-icons

Alternativa a fontawesome:

La verdad es que lo iconos no me funcionaron, hice todo de la misma forma y no pasa nada.

El snippet para importar Link de React Router es imbrl

import { Link } from 'react-router-dom

Acá una mejor forma de usar los iconos de font awesome en react
https://fontawesome.com/how-to-use/on-the-web/using-with/react

Acá les comparto una librería que nos ayudan a tener varios iconos en React.
React Icons

Me gusta la forma de explicar de Óscar. Exceletne!

a