ComponentsLumos 0.0.1Open component
Icon
An SVG rendered inline, sized in em so it scales with the text beside it.
Icon renders an imported SVG inline rather than as an <img>, so it takes the current text color and can be styled by CSS. Its sizes are in em, which means an icon next to text scales with that text automatically.
---
import Icon from "@/components/Icon.astro";
import arrow from "@/assets/icons/arrow.svg";
---
<Icon src={arrow} variant="small" />Props
| Prop | Type | Default | What it does |
|---|---|---|---|
render | boolean | true | Set to false to skip this component and everything inside it. |
src | SvgComponent | None | An SVG imported from src/assets. Nothing renders without one. |
variant | "small" | "medium" | "large" | "full-width" | "medium" | small is 1em, matching the line of text. medium is 1.5em, large is 2em. full-width fills its container and lets the height follow the artwork. |
Decorative or meaningful
An icon with no label is hidden from screen readers, which is right when the text beside it already says what it means. When the icon is the label (a bare close button, a social link), give it an aria-label and it will be announced.
<a href="https://github.com/lumosframework" aria-label="Lumos on GitHub">
<Icon src={github} />
</a>