What is the best way to write mixin in jade for icons?

Question

Pug

Hello.
So I'm starting to learn Jade and there was such a question. There is a similar structure of font awesome icons. The design is cumbersome and it seems to me that it needs to be arranged in a mixin, but I can’t guess how to do it correctly. Or maybe not a mixin at all, but something else?

.social-icons
  span.fa-stack.fa-lg
    i.fa.fa-circle-thin.fa-stack-2x
    i.fa.fa-facebook.fa-stack-1x
  span.fa-stack.fa-lg
    i.fa.fa-circle-thin.fa-stack-2x
    i.fa.fa-google-plus.fa-stack-1x
  span.fa-stack.fa-lg
    i.fa.fa-circle-thin.fa-stack-2x
    i.fa.fa-twitter.fa-stack-1x
  span.fa-stack.fa-lg
    i.fa.fa-circle-thin.fa-stack-2x
    i.fa.fa-linkedin.fa-stack-1x

Answer 1

mixin fa-stack(data)
  span.fa-stack.fa-lg&attributes(attributes)
    block

mixin fa-icon(data)
  i.fa&attributes(attributes)

+fa-stack()
  +fa-icon().fa-circle-thin.fa-stack-2x
  +fa-icon().fa-facebook.fa-stack-1x

or so

mixin fa-stack(data)
  span.fa-stack.fa-lg&attributes(attributes)
    block

mixin fa-icon(data)
  - var classList = ['fa']

  if attributes.icon
    - classList.push(classList[0] + '-' + attributes.icon)
    
  if attributes.stack
    - classList.push(classList[0] + '-stack-' + attributes.stack)

  i(class=classList)


+fa-stack()
  +fa-icon(icon="circle-thin" stack="2x")
  +fa-icon(icon="facebook" stack="1x")