TimeToRead

A thin presentational wrapper that displays a reading time estimate with an icon. Consumes the readingTimeMinutes value from the remark-reading-time.mjs plugin.

File: src/core/components/ui/TimeToRead.astro

Props

Prop	Type	Default	Notes
minutes	number	—	Reading time in minutes. Renders nothing when nullish.
icon	string	"clock"	Icon name for the clock/time icon
label	string	"{n} min read"	Label template. {n} is replaced with the minute value.
class	string	—	Additional CSS classes

Usage

The component consumes the readingTimeMinutes value computed by the remark-reading-time plugin. On content pages that run the remark pipeline, access it via remarkPluginFrontmatter:

---
import TimeToRead from "@core/components/ui/TimeToRead.astro";
import { render } from "astro:content";

const { remarkPluginFrontmatter } = await render(entry);
const readingTimeMinutes = remarkPluginFrontmatter?.readingTimeMinutes;
---

{/* Show reading time when the entry has readingTime enabled */}
{entry.data.readingTime && <TimeToRead minutes={readingTimeMinutes} />}

{/* Custom label */}
<TimeToRead minutes={readingTimeMinutes} label="{n} minute read" />

Accessibility

• Renders as an inline <span> with icon and text — no interactive behavior.
• The icon is decorative (adjacent text provides the reading time information).
• Renders an empty fragment when minutes is nullish — no error, no empty element in the DOM.