Project 23: Weather Widget

React Engineer

Builds on these lessons

Vite Asset Management Vite Production Build Vite Build Optimization

Step 1 of 3

Project

Importing a Static Asset

Import an icon with import sunIcon from "./icons/sun.svg" and use it as an <img src={sunIcon}>. Vite treats this import as a real module — it resolves the file, gives you back a URL you can use directly, and includes it in the production build's asset pipeline automatically.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

import sunIcon from "./icons/sun.svg";

export default function WeatherWidget() {
  return (
    <div>
      <img src={sunIcon} alt="Sunny" />
      <p>72°F</p>
    </div>
  );
}

← Previous Next →