Create SVG Icons

Your weather app now shows real data, but it's using generic Lucide icons for weather conditions. They work, but they don't adapt to the time of day — a sunny icon looks the same whether it's noon or midnight. In this exercise, you'll build custom SVG weather icons that switch between sun and moon based on actual sunrise and sunset times.

What is SVG?

SVG — Scalable Vector Graphics — is a format for describing shapes, lines, and images using code rather than pixels. Unlike a JPEG or PNG, an SVG is a text file that contains instructions: "draw a circle here, draw a path there, fill this shape with this color." Because it's code, you can manipulate it with CSS and JavaScript — change colors, add animations, even make shapes appear or disappear based on data.

SVG in React

In React, SVG elements work just like HTML elements. You can write <circle>, <rect>, and <path> directly in your JSX, apply Tailwind classes for styling (using fill-* classes instead of bg-*), and pass props for customization. React treats SVG as first-class citizens.

The approach in this exercise is to build icons from primitive components — small, reusable building blocks like a Sun, a Moon, and a Cloud. Each primitive is its own React component with position props (x, y) so you can place it within the icon's coordinate space. Then you compose them together: a PartlyCloudy icon contains a Sun (or Moon) in the back and a Cloud in the front.

Coordinate system and paths

The viewBox attribute is what defines the coordinate system inside an SVG. Our icons use viewBox="0 0 384 384", meaning the internal space is 384 by 384 units. Shapes are positioned within this coordinate space, and the SVG scales to whatever size you set on the outer element. This is what makes SVGs scalable — the coordinates are relative, not absolute.

For complex shapes (like a cloud outline), the d attribute on a <path> element contains the actual drawing instructions — a long string of commands and coordinates. You don't write these by hand. You design the shape in Figma, export it as SVG, and copy the d value. The key skill is knowing how to extract what you need from the exported SVG and clean it up: remove unnecessary attributes, add className for Tailwind styling, and convert inline fill attributes to Tailwind fill-* classes.

Conditional rendering

Conditional rendering is what makes these icons adapt to the time of day. Each weather icon accepts an isNight prop (a boolean). Using a ternary operator — {isNight ? <Moon /> : <Sun />} — the icon shows the right celestial body based on whether it's currently nighttime at that location. The isNight value is calculated by comparing the current time to the API's sunrise and sunset data.

Types and positioning

For TypeScript, you'll define a WeatherIconProps interface (with className and isNight) and a WeatherIcon type using ComponentType<WeatherIconProps>. This lets you pass any weather icon component as a prop to other components — the same pattern you used with Lucide icons, but now with your custom implementations.

The transform attribute positions and scales elements within the SVG. translate(x, y) moves a shape, scale(n) changes its size. When scaling, it's important to set transformOrigin: "center" so the shape scales from its center rather than the top-left corner.

This is one of the most design-relevant exercises in the course. You're working directly with the visual layer of code — composing shapes, managing colors, creating adaptive visuals. You don't need to memorize SVG syntax. What matters is understanding the format so you can direct AI to produce and modify SVGs, debug visual issues when they arise, and compose icons from simple parts with confidence.