From f4aefd4fad3fcdbbf3919c709610cf1199d2343c Mon Sep 17 00:00:00 2001 From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com> Date: Thu, 11 Jun 2026 15:12:27 +0000 Subject: [PATCH] docs: document src prop on Icon component --- components/icons.mdx | 10 ++++++++++ es/components/icons.mdx | 10 ++++++++++ fr/components/icons.mdx | 10 ++++++++++ snippets/es/icons-required.mdx | 21 ++++++++++++++++----- snippets/fr/icons-required.mdx | 25 ++++++++++++++++++------- snippets/icons-required.mdx | 20 +++++++++++++++----- snippets/zh/icons-required.mdx | 21 ++++++++++++++++----- zh/components/icons.mdx | 10 ++++++++++ 8 files changed, 105 insertions(+), 22 deletions(-) diff --git a/components/icons.mdx b/components/icons.mdx index 9421adb1eb..4e1d450d2b 100644 --- a/components/icons.mdx +++ b/components/icons.mdx @@ -15,6 +15,16 @@ Use icons from Font Awesome, Lucide, Tabler, SVGs, external URLs, or files in yo ``` +## Custom image icons + +Use the `src` prop to display a custom image as an icon. The image can be a file in your project or an externally hosted URL. + +```mdx Custom image icon examples + + + +``` + ## Inline icons Icons appear inline when used within a sentence, paragraph, or heading. Use icons for decoration or to add visual emphasis. diff --git a/es/components/icons.mdx b/es/components/icons.mdx index bd903cc57d..4601c20362 100644 --- a/es/components/icons.mdx +++ b/es/components/icons.mdx @@ -15,6 +15,16 @@ Utiliza iconos de Font Awesome, Lucide, Tabler, SVG (Scalable Vector Graphics), ``` +## Iconos de imagen personalizados + +Usa la prop `src` para mostrar una imagen personalizada como icono. La imagen puede ser un archivo de tu proyecto o una URL alojada externamente. + +```mdx Custom image icon examples + + + +``` +
## Iconos en línea diff --git a/fr/components/icons.mdx b/fr/components/icons.mdx index 010a8f78c5..42952a1636 100644 --- a/fr/components/icons.mdx +++ b/fr/components/icons.mdx @@ -15,6 +15,16 @@ Utilisez des icônes de Font Awesome, Lucide, Tabler, des SVG (Scalable Vector G ``` +## Icônes d’image personnalisées + +Utilisez la prop `src` pour afficher une image personnalisée en guise d’icône. L’image peut être un fichier de votre projet ou une URL hébergée en externe. + +```mdx Custom image icon examples + + + +``` +
## Icônes en ligne diff --git a/snippets/es/icons-required.mdx b/snippets/es/icons-required.mdx index 16124e3c5a..8ce634d4b6 100644 --- a/snippets/es/icons-required.mdx +++ b/snippets/es/icons-required.mdx @@ -1,17 +1,28 @@ - - El icono que se mostrará. + + Debes proporcionar `icon` o `src`. + + + + El icono que se mostrará desde una biblioteca de iconos. Options: * [Font Awesome icon](https://fontawesome.com/icons) name, if you have the `icons.library` [property](/es/organize/settings#param-icons) set to `fontawesome` in your `docs.json` * [Lucide icon](https://lucide.dev/icons) name, if you have the `icons.library` [property](/es/organize/settings#param-icons) set to `lucide` in your `docs.json` * Nombre del [icono Tabler](https://tabler.io/icons), si tienes la `icons.library` [propiedad](/es/organize/settings#param-icons) configurada como `tabler` en tu `docs.json` - * URL to an externally hosted icon - * Path to an icon file in your project + + + + Ruta o URL de una imagen para usar como icono. Usa `src` en lugar de `icon` cuando quieras utilizar una imagen personalizada en lugar de un icono de una biblioteca. + + Options: + + * Ruta a un archivo de imagen en tu proyecto (por ejemplo, `/images/mi-icono.svg`) + * URL de una imagen alojada externamente (por ejemplo, `https://example.com/icon.png`) The [Font Awesome](https://fontawesome.com/icons) icon style. Only used with Font Awesome icons. Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`. - \ No newline at end of file + diff --git a/snippets/fr/icons-required.mdx b/snippets/fr/icons-required.mdx index eb86f7c5d8..062b15886f 100644 --- a/snippets/fr/icons-required.mdx +++ b/snippets/fr/icons-required.mdx @@ -1,17 +1,28 @@ - - Icône à afficher. + + Vous devez fournir `icon` ou `src`. + - Options : + + Icône à afficher depuis une bibliothèque d’icônes. + + Options : * Nom d’icône [Font Awesome](https://fontawesome.com/icons) si vous avez la [propriété](/fr/organize/settings#param-icons) `icons.library` définie sur `fontawesome` dans votre `docs.json` * Nom d’icône [Lucide](https://lucide.dev/icons) si vous avez la [propriété](/fr/organize/settings#param-icons) `icons.library` définie sur `lucide` dans votre `docs.json` * Nom d’icône [Tabler](https://tabler.io/icons) si vous avez la [propriété](/fr/organize/settings#param-icons) `icons.library` définie sur `tabler` dans votre `docs.json` - * URL vers une icône hébergée en externe - * Chemin vers un fichier d’icône dans votre projet + + + + Chemin ou URL d’une image à utiliser comme icône. Utilisez `src` à la place de `icon` lorsque vous souhaitez utiliser une image personnalisée plutôt qu’une icône d’une bibliothèque. + + Options : + + * Chemin vers un fichier image dans votre projet (par exemple, `/images/mon-icone.svg`) + * URL vers une image hébergée en externe (par exemple, `https://example.com/icon.png`) Style d’icône [Font Awesome](https://fontawesome.com/icons). Utilisé uniquement avec les icônes Font Awesome. - Options : `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`. - \ No newline at end of file + Options : `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`. + diff --git a/snippets/icons-required.mdx b/snippets/icons-required.mdx index e1cea82b47..57ff3bf1be 100644 --- a/snippets/icons-required.mdx +++ b/snippets/icons-required.mdx @@ -1,16 +1,26 @@ - - The icon to display. + + Either `icon` or `src` must be provided. + + + + The icon to display from an icon library. Options: - [Font Awesome icon](https://fontawesome.com/icons) name, if you have the `icons.library` [property](/organize/settings-appearance#param-icons) set to `fontawesome` in your `docs.json` - [Lucide icon](https://lucide.dev/icons) name, if you have the `icons.library` [property](/organize/settings-appearance#param-icons) set to `lucide` in your `docs.json` - [Tabler icon](https://tabler.io/icons) name, if you have the `icons.library` [property](/organize/settings-appearance#param-icons) set to `tabler` in your `docs.json` - - URL to an externally hosted icon - - Path to an icon file in your project + + + + Path or URL to an image to use as the icon. Use `src` instead of `icon` when you want to use a custom image rather than an icon from a library. + + Options: + - Path to an image file in your project (for example, `/images/my-icon.svg`) + - URL to an externally hosted image (for example, `https://example.com/icon.png`) The [Font Awesome](https://fontawesome.com/icons) icon style. Only used with Font Awesome icons. Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`. - \ No newline at end of file + diff --git a/snippets/zh/icons-required.mdx b/snippets/zh/icons-required.mdx index a731749e9b..4d260fe1b5 100644 --- a/snippets/zh/icons-required.mdx +++ b/snippets/zh/icons-required.mdx @@ -1,17 +1,28 @@ - - 要显示的图标。 + + 必须提供 `icon` 或 `src` 之一。 + + + + 要从图标库中显示的图标。 可选值： * 如果在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `fontawesome`，则为 [Font Awesome 图标](https://fontawesome.com/icons) 的名称 * 如果在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `lucide`，则为 [Lucide 图标](https://lucide.dev/icons) 的名称 * 如果在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `tabler`，则为 [Tabler 图标](https://tabler.io/icons) 的名称 - * 指向外部托管图标的 URL - * 项目中图标文件的路径 + + + + 用作图标的图像的路径或 URL。当你希望使用自定义图像而不是图标库中的图标时，请使用 `src` 代替 `icon`。 + + 可选值： + + * 项目中图像文件的路径（例如，`/images/my-icon.svg`） + * 外部托管图像的 URL（例如，`https://example.com/icon.png`） [Font Awesome](https://fontawesome.com/icons) 的图标样式。仅在使用 Font Awesome 图标时有效。 可选值：`regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands`。 - \ No newline at end of file + diff --git a/zh/components/icons.mdx b/zh/components/icons.mdx index 1ccb9ab176..b36f3482fa 100644 --- a/zh/components/icons.mdx +++ b/zh/components/icons.mdx @@ -15,6 +15,16 @@ import IconsRequired from "/snippets/zh/icons-required.mdx"; ``` +## 自定义图像图标 + +使用 `src` 属性将自定义图像显示为图标。该图像可以是项目中的文件，也可以是外部托管的 URL。 + +```mdx Custom image icon examples + + + +``` +
## 行内图标