search

hugo-mods / icons

A Hugo icon system module that scales.
https://hugo-mods.github.io/#icons
Apache License 2.0
23 stars 3 forks source link

function "context" not defined #6

Closed howdu closed 2 years ago

howdu commented 2 years ago

{{ partial "icon" (context . name "fas heart") }}

This semi-works {{ partial "icon" (dict "context" . "name" "fas heart") }}

But svg is not included even though it's last.

mod-icons: no used icons found. please ensure that the 'icon-data' partial is loaded LAST in your body!

Checking the html is added inline correctly but not the referenced svg: <svg class="icon"><use xlink:href="#icon-heart"></use></svg>

kdevo commented 2 years ago 
{{ partial "icon" (context . name "fas heart") }}

I'm afraid that this is wrongly documented in the README. If you want you can fix it via PR. Otherwise I'll keep track of it via this issue.

But svg is not included even though it's last.

Did you include the icon-data shortcode as the warning suggests? Like the following:

{{ partial "icon-data" . }}

If still not working, could you share a minimal working example for reproducing this?

howdu commented 2 years ago

Fix the readme but I've realised it's not working because I'm using partial includes to build up my pages. Is there a way of making it work in that way?

https://github.com/hugo-mods/icons/pull/8

kdevo commented 2 years ago

Hi @howdu,

Thanks for the PR. Do you have any possibility of passing the context around in these partials from one to another? Sometimes it's enough to just call your partial via {{ partial "example" . }}.

Why is this required? The context is used to pass a "bag" with all the icons that are used on site. This is needed because the SVG data is rendered all at once, at a different place by default.

For complicated setups I would recommend the Data Pattern which requires maintaining a separate icons.yaml file but is more robust in most cases.

Last resort alternative would be to use the inline loader, but then you'll loose some advantages of the symbol approach (svg use).

Hope this gives some insights.