mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
5976d9dcd4
* docs: document src prop on Icon component * Update snippets/icons-required.mdx --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
56 lines
1.7 KiB
Plaintext
56 lines
1.7 KiB
Plaintext
---
|
|
title: "Iconos"
|
|
description: "Añade iconos de Font Awesome, Lucide, Tabler o fuentes personalizadas a tu documentación con el componente icono y opciones de tamaño y color."
|
|
keywords: ["Font Awesome", "Lucide", "Tabler", "SVGs"]
|
|
boost: 3
|
|
---
|
|
|
|
import IconsRequired from "/snippets/es/icons-required.mdx";
|
|
|
|
Utiliza iconos de Font Awesome, Lucide, Tabler, SVG (Scalable Vector Graphics), URLs externas o archivos de tu proyecto para mejorar tu documentación.
|
|
|
|
<Icon icon="flag" size={32} />
|
|
|
|
```mdx Icon example
|
|
<Icon icon="flag" size={32} />
|
|
```
|
|
|
|
## 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
|
|
<Icon src="/images/mi-icono.svg" />
|
|
|
|
<Icon src="https://example.com/icon.png" />
|
|
```
|
|
|
|
|
|
<div id="inline-icons">
|
|
## Iconos en línea
|
|
</div>
|
|
|
|
Los iconos se colocan en línea cuando se utilizan dentro de una oración, un párrafo o un encabezado. <Icon icon="flag" iconType="solid" /> Utiliza iconos con fines decorativos o para aportar énfasis visual.
|
|
|
|
```markdown Inline icon example
|
|
Los iconos se colocan en línea cuando se usan dentro de una oración, párrafo o encabezado. <Icon icon="flag" iconType="solid" /> Usa iconos para decoración o para añadir énfasis visual.
|
|
```
|
|
|
|
|
|
<div id="properties">
|
|
## Propiedades
|
|
</div>
|
|
|
|
<IconsRequired />
|
|
|
|
<ResponseField name="color" type="string">
|
|
El color del icon como código hexadecimal (por ejemplo, `#FF5733`).
|
|
</ResponseField>
|
|
|
|
<ResponseField name="size" type="number">
|
|
El tamaño del icon en píxeles.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="className" type="string">
|
|
Nombre de clase CSS personalizado para aplicar al icon.
|
|
</ResponseField> |