gohugoio/hugo-mod-heroicons

Work In Progress: Provides Heroicons as a simple to use Hugo Module

hugo-mod-heroicons's Issues

#10614 #12568 heyitsquoracom:patch-2 #10605 #12480

          #10614 #12568 heyitsquoracom:patch-2 #10605 #12480

Originally posted by @Heyitsquoracom in gohugoio/hugo#12568 (comment)

#4 #7

          #4 #7

Originally posted by @Heyitsquoracom in #8 (comment)

Is this functional?

I added the bare bones to config, trying to get this to work:

[[module]]
[[module.imports]]
path = "github.com/gohugoio/hugo-mod-heroicons"

And then using your example in my template:

{{ $icon := resources.Get "svg/heroicons/outline/search.svg" }} 
{{ $icon.Content | safeHTML }}

resulted in the following error:

Error: Error building site: failed to render pages: render of "home" failed: "/Users/ericbrookfield/Development/quickstart/layouts/index.html:31:12": execute of template failed: template: index.html:31:12: executing "main" at <$icon.Content>: nil pointer evaluating resource.Resource.Content

Suggestion: mount optimized icons

I was looking at what gets published to NPM, and seems that their build script takes input from src and output to optimize, then copying the result to top-level directories and releasing that.

https://github.com/tailwindlabs/heroicons/blob/eee05eb77af6cdedfb97f128d1998773fc984b28/package.json#L17-L19

In my project I changed the mount point to use the optimized version of the icons:

  [[module.imports]]
    path="github.com/tailwindlabs/heroicons"
  [[module.imports.mounts]]
    source = "optimized"
    target = "assets/svg/heroicons"

Among other benefits, this allows for easier control of icon size using CSS. Example:

{{ $icon := resources.Get "svg/heroicons/20/solid/phone.svg" }}
<span class="w-8 h-auto">{{ $icon.Content | safeHTML }}</span>

Hey-2c18f

#9 (comment) #5 #7 #6 #8
stripe_backup_code.txt
gitlab-org-gitlab_issues_2024-03-10.csv
github-recovery-codes 2.txt
Uploading SteamLink.zip…