Using variables in Jinja include statements

I’m working on a project that uses Pelican as the static site generator. Pelican uses the Jinja templating language, which looks similar to Liquid and Nunjucks.

Inside a for loop, I have a set of SVGs that I need to match to a variable in the frontmatter for each page, with the SVG code itself in the HTML output. I can’t use <img> here, because I need to set the fill color for the SVGs with CSS.

I tried to use the include tag like this:

{%- include “icons/{{ variable }}.svg” -%} 

…which didn’t work, and led to a lot of time spent trying other methods, like writing a macro for each icon with an if statement chain worthy of TheDailyWTF, dictionary comparison, and other complicated nonsense.

After reading the docs for the 10th time, I happened to scroll down to the section on Other Operators:

~ (tilde) Converts all operands into strings and concatenates them.

{{ "Hello " ~ name ~ "!" }} would return (assuming name is set to ‘John’) Hello John!.

And came up with this elegant solution:

{%- include "icons/"~ variable ~".svg" ignore missing -%} 

Boom!

ignore missing tells the templating engine to continue when variable isn’t set.

Here’s the full loop:

{% for p in pages %} <li> <a href="{{ SITEURL }}/{{ p.url }}"> {%- include "icons/"~ p.icon ~".svg" ignore missing -%} {{ p.title }} </a> </li> {% endfor %}