Iconos en Quarto

1 Intro

A todos nos gusta que nuestros documentos sean atractivos y expresivos, así que vamos a ver cómo podemos insertar emojis e iconos en nuestros documentos QMD.

2 Emojis

Los emojis son una forma sencilla de añadir expresividad a nuestros documentos. Quarto logicamente permite usar emojis. Veamos cómo:

• Para mi, la forma más sencilla de incoporar emojis en nuestros .qmd’s es buscar el emoji que quieras en emojipedia, o casi mejor aquí, para después copiarlo y pegarlo en tu documento. E

• También es muy fácil insertar emojis usando el editor visual de RStudio. Puedes verlo aquí

• También se pueden usar emojis usando está sintaxis: por ejemplo, si en tu qmd escribes :smile: se convertirá en 😄 :star-struck:, si escribes :rocket: se convertirá en 🚀 , etc… Para ello, antes hay que activar los emojis, poniendo en el yaml del .qmd lo siguiente: from: markdown+emoji

• Quizás es un poco más lioso, pero también puedes usar el paquete emoji que cuando lo probé en 2024 tenía 4.702 emojis. Para insertar un emoji en el texto de tu .qmd has de escribir `r emoji::emoji(“star-struck”)` para ver este emoji: 🤩.

Otro ejemplo de uso del paquete emoji:

emoji::emojis |> 
  dplyr::select(1:3) |> 
  dplyr::slice_sample(n = 10) |> gt::gt()  

emoji	name	group
💏🏼	kiss: medium-light skin tone	People & Body
👰🏾‍♂️	man with veil: medium-dark skin tone	People & Body
🏝️	desert island	Travel & Places
👮🏼‍♀️	woman police officer: medium-light skin tone	People & Body
🧑🏽‍❤️‍🧑🏼	couple with heart: person, person, medium skin tone, medium-light skin tone	People & Body
🚣🏽‍♂️	man rowing boat: medium skin tone	People & Body
©	copyright	Symbols
♑	Capricorn	Symbols
🚵🏿	person mountain biking: dark skin tone	People & Body
🖖🏾	vulcan salute: medium-dark skin tone	People & Body

3 Iconos

Hay varias extensiones de Quarto para insertar íconos en nuestros documentos. Richard Ianone, en este repo da ejemplo de cómo utilizar varios de ellos: fontawesome, material-icons, bsicons, academicons, lordicon e iconify. Pero no dice como instalarlas

Algunas de ellas son:

Academicons

Academicons contiene iconos relacionados con la academia que no están incluidos en otros paquetes de iconos.

La extensión schocastics/academicons permite usar academicons (v1.9.4). Solo puede usarse en documentos HTML.

Para instalarla (dentro de un proyecto):

quarto install extension schochastics/academicons

Para usar los iconos:

Si escribes:

{{< ai google-scholar >}}

{{< ai google-scholar size=2xl >}}

{{< ai google-scholar size=2xl color=red >}}

Obtendrás:

Iconify

Iconify contiene una colección de más de 50.000 iconos de diferentes fuentes. Puedes ver los iconos disponibles aquí.

Para usar Iconify en Quarto, puedes instalar la extensión mcanouil/quarto-iconify. Aquí tienes el repo con ejemplos e instrucciones de instalación.

quarto add mcanouil/quarto-iconify

Una vez instalada la extensión, puedes usarlos a través del siguiente shortcode: {{< iconify <icon-name> >}}. Por ejemplo, si escribes {{< iconify exploding-head >}} obtendrás el siguiente icono: .

La API de Iconify nos permite personalizar los iconos con diferentes tamaños, rotaciones, colores, etc. Ahora mismo, la extensión mcanouil/quarto-iconify soporta las siguientes opciones: width, height, title, label (i.e., aria-label), flip, and rotate

Shortcode	Icon
{{< iconify exploding-head >}}
{{< iconify exploding-head size=2xl >}}
{{< iconify exploding-head size=5x rotate=180deg >}}
{{< iconify exploding-head size=Huge >}}
{{< iconify fluent-emoji-high-contrast 1st-place-medal >}}
{{< iconify twemoji 1st-place-medal >}}
{{< iconify line-md loading-alt-loop >}}
{{< iconify fa6-brands apple width=50px height=10px rotate=90deg flip=vertical >}}

Lordicon

Lordicon contiene una colección de más de 18.000 iconos animados, más de 3.000 de ellos libres. Puedes ver los iconos disponibles aquí.

Para usar iconos de Lordicon en Quarto, puedes instalar la extensión jmgirard/lordicon. Aquí tienes el repo con ejemplos e instrucciones de instalación.

quarto add jmgirard/lordicon

Para usar los iconos:

Si escribes:

{{< li wlpxtupd >}}

{{< li wxnxiano >}}

{{< li wxnxiano trigger=hover >}}

Obtendrás:

Weather Icons

Weather Icons contiene una colección de 222 iconos sobre el tiempo.

Para usarlos en Quarto, puedes instalar la extensión andrie/quarto-weather-icons. Aquí tienes el repo con ejemplos e instrucciones de instalación.

Font Awesome

Font Awesome contiene una colección de más de 30.000 iconos de diferentes fuentes.

Para usarlos en Quarto, puedes instalar la extensión quarto-ext/fontawesome. Aquí tienes el repo con ejemplos e instrucciones de instalación.

Los iconos pueden usarse en HTML (via Font Awesome 6 Free) and PDF (via the fontawesome5 LaTeX package).

Material-icons

Material-icons contiene una colección de iconos procedentes de Google Fonts

Para usarlos en Quarto, puedes instalar la extensión shafayetShafee/material-icons. Aquí tienes el repo con ejemplos e instrucciones de instalación.

Bootstrap Icons

Bootstrap Icons los iconos de Bootstrap

Para usarlos en Quarto, puedes instalar la extensión shafayetShafee/bsicons. Aquí tienes el repo con ejemplos e instrucciones de instalación.