Chase to main content
  1. Snippits & Exemplars/
  2. WolfspyreLabs Exemplars/
  3. WolfspyreLabs Shortcodes/


🐺 Shortcodes
IconPlus Outputs an SVG icon with extra fancy🎩.


{{<iconplus “wolfspyre” 𖼿❵❵


SVG Icons are populated using Hugo pipelines; making them very flexible. Congo includes a number of built-in icons for social, links, and other purposes. But our pack loves its icons.
… So we have a metric shitload (>300) of them.

Check the icon samples page for a full list of supported icons.

Custom icons can be added by providing your own svg icon assets in the assets/icons/ directory of your project.

The icon can then be referenced in the shortcode by using the SVG filename without the .svg extension.

Icons can also be used in partials by calling congo’s icon partial.

I found This conversation1 on hugo’s community forum; which presented the “simple” solution:
{{ $svg := readfile .Get 0 | safeHTML }}

I also found the rather cool hugo shortcode gallery module2 3
, with this issue4… In that issue, there’s a reference to This issue5 against wowchemy’s hugo themes…

Ultimately, that lead me to hugomodo6, and thom’s7 post about image processing8

…and that ultimately brought me back to
GeekDocs’ img shortcode.9 10

I Decided to just write my own, influenced by the icon shortcode.

Note about Positional Params
Not ALL available parameters are referencable positionally.
If you want the additional flexibility afforded from the less common parameters, call them by name.

icon #

String Default: undef
The name of the icon (Without the .svg extension.)

Unless set differently via the path parameter,
the shortcode expects the icon to reside in assets/icons.

class #

String Default: undef
The set of tailwind classes to apply to the icon’s parent span element.

path #

String Default: icons
The directory that the svg icon is located, relative to the project’s assets/ folder.

softFail #

Boolean Default: true
Emit warnf messages if an image can’t be located as opposed to a hard errorf.

useDefaultClasses #

Boolean (Default: true )
Use the default classes for the span element.
relative inline-block py-0 px-0.5 m-0 scale-1.1 align-text-bottom icon hover:scale-[2] transition-all delay-500 duration-500 cursor-pointer

disableSpanTitle #

Boolean (Default: false )
Don’t set a title value for the parent span element.

debug #

Boolean (Default: false )
Log debug information.

⚙️ customSpanTitle #

Boolean (Default: false )
A handle to optionally set the HTML title of the parent span element.
If not set, Defaults to the asset name.

⚙️ publish #

String (Default: global )
If true, iconPlus will call the hugo .Publish method on the icon asset.

⚙️ wrapperEntity #

String (Default: span )
Valid Values: span, div
This param sets whether the icon is wrapped in a span or a div.
Admittedly, its totally possible to achieve inline, inline-block, or block behavior without changing the wrapper entity type
Thanks Tailwind!!🙏❤️
But………. Doing so requires altering the class list, which is a bit more cumbersome than I wanted…

so this is a crappy kompromise. ¯\_(ツ)_/¯.

⚙️Positional Usage Examples Positional #

⚙️Name only #

Here, we’re calling iconplus with just the icon name

Positional Example: iconname only

{{< iconplus cat>}}

Positional Example Output: iconname only

⚙️All positionally available parameters #

I looked for a kitchen sink icon to use here… but didn’t find one worth adding ;)

So, here we’ll call iconplus with a value for each of the positionally referencable parameters:

0 1 2 3 4 5 6
icon class path softfail useDefaultClasses disableSpanTitle debug
poo-storm scale-[3] icons true true true true

Positional Example Output: All Parameters

Positional Example: All positional parameters

{{< iconplus “poo-storm” “scale-[3]” “icons” true true true true >}}

[DEBUG][iconPlus][/snippits/wplshortcodes/shortcodes/iconplus][poo-storm] debugOutput:
icon:[poo-storm] class:[scale-[3]] softFail:[true] useDefaultClasses:[true]disableSpanTitle:[true] debug:[true]

ClassList set to 'scale-[3]' for poo-storm

🤡 Named Parameter usage #

Named Parameters: icononly #

Named Example iconname only Output

Named Parameters Example: iconname

{{< iconplus icon=“wolfspyre” >}}

Named Parameters: All Named Parameters #

All Named Parameters Example Output

{{\< iconplus icon="wolfspyre" class="scale-[3]" path="icons" softFail=true debug=true useDefaultClasses=true disableSpanTitle=true customSpanTitle="nice Icon" publish=true duotoneFallback=true wrapperEntity="span" >}}

All Named Parameters Example Output