https://github.com/schochastics/devicons

quarto extensions for devicons
https://github.com/schochastics/devicons

quarto quarto-extension

Last synced: about 1 month ago
JSON representation

quarto extensions for devicons

• Host: GitHub
• URL: https://github.com/schochastics/devicons
• Owner: schochastics
• Created: 2023-12-17T21:56:36.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-12T17:47:37.000Z (12 months ago)
• Last Synced: 2024-10-12T22:14:24.230Z (2 months ago)
• Topics: quarto, quarto-extension
• Language: CSS
• Homepage:
• Size: 953 KB
• Stars: 5
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Devicons Extension for Quarto

This extension provides support for

[devicons](https://devicon.dev). Icons can be used in

HTML documents only.

The code is adapted from the [academicons](https://github.com/schochastics/academicons) extension.

## Installing

```bash

quarto install extension schochastics/devicons

```

This will install the extension under the `_extensions` subdirectory.

If you're using version control, you will want to check in this directory.

## Using

To embed an icon, use the `{{{< devicon >}}}` shortcode. For example:

```default

{{< devicon python-plain-wordmark >}}

{{< devicon cplusplus-plain >}}

{{< devicon lua-plain-wordmark >}}

{{< devicon lua-plain-wordmark size=5x >}}

```

You can browse all of the available icons here:

### Sizing Icons

This extension provides relative, literal, and LaTeX-style sizing for icons.  

When the size is invalid, no size changes are made.

- Relative sizing: `{{< ai lua-plain-wordmark size=2xl >}}`.

  | Relative Sizing Class | Font Size | Equivalent in Pixels |

  |-----------------------|-----------|----------------------|

  | 2xs                   | 0.625em   | 10px                 |

  | xs                    | 0.75em    | 12px                 |

  | sm                    | 0.875em   | 14px                 |

  | lg                    | 1.25em    | 20px                 |

  | xl                    | 1.5em     | 24px                 |

  | 2xl                   | 2em       | 32px                 |

- Literal sizing: `{{< devicon lua-plain-wordmark size=5x >}}`.

  | Literal Sizing Class | Font Size |

  |----------------------|-----------|

  | 1x                   | 1em       |

  | 2x                   | 2em       |

  | 3x                   | 3em       |

  | 4x                   | 4em       |

  | 5x                   | 5em       |

  | 6x                   | 6em       |

  | 7x                   | 7em       |

  | 8x                   | 8em       |

  | 9x                   | 9em       |

  | 10x                  | 10em      |

- LaTeX-style sizing: `{{< devicon lua-plain-wordmark size=Huge >}}`.

  | Sizing Command                   | Font Size (HTML) |

  | -------------------------------- | ---------------- |

  | tiny (= `\tiny`)                 | 0.5em            |

  | scriptsize (= `\scriptsize`)     | 0.7em            |

  | footnotesize (= `\footnotesize`) | 0.8em            |

  | small (= `\small`)               | 0.9em            |

  | normalsize (= `\normalsize`)     | 1em              |

  | large (= `\large`)               | 1.25em           |

  | Large (= `\Large`)               | 1.5em            |

  | LARGE (= `\LARGE`)               | 1.75em           |

  | huge (= `\huge`)                 | 2em              |

  | Huge (= `\Huge`)                 | 2.5em            |

- CSS-style sizing: `{{< devicon lua-plain-wordmark size=2em >}}`.

### Coloring icon

The color of the icon can be changed via the `color` parameter.  

`{{< devicon lua-plain-wordmark color=red >}}`

## Example

Here is the source code for a minimal example: [example.qmd](example.qmd)