zotero/scss/abstracts/_svgicon.scss

@mixin svgicon($icon, $color, $size: "16", $prefix: false, $has2x: false, $light-dark: false) {
    @if ($color == 'universal') {
        background:
            -make-icon-background($icon, $color, $size, $prefix, $has2x) no-repeat center/contain;
        
        @if ($light-dark) {
            @include light-dark(fill, nth($light-dark, 1), nth($light-dark, 2));
        }
        @else {
            fill: currentColor;
        }
        -moz-context-properties: fill, fill-opacity;
    }
    @else {
        background:
            -make-icon-background($icon, $color, $size, $prefix, $has2x) no-repeat center/contain,

            // Invisible backgrounds to preload all variants:
            -make-icon-background($icon, 'white', $size, $prefix, $has2x) center/0,
            -make-icon-background($icon, 'light', $size, $prefix, $has2x) center/0,
            -make-icon-background($icon, 'dark', $size, $prefix, $has2x) center/0;
    }
}

@mixin svgicon-menu($icon, $color, $size: "16", $prefix: false, $has2x: false, $light-dark: false) {
    // Disable 2x because list-style-image doesn't support image-set
    list-style-image: -make-icon-background($icon, $color, $size, $prefix, false);
    @if ($color == 'universal') {
        @if ($light-dark) {
            @include light-dark(fill, nth($light-dark, 1), nth($light-dark, 2));
        }
        @else {
            fill: currentColor;
        }
        -moz-context-properties: fill, fill-opacity;
    }
}

@function -make-icon-background($icon, $color, $size, $prefix, $has2x) {
    @if $has2x {
        @if $prefix {
            @return image-set(
                url('chrome://zotero/skin/#{$prefix}/#{$size}/#{$color}/#{$icon}.svg') 1x,
                url('chrome://zotero/skin/#{$prefix}/#{$size}/#{$color}/#{$icon}@2x.svg') 2x
            );
        }

        @else {
            @return image-set(
                url('chrome://zotero/skin/#{$size}/#{$color}/#{$icon}.svg') 1x,
                url('chrome://zotero/skin/#{$size}/#{$color}/#{$icon}@2x.svg') 2x
            );
        }
    }

    @else {
        @if $prefix {
            @return url('chrome://zotero/skin/#{$prefix}/#{$size}/#{$color}/#{$icon}.svg');
        }

        @else {
            @return url('chrome://zotero/skin/#{$size}/#{$color}/#{$icon}.svg');
        }
    }
}