.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('bars');
@include svg-icon('book');
@include svg-icon('comment-dots');
@include svg-icon('comments');
@include svg-icon('envelope');
@include svg-icon('firefox-browser');
@include svg-icon('gitea');
@include svg-icon('github');
@include svg-icon('hand-holding-heart');
@include svg-icon('home');
@include svg-icon('language');
@include svg-icon('mastodon');
@include svg-icon('matrix');
@include svg-icon('opencollective');
@include svg-icon('search');
@include svg-icon('stackoverflow');
@include svg-icon('server');
@include svg-icon('tags');
@include svg-icon('threema');
@include svg-icon('twitter');
@include svg-icon('users');
@include svg-icon('wifi');
@include svg-icon('xmpp');
@include svg-icon('youtube');