.si, .si::before {
  display: inline-block;
  width: 1.25em;
  line-height: 1;
  box-sizing: border-box;
}

.si-2x {
  font-size: 2em;
}

.si-3x {
  font-size: 3em;
}

.si-4x {
  font-size: 4em;
}

.si::before {
  content: '\200b';
  background-repeat: no-repeat;
  background-position: center;
}

@mixin svg-icon($name) {
  .si-#{$name}::before {
    background-image: url("../img/icon/#{$name}.svg");
  }
}

@include svg-icon('gitea');
@include svg-icon('jitsi');
@include svg-icon('mastodon');
@include svg-icon('matrix');
@include svg-icon('opencollective');
@include svg-icon('threema');
@include svg-icon('xmpp');