Icon links
Links that belong at the edge of the navbar rather than in its reading order (the repository, an
issue tracker, a support page) are configured as iconLinks and rendered as a mark:
export default createConfig({
title: 'voraus.example',
projectName: 'voraus-example',
iconLinks: [
{
icon: 'github',
href: 'https://github.com/vorausrobotik/voraus-example',
label: 'GitHub repository',
},
],
})
They are appended after your navbarItems, so the bar reads
text first and marks last without you ordering the two lists yourself. position defaults to
right; set it to 'left' if you need one on the other side.
label is not optional
An icon carries no text, so label is the only name the link has. It becomes the aria-label a
screen reader announces and the tooltip a mouse user sees, and in the mobile menu, where the navbar
collapses into a list of labeled entries, it is shown next to the icon as ordinary text.
The available icons
| Name | Mark |
|---|---|
github | GitHub |
The set is closed on purpose: the same kind of destination should carry the same mark on every voraus site, and a name with no icon behind it fails the build instead of publishing an empty navbar item. Need one that is not here? Add it to the theme. That is a small change, and every site gets it.
For a genuinely one-off mark, the ordinary Docusaurus route is still open: a navbarItems entry
with a className, and your own CSS in customCss.
No icon CDN
The marks are React components compiled into your bundle, from
react-icons. Nothing is fetched at runtime.
That is deliberate rather than incidental. Icon services such as Iconify load their artwork from their own API on demand, which would put a third-party request into every page. And vdoc keeps published versions online for years, so a snapshot built today would depend on that service still answering in 2030. It would also leave the icons blank on an air-gapped network, which is exactly where these docs have to work.