Align react icons and text with mdx

[s-sajid-ali]

Adding a dependency on lucide-react to use icons like:

import { Folder } from "lucide-react";

What is a <Folder/> Folder?

Results in misaligned icons and text:

Do I need to tweak some CSS variables to fix this? If yes, can someone point me in the right direction? Thanks!

[s-sajid-ali]

One way to fix this is to define a CSS style like the one for AdmonitionIcon:

.LucideIcon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4em;
}

and use it:

import { Folder } from "lucide-react";
import styles from "./styles.module.css";


What is a <Folder className={styles.LucideIcon} /> Folder?

which now aligns the icons and text: