IconPlus

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 conversation¹ on hugo’s community forum; which presented the “simple” solution:

{{ $svg := readfile .Get 0 | safeHTML }}

I also found the rather cool hugo shortcode gallery module²³
, with this issue⁴… In that issue, there’s a reference to This issue⁵ against wowchemy’s hugo themes…

Ultimately, that lead me to hugomodo⁶, and thom’s⁷ post about image processing⁸…

…and that ultimately brought me back to
GeekDocs’ img shortcode.⁹¹⁰

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.

⚙️ hoverScale #

String (Default: true )
A handle to optionally disable the hover-zoom effect which is enabled by default.
If not set to “false”, Default behavoir will cause the svg/icon to scale when hovered over..

⚙️ 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

⚙️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:

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

[DEBUG][iconPlus][/snippits/wplshortcodes/shortcodes/iconplus][poo-storm] 
ClassList set to 'scale-[3]' for poo-storm

🤡 Named Parameter usage #

Named Parameters: icononly #

Named Parameters: All Named Parameters #