picsum-photos VS react-icons

Lorem Picsum is a free picture placeholder service that can be used on websites, apps, or anywhere a placeholder image is needed. It provides a simple API that can obtain random images through HTTP requests, and can also specify specific image sizes and other parameters. Lorem Picsum also provides a website where pictures can be browsed and downloaded. These images are uploaded by photographers from the Unsplash community and are free for personal and commercial use. URL: https://picsum.photos/

export const loader = async () => { const response = await fetch('https://picsum.photos/200/300'); const blob = await response.blob(); return new Response(blob, { headers: { 'Content-Type': 'image/jpeg', }, }); };

Lorem Picsum provides a convenient source of high-quality placeholder images, ideal for design and development projects. It's super simple to use. Just add your desired image size (width & height) after the URL (https://picsum.photos/200/300), and you'll get a random image. It's perfect for when building and testing the interface of your project.

pull random images from picsum

Lorem Picsum provides random placeholder images, adding visual appeal to your designs.

Something I'm thinking is to put a webpage in the background url that gives a random image (like what picsum.photos does but with a collection of my choice).

this is what you are looking for --> https://picsum.photos/

react-icons: Quickly integrate a variety of icons into your React app. Learn more

3. React Icons

We make use of react-icons to display the play and pause indications.

If you're using React, I can recommend this: https://react-icons.github.io/react-icons/

Links to external resources like Tailwind CSS, Google Fonts, and React Icons are provided, offering additional references for users.

react-icons - lib de icones para react.

As you can observe, here we again make use of style-components to create a container for the underlying icon. Also, we make use of the react-icons that provide a react wrapper for icons from various providers. Here we make use of the icons from the HeroIcons2 provider hence we import it from hi2 from the react-icons

As you can observe, the homepage consists of a few text elements and a navigation bar adorned with icons. To achieve this, I employed Material-UI (MUI) and React Icons. However, there's a noticeable hiccup - the page, ideally, should load swiftly, but instead, it's a bit sluggish. Even more concerning, it's transferring more data than anticipated.

Similar concept to react-icons (https://react-icons.github.io/react-icons/)in that regard.