Why doesn't interpolation work?

Question

Pug

icon file:

mixin icon(iconName)
  svg&attributes(attributes)
    use(xlink:href='##{iconName}')

menu file:

include ../icon/icon

mixin menu(menu)
  nav.menu
    each item in menu
      a(href='##{item[0]}').menu__item= item[0]
      +icon('#{item[1]}').menu__icon

header file:

include ../menu/menu

mixin header()
  header
    .menu
      +menu(
        [
          ["Home", "menu-home"],
          ["About", "menu-user"],
          ["Contact", "menu-email"]
        ]
      )

Outcome:

<nav class="menu"> 
  <a href="#Home" class="menu__item">Home</a>
  <svg class="menu__icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="##{item[1]}"></use>
  </svg>
  <a href="#About" class="menu__item">About</a>
  <svg class="menu__icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="##{item[1]}"></use>
  </svg>
  <a href="#Contact" class="menu__item">Contact</a>
  <svg class="menu__icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="##{item[1]}"></use>
  </svg>
</nav>

Why doesn't interpolation work on svg element? Where did I go wrong?

Answer 1

When passing a parameter to a mixin, it does not need to be interpolated, just pass the value of the variable:

mixin icon(iconName)
  svg&attributes(attributes)
    use(xlink:href='##{iconName}')

mixin menu(menu)
  nav.menu
    each item in menu
      a(href='##{item[0]}').menu__item= item[0]
      +icon(item[1]).menu__icon

mixin header()
  header
    .menu
      +menu(
        [
          ["Home", "menu-home"],
          ["About", "menu-user"],
          ["Contact", "menu-email"]
        ]
      )

+header