如何使用外部文件中的css内联svg

Question

我有一个svg sprite表我已经创建了，我使用before参数在我的页面上使用它，因为我将它用于我的div按钮。有比这更多的CSS，但这是重要的一点。

.logout_button::before,
.vat_button::before{
    content: "";
    width: 1.563em;
    height: 1.563em;
    background: url("../../images/buttons/test.svg") 0px 0px no-repeat;
    float: left; 
    margin: -3px 10px 0px 0;
    background-size: 12.5em 12.5em;
}

以前我使用的是png，但我希望能够更改按钮图标的颜色，因此决定更改为svg以克服此问题。 问题是我无法使用此方法更改css的颜色。

我相信如果我使用内联svg我可以改变css，但问题是这个。我的svg sprite svg是60k，我不想要一大堆代码来控制我的css文件。

有没有办法在我的css中将svg包含在一个单独的文件中，而我的css文件中没有一堆内联代码。

我真的不想为此使用jQuery，只要css是可能的。

我搜索了一个搜索到的答案，但似乎没有任何结果。

将我的svg添加到html不是一个选项。它必须作为背景图像在css中。

只是想补充一点，我不想使用css掩码，因为它们在很多浏览器中是不兼容的，并且需要做更多的工作才能让它工作。