LogoIcon

The file is read at build time and its content placed in the page. That is what lets it take its colour from currentColor and be sized like the rest of the text — impossible through an img tag, which isolates the document.

An icon

<LogoIcon src="./icons/book.svg" label="Documentation" />

A relative path starts from the page, an absolute path from the version folder. Nothing can leave it: a page does not read the rest of the machine.

It follows the text

Placed in a text, the icon takes its size and colour.

Sizes

size accepts any CSS length.

<LogoIcon src="./icons/shield.svg" size="3rem" style={{ color: '#10b981' }} />

The colour only follows if the file relies on currentColor rather than on a fixed colour.

In a list

• No script to load

• Links are read back before publishing

• One version per branch

At the head of a card

Decorative or meaningful

Without label, the icon is treated as decorative and hidden from screen readers — which is right when nearby text already says the same thing. With label, it becomes a described image.

<LogoIcon src="./icons/star.svg" />
<LogoIcon src="./icons/star.svg" label="Favourite" />

In the list above, the icons have no label: the text next to them already carries the meaning, and announcing it twice would tell nothing.

What it refuses

A missing file, a file without an svg tag, a target leaving the version folder: each one stops the build, naming the expected path. A missing icon would otherwise leave an empty box that nobody notices.

The scripts and event handlers present in a file are removed before inlining. A component loads no JavaScript, and this one is not going to introduce any.