How to include svg in Pug variable?

Question

Pug

Hello, how to connect svg to a Pug variable and then display it in a mixin loop?
For example, there is this mixin:

mixin list_link(classname, ...items)
  ul(class= classname + 'list')
    each item in items
      li(class= classname + 'item')= item

There is such a variable:

- var fb = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9" height="18" viewBox="0 0 9 18"><defs><path id="gl27a" d="M38.65 6014.74v-8.62h-1.8v-2.97h1.8v-1.79c0-2.42 1.02-3.86 3.92-3.86h2.4v2.97h-1.5c-1.12 0-1.2.42-1.2 1.2v1.48H45l-.32 2.97h-2.41v8.62z"/></defs><g><g transform="translate(-36 -5997)"><use fill="#fff" xlink:href="#gl27a"/></g></g></svg>';

And there is the output of the mixin on the page:
+list_link('header__social-', fb, fb, fb, fb)
That is, we should get four list items with svg inside. But instead of svg, we get a verbatim string in the form in which it is assigned to the variable, and not an html construct. That is, the very output of the variable in the mixin works, but it turns out that the variable is not assigned what is needed. Although judging by the documentation , such a story should work fine. But it doesn't work. Prompt working variant, pzhlst.

Answer 1

Greetings.
If I understand the described problem correctly, you are outputting an escaped string. Where all HTML tags are simply converted into text characters, not control characters.
This is the default behavior of Pug and is for security purposes when using this templating engine in production.
To avoid this behavior, you should use this instead of yours:
Note the exclamation point before the equals sign.