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.

at the size and colour of the text

and here, smaller and greyer

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

Fast

No hydration, no bundle to download before reading.

Verified

Dead links and invalid markup stop the publication.

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.

An icon from a set

Beside a file of your project, src accepts the name of an icon from a collection, written prefix:name:

<LogoIcon src="simple-icons:github" label="Repository" />

The set is a package your project installs, and the drawing is placed in the page at the build, exactly as a file of yours would be:

npm install --save-dev @iconify-json/simple-icons

Nothing is fetched while the page is read — those collections offer an online service, which would mean a request for every icon and a script to make it. A set that is not installed stops the build and names the package to install; so does a name the set does not hold.

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.

A kind of admonition takes its mark through this same component — see Admonition.