使用Stylus CSS预处理器，将SVG嵌入background-image属性，并能够通过变量设置fill属性

Question

使用Stylus预处理器，我希望在background-image属性中嵌入内联SVG代码（而不是外部文件），这样我就可以在CSS中设置SVG的fill属性通过Stylus变量。

我已经研究过Stylus'url和embedurl方法，但在我看来，它们只适用于外部文件，我不知道如何将我的需求整合到用它们设置fill属性。

当前（工作但讨厌）尝试

我有一个有效的解决方案，但它很难看，我确信有一种更简单，更清洁的方法，我找不到。

我目前的努力遵循已删除编码SVG的不相关部分。

myColorVariable = #FF0000

...

background-image 'url("[...]fill%3D%22%23%s%22[...]")' % unquote(slice(unquote(""+myColorVariable),1))

使用完整的SVG：

myColorVariable = #FF0000

...

background-image 'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20data-icon%3D%22thumb-up%22%20width%3D%2232%22%20height%3D%2232%22%20data-container-transform%3D%22scale%281%201%20%29%20translate%280%20%29%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22%23%s%22%3E%3Cpath%20d%3D%22M17.688%200c-.4%200-.688.313-.688.813v2.78c0%203-2.912%206.32-4.813%208.22C11.287%2012.513%2010.2%2013%209%2013v17s2%201%205%201h11.187c.9%200%201.725-.605%202.125-1.405%200%200%203.8-10.494%204.5-13.594.1-.4.094-.61.094-.81.1-1.2-.92-2.19-2.22-2.19H22.5c-1.2%200-2.19-1.112-2.19-2.312C20.31%209.488%2022%207%2022%204V2.5C22%201.1%2020.9%200%2019.5%200h-1.814zM0%2013l2%2019h5V13H0zm5%2016c.6%200%201%20.4%201%201s-.4%201-1%201-1-.4-1-1%20.4-1%201-1z%22/%3E%3C/svg%3E")' % unquote(slice(unquote(""+myColorVariable),1))

的问题：

• 它似乎只适用于最新版本的Stylus。例如，它在Codepen上不起作用，但它在我的Grunt设置中起作用，在"Try Stylus Online" section of the Stylus website中输入以下内容表示它输出了预期的内容。

  c = #FF0000
  cString = "" + #FF0000
  cMinusHash = slice(cString, 1)
  cWithEncodedHash = "%23" + cMinusHash
  
  unquote(cWithEncodedHash);
  

• 我必须在我的变量上有一系列字符串操作方法，以尝试将其转换为字符串并删除十六进制颜色的哈希标记。我必须删除十六进制颜色的哈希标记，因为哈希标记需要编码，因此包含在SVG字符串中。两种unquote方法的必要性对我来说没有意义，但它是有效的。此外，空字符串与颜色变量的串联似乎是将颜色转换为字符串的一种非常黑客的方式，但我无法找到更好的方法。
• SVG代码必须使用引号（双或单）编码才能使Stylus字符串插值工作，这在跨浏览器兼容性要求的编码之上增加了麻烦。

如果它有用，here is my Codepen我试图演示我的解决方案在我的设置中有效但在Codepen上没有。

如果我遗漏必要的信息或做错事，请原谅我;这只是我的第二个问题。我很乐意解决我需要的任何问题。

谢谢！