Ability to use Font Awesome icons in sidebar and tabs
planned
K
Kruno Golubic
I'd like to be able to use icons from https://fontawesome.com/v5.15/icons?d=gallery&p=2 as icons in tabs and in the sidebar. The use case for this is marking the documentation for a specific OS with the logo of that OS.
Super Manito
We can use iconify components
Creat file
src/components/Icon/index.ts
import React from 'react'
import { Icon } from '@iconify/react'
export function ICON ({ children }: { children: string }) {
return (
<span>
<Icon icon={children} height="24" style={{verticalAlign: "-0.35em"}}></Icon>
</span>
)
}
Use in markdown
import { ICON } from '@site/src/components/Icon';
<ICON>mdi:github</ICON>
But I would prefer to use a syntax similar to
:xxx:
. At least that's how it's used on other documentation engines. Like mkdocs-materialSean Park-Ross
We would also like some more CSS classes around the menu items in order to add custom badges and other icons too.
m
musicalinder
Hi there. I'm also interested in using HTML in sidebar_label. Do you have Github issue already for this feature? Thanks
Joshua Chen
Merged in a post:
[FEATURE] Icons in sidebar item
L
Luka S
Might be useful to mark deprecated, beta, or new documentation; as seen commonly in Google's API documentation pages.
As an alternative, text labels in a rounded coloured box might also look nice. This could just be another argument to a sidebar item.
Joshua Chen
planned
We'll support FA icons through letting you pass raw HTML before/after sidebar labels. The Tabs one should be easier since you just need to swizzle it. It will be one of the first components to be marked as safe for swizzle.
Joshua Chen
Joshua Chen
(Comment from the post I just merged)
Hi! If your use-case is for sidebar labels, doesn't it make more sense to allow HTML in
sidebar_label
instead of title
?The
title
front matter, in the worst case, is only used for the browser tab's title, because the actual title displayed on the page can be overridden with the first h1 heading, which actually supports HTML tags. (i.e. # Getting started <span class="badge badge--primary">New</span>
already works.)We also have needs to allow using SVG icons for each sidebar link, so I think a generic fix would be to let you pass arbitrary HTML before / after each sidebar link, but we probably won't interpolate the text itself.
Sébastien Lorber
under review