47 lines
962 B
Markdown
47 lines
962 B
Markdown
|
---
|
||
|
|
title: Icon
|
||
|
|
---
|
||
|
|
|
||
|
|
To use this shortcode inline, inline shortcode needs to be enabled in the config:
|
||
|
|
|
||
|
|
```yaml {filename="hugo.yaml"}
|
||
|
|
enableInlineShortcodes: true
|
||
|
|
```
|
||
|
|
|
||
|
|
List of available icons can be found in [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml).
|
||
|
|
|
||
|
|
<!--more-->
|
||
|
|
|
||
|
|
## Example
|
||
|
|
|
||
|
|
{{< icon "academic-cap" >}}
|
||
|
|
{{< icon "cake" >}}
|
||
|
|
{{< icon "gift" >}}
|
||
|
|
{{< icon "sparkles" >}}
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
```
|
||
|
|
{{</* icon "github" */>}}
|
||
|
|
```
|
||
|
|
|
||
|
|
[Heroicons](https://v1.heroicons.com/) v1 outline icons are available out of the box.
|
||
|
|
|
||
|
|
### How to add your own icons
|
||
|
|
|
||
|
|
Create `data/icons.yaml` file, then add your own SVG icons in the following format:
|
||
|
|
|
||
|
|
```yaml {filename="data/icons.yaml"}
|
||
|
|
your-icon: <svg>your icon svg content</svg>
|
||
|
|
```
|
||
|
|
|
||
|
|
It then can be used in the shortcode like this:
|
||
|
|
|
||
|
|
```
|
||
|
|
{{</* icon "your-icon" */>}}
|
||
|
|
|
||
|
|
{{</* card icon="your-icon" */>}}
|
||
|
|
```
|
||
|
|
|
||
|
|
Tip: [Iconify Design](https://iconify.design/) is a great place to find SVG icons for your site.
|