Mounting node_modules from Hugo Module

I have a theme module that mounts the node_modules folder to include static fonts and static JS in my site, like below:

[module]
  [[module.mounts]]
    source = "static"
    target = "static"

  [[module.mounts]]
    source = "node_modules/feather-icons/dist"
    target = "static/js/feather-icons"

I’m able to use hugo mod npm pack to download and install the relevant packages when building my site, but since node_modules is installed in my site module rather than the theme module that specifies the mount, the hugo and hugo server commands do not copy the static files in node_modules.

Is there a way to mount node_modules from a Hugo Module that I’m missing? I realize that I could specify these mounts in the site module, but that would create dependencies between my modules that I’d rather not have.

(My theme’s mount config was setup as described in this answer).

Big dirty hack: Add node_modules to your module package. I don’t see any other way to mount a folder from within a module, that is not inside of that module. If I get this right. Your module.mounts is in the theme and the node_modules folder does not exist in your theme, right? So that mount won’t work.

Right, the module.mounts is in the theme Hugo module, and hugo mod npm pack creates node_modules in the site Hugo module.

It seems like currently there are two options to support this:

  1. Moving the mounts to the site module instead of the theme module (as described by my post).
  2. Adding node_modules to source control, as described in your post.

It would be nice if there was some extension to the config.toml language that could allow specifying mounts of folders in a different Hugo module: something like module.rootMounts, which would exactly support this case for using NPM.

This would be less to maintain than a separate repo that wraps the NPM package, as GitHub - gohugoio/hugo-mod-bootstrap-scss-v4: Bootstrap SCSS v4 packaged as a Hugo Module does.

I got inspired by this post to try and bypass the node modules. Unfortunately, feather-icons doesn’t provide it’s releases directly in a git repo, which hugo expects in the config.toml. I ended up biting the dust and setting up my own git repo to hold NPM packages for Hugo modules and I mount them directly from the theme’s config.toml:

[module]
  [[module.imports]]
    path = "github.com/nnooney/hugolibs/feather-icons"

  [[module.imports.mounts]]
    source = "dist"
    target = "assets/feather-icons"```

I’m curious, why would you not just require them in your project bundle? E.g: GitHub - feathericons/feather: Simply beautiful open source icons

I couldn’t require the default feather repo since the code expects to load the compiled icons (feather/icons.js at master · feathericons/feather · GitHub). I didn’t try to load D3 directly though.

Oh yeah, that is a bit rubbish!

IF you embed the icons via an icon font then yes, it does not supply the icons. But adding all 286 icons in that font to your website is considered “hungry” these days. The user has to download the font the first time he visits the website and first impressions count. The web is one of the places where we want to finish fast :wink:

I stopped using fonts and started embedding icons as svg directly. The feather icons are here:

If you mount that folder you could create an easy shortcode/partial (the shortcode just loads the partial, same repo, one level up, one level down :wink: ) like the one I did for my bootstrap icons module:

Now your next question will unquestionable be “How can I style the color of the icon?”. The answer is as easy as this:

.myfeathericon {
  svg {
    width: 15px; // depends on your icons
    height: 15px; // depends on your icons
    line-height: 1; // depends on your icons
    vertical-align: top; // depends on your icons

    path {
      fill: currentColor; // currentColor takes the color from the surrounding element (maybe a link?) but can be a real RGB color
    }
  }
}

There is a plethora of styling options for SVG in your CSS, a quick list is here:

1 Like