How to make jade mixin for svg?

Question

Pug

Good day!
I made this mixin:

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

To use it this way:

ul
  li
    +use(pencil)

And to get this as a result:

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

But this is what I get as a result:

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

Am I doing something wrong? Tell!

Answer 1

Solution of the problem:

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

Answer 2

Enclose the name in quotation marks
As a result

- var svg = "images/icons.svg" 

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