LogoIcon Component

This component allows you to easily display Iconify icons in MDX pages of Docusaurus.
It is particularly useful for displaying logos (GitHub, Airbnb, Google, etc.) without having to import each icon individually.

Installation

In your Docusaurus project, install the Iconify React library:

npm install @iconify/react

yarn add @iconify/react

File structure

src/
 ├─ components/
 │   └─ LogoIcon.js       # React component that wraps Iconify
 └─ theme/
     └─ MDXComponents.js  # Allows using <LogoIcon /> everywhere in MDX

Component code for Logos category

src\components\LogoIcon.js

import React from "react";
import { Icon } from "@iconify/react";

export default function LogoIcon({ name, size = 48 }) {
  return <Icon icon={`logos:${name}`} width={size} height={size} />;
}

src\components\LogoIcon.tsx

import React from "react";
import { Icon } from "@iconify/react";

interface LogoIconProps {
  name: string;
  size?: number;
}

export default function LogoIcon({ name, size = 48 }: LogoIconProps): JSX.Element {
  return <Icon icon={`logos:${name}`} width={size} height={size} />;
}

Global declaration in MDX

src\theme\MDXComponents.js

import React from 'react';
import MDXComponents from '@theme-original/MDXComponents';
import LogoIcon from '@site/src/components/LogoIcon';

export default {
  ...MDXComponents,
  LogoIcon, // 👈 makes <LogoIcon /> available everywhere
};

export default CustomMDXComponents;

src\theme\MDXComponents.tsx

import React from 'react';
import MDXComponents from '@theme-original/MDXComponents';
import LogoIcon from '@site/src/components/LogoIcon';
import type { MDXComponents as MDXComponentsType } from '@mdx-js/react';

const CustomMDXComponents: MDXComponentsType = {
  ...MDXComponents,
  LogoIcon,
};

export default CustomMDXComponents;

How to use it

• The name corresponds to the icon name in the Logos set of Iconify.

  Example: logos:airbnb-icon → name="airbnb-icon"

• The size (optional) defines the logo size in pixels. Default value: 48.

• You can easily customize the component (add a color prop, change the icon set, apply CSS classes, etc.).

Once configured, you can directly use the component without import:

Usage example in MDX files

<LogoIcon name="docusaurus" size='256' />

<LogoIcon name="react" size='124' /> 

<LogoIcon name="airbnb-icon" size='64' />

<LogoIcon name="github-icon" />

<LogoIcon name="gitlab" size='32' />

Component code for all Logos category

I created this component to easily use logos Naturally, you can create a similar component for other icon sets (Material Design, FontAwesome, etc.) by adapting the logic. Or even have a global logic.

Global component for all Iconify categories

src\components\LogoIcon.js

import React from "react";
import { Icon } from "@iconify/react";

export default function LogoIcon({ name, size = 48 }) {
  return <Icon icon={`${name}`} width={size} height={size} />;
}

src\components\LogoIcon.tsx

import React from "react";
import { Icon } from "@iconify/react";

interface LogoIconProps {
  name: string;
  size?: number;
}

export default function LogoIcon({ name, size = 48 }: LogoIconProps): JSX.Element {
  return <Icon icon={`${name}`} width={size} height={size} />;
}

Advantages of my component

• No need to import each logo in every MDX file.
• Simple and readable syntax.
• Easy to customize globally (size, style, default color).
• Built on Iconify → access to **200k+ open source

look : https://icon-sets.iconify.design/