diff --git a/content/functions/dict.md b/content/functions/dict.md index 220279e59..691abc141 100644 --- a/content/functions/dict.md +++ b/content/functions/dict.md @@ -49,4 +49,45 @@ Important {{.important}} ``` {{% /code %}} +## Example: `dict` with Embedded SVGs + +Let's suppose you want to pass values into embedded SVG icons on the fly in your template without having to change your CSS. The following is the XML for an "external link" SVG icon: + +{{% code file="layouts/partials/svgs/external-links.svg" copy="false" %}} +```xml + + + +``` +{{% /code %}} + +You can then call this [partial template][partials] using `{{ partial "svgs/external-links.svg" . }}`, but what if you want to pass specific values such as `fill` `height` and `width` into the icon? To allow for more flexibility, you can abstract these values into variables that you will later define when calling the partial template: + +{{% code file="layouts/partials/svgs/external-links.svg" download="external-links.svg" %}} +```xml + + + +``` +{{% /code %}} + +You can then pass these values to customize the SVG by calling the partials with `dict`: + +{{% code file="layouts/_default/list.html" %}} +```html +... +{{ partial "svg/link-ext.svg" (dict "fill" "#01589B" "size" "10") }} +... +``` +{{% /code %}} + +The above partial will generate the following code when Hugo builds your site: + +```html + + + +``` + + [partials]: /templates/partials/