Как подключить svg в переменную Pug?

Question

[Евгений Журов]

Здравствуйте, как подключить svg в переменную Pug и потом вывести в цикле миксина?
Например, есть такой миксин:

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

Есть такая переменная:

- 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>';

И есть вывод миксина на странице:
+list_link('header__social-', fb, fb, fb, fb)

То есть мы должны получить четыре элемента списка с svg внутри. Но вместо svg мы получаем дословно строку в том виде, в котором она присвоена переменной, а не html-конструкцию. Тот есть сам вывод переменной в миксине срабатывает, но, получается, переменной присвоено не то, что нужно. Хотя судя по документации, такая история должна нормально срабатывать. Но не срабатывает. Подскажите рабочий вариант, пжлст.

Answer 1

[kreoTech]

Приветствую.
Если я правильно понял описанную проблему, у вас происходит вывод экранированной строки. Где все HTML теги превращаются просто в текстовые символы, а не в управляющие.

Это поведение Pug действует по умолчанию и служит для обеспечения безопасности при возможном использовании этого шаблонизатора на продакшене.

Чтобы избежать такого поведения надо использовать вместо вашего варианта, такой:
li(class= classname + 'item')!= item

Обратите внимание на восклицательный знак перед знаком "равно".

Comments

[Евгений Журов]

Ага, вас понял, спасибо! Сегодня попробую.