Improving React UI Components: Replacing Icons, Fixing Errors, and Handling Images Efficiently

Introduction

In modern React development, handling UI components effectively is crucial for delivering a seamless user experience. This article covers my
day 2 in the #60daysofcode journey, including replacing icons with logos, fixing import errors, ensuring full image visibility, and switching from remote URLs to local images.

The Work: Enhancing a Navigation and Footer Component

Our first task was replacing an existing BookOpen icon with a logo image in the navigation and footer components.

Replacing BookOpen with a Logo

We originally had this:

<Link to="/" className="flex items-center space-x-2">
  <BookOpen className="h-8 w-8 text-white" />
  <span className="text-white font-bold text-xl">Beamers International Schools</span>
</Link>

Updated Code with Logo:

<Link to="/" className="flex items-center space-x-2">
  <img src="/logo.png" alt="Logo" className="h-10 w-auto" />
</Link>

Ensuring Full Image Visibility

When replacing the logo in the About section, the issue was that the top of the image was getting cut off. Initially, it was implemented with object-cover, causing unwanted cropping:

<img
  src={logo}
  className="w-full h-full object-cover rounded-lg shadow-xl"
  alt="School building"
/>

Solution: Using object-contain ensures that the full image is visible without cropping:

<img
  src={logo}
  className="w-full h-full object-contain rounded-lg shadow-xl"
  alt="School building"
/>

The Process: Fixing Errors and Enhancing Navigation

Fixing the "Menu is Not Defined" Error

A common error encountered was:

Uncaught ReferenceError: Menu is not defined

This happened because the Menu and X icons were being used without importing them.

Fix: Ensure they are imported properly, depending on the library being used.

import { Menu, X } from "@heroicons/react/outline"; // For Heroicons

OR

import { Menu, X } from "lucide-react"; // For Lucide React

Handling Local Images Instead of URLs

To use a local image file instead of a remote URL, we explored two approaches:

1. Using images from the public/ folder:

const galleryImages = [
  {
    url: "/images/classroom.jpg", // Public folder reference
    caption: "Students engaged in interactive learning"
  }
];

1. Using images inside src/assets/ with imports:

import classroomImage from "../assets/classroom.jpg";

const galleryImages = [
  {
    url: classroomImage,
    caption: "Students engaged in interactive learning"
  }
];

The Results: Improved UI and Stability

After implementing these updates:

• The navigation and footer now display a logo instead of an icon.
• Images retain their full visibility without being cropped.
• Navigation errors (Menu is not defined) were resolved.
• Gallery images can now use local files instead of external URLs.

By carefully managing icons, images, and imports in a React project, I improved maintainability and user experience. These enhancements ensure that:
✅ UI elements are well-structured and visually appealing.

✅ Common errors (e.g., missing imports) are prevented.

✅ Images are loaded properly without cropping.

Day 2 of #60daysofcode