How to import Hugo modules

[percula]

I'm trying to import a Hugo module to add icon shortcode support. However, when I follow the instructions here, it seems to replace the Doks theme. Is there a better way to import non-theme modules?

[h-enk]

Though it is possible to use Hugo Modules next to npm, it is not recommended. Keeping all your project dependencies in one place — id est in package.json — is easier/ more convenient. For more background, see Dependencies.

Doks comes with an icon shortcode that you can use with any icon set.

For example, to use Bootstrap Icons:

1. Install the icon set:

   npm i -D bootstrap-icons

2. Add to config/_default/module.toml (after line 27):

   [[mounts]]
     source = "node_modules/bootstrap-icons/icons"
     target = "assets/svgs/bootstrap-icons"

3. Update config/_default/params.toml (line 114..116):

   # Inline SVG (@thulite/inline-svg)
   [inline_svg]
     iconSetDir = "bootstrap-icons" # "tabler-icons" (default)

Use the shortcode in your markdown files like so:

{{< inline-svg "1-circle" >}}

You can also specify SVG attributes, for example:

{{< inline-svg src="2-circle" fill="#ee52b7" height="2rem" width="2rem" class="svg-inline-custom" >}}

[h-enk]

I know documentation of the inline SVG integration for Thulite is missing. I will set this up and include some more examples of using other popular icon sets.

Do you have any other input? What else did you stumble upon that was unclear?