Как сделать jade-миксин для svg?

Question

[Moe Green]

Доброго времени суток!

Сделал такой миксин:

mixin use(name)
  svg.name(role="img")
    use(xlink:href="#{svg}#name")

Чтобы использовать его таким образом:

ul
  li
    +use(pencil)

И чтобы получить в результате такое:

<svg role="img" class="pencil">
  <use xlink:href="images/icons.svg#pencil"></use>
</svg>

Но в результате получается у меня только так:

<svg role="img" class="name">
  <use xlink:href="images/icons.svg#name"></use>
</svg>

Что-то я делаю не так? Подскажите!

Answer 1

[Moe Green]

Решение вопроса:

mixin use(name)
  svg(class="#{name}" role="img")
    use(id="#{name}" xlink:href="#{svg}##{name}")

Answer 2

[monochromer]

Название заключайте в кавычки
+use("pencil")

В итоге так

- var svg = "images/icons.svg" 

mixin use(name)
  svg.name(role="img")
    use(xlink:href="#{svg}##{name}")
      
+use("pencil")

Comments

[Moe Green]

нет, результат тот же (

[monochromer]

Valery Semenencko: подправил на use(xlink:href="#{svg}##{name}")

[Moe Green]

monochromer: да, так будет красивее. у себя тоже исправил.