SCSS创建函数

@function url-svg($icon) {
  @return url("data:image/svg+xml;utf8,#{str-replace($icon, "#", "%23")}");
}

scss使用

url-svg('<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.125 0H1.875C0.84082 0 0 0.84082 0 1.875V10.3125C0 11.3467 0.84082 12.1875 1.875 12.1875H4.6875V14.6484C4.6875 14.9355 5.01563 15.1025 5.24707 14.9326L8.90625 12.1875H13.125C14.1592 12.1875 15 11.3467 15 10.3125V1.875C15 0.84082 14.1592 0 13.125 0Z" fill="#8A8A8F"/></svg>')

css生成

url('data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.125 0H1.875C0.84082 0 0 0.84082 0 1.875V10.3125C0 11.3467 0.84082 12.1875 1.875 12.1875H4.6875V14.6484C4.6875 14.9355 5.01563 15.1025 5.24707 14.9326L8.90625 12.1875H13.125C14.1592 12.1875 15 11.3467 15 10.3125V1.875C15 0.84082 14.1592 0 13.125 0Z" fill="%238A8A8F"/></svg>')

str-replace函数从bootstrap开始使用。

您可以将SVG存储在一个变量中。然后根据需要操作SVG字符串(即设置宽度、高度、颜色等)。然后使用结果来设置背景，例如:

$circle-icon-svg: '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" /></svg>';

$icon-color: #f00;
$icon-color-hover: #00f;

@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);

    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }

    @return $string;
}

@function svg-fill ($svg, $color) {
  @return str-replace($svg, '<svg', '<svg fill="#{$color}"');
}

@function svg-size ($svg, $width, $height) {
  $svg: str-replace($svg, '<svg', '<svg width="#{$width}"');
  $svg: str-replace($svg, '<svg', '<svg height="#{$height}"');

  @return $svg;
}

.icon {
  $icon-svg: svg-size($circle-icon-svg, 20, 20);

  width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color)}');

  &:hover {
    background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color-hover)}');
  }
}

我也做了一个演示，http://sassmeister.com/gist/4cf0265c5d0143a9e734。

这段代码对SVG做了一些假设，例如< SVG />元素没有现有的填充颜色，宽度和高度属性都没有设置。由于输入是在SCSS文档中硬编码的，因此执行这些约束非常容易。

不要担心代码复制。Gzip压缩使得这种差异可以忽略不计。

下面是另一种解决方案，使用渐变和单色图标作为背景和背景混合模式来着色图标。 它要求背景色是白色的，否则整个背景都会上色。我只在Chrome上进行了测试。

.colored-background { background-image: linear-gradient(45deg, green, green), url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-color: #fff; background-blend-mode: lighten, normal; background-repeat: no-repeat; background-position: center, center right .8em; background-size: auto, 0.6em; color: red; display: inline-flex; align-items: center; padding: 0.5em; padding-right: 2em; height: 1.6em; width: auto; border: 1px solid gray; } .bg { background-color: #ddd; padding: 1em; } <div class="bg"> <div class="colored-background">green icon from black svg</div> </div>

如果你想用简单的方式从白色切换到黑色或类似的，试试这个:

filter: invert(100%);

与这里链接的封闭式问题有关，但与这个问题没有直接关系。

如果有人需要替换src就像链接的问题一样，这里已经有答案了。此外，如果有人来自Vue, src路径是改变编译，我提出了一个不同的解决方案。

在我的例子中，父元素是一个链接，但实际上它可以是任何东西。

<a
  v-for="document in documents" :key="document.uuid"
  :href="document.url"
  target="_blank"
  class="item flex align-items-center gap-2 hover-parent"
>
  <img alt="documents" class="icon" src="../assets/PDF.svg" />
  <strong>{{ document.name }}</strong>
  <img class="itemImage ml-auto hide-on-parent-hover" src="../assets/download-circular-button.svg" />
  <img class="itemImage ml-auto show-on-parent-hover" src="../assets/download-circular-button-hover.svg" />
</a>

.hover-parent       .show-on-parent-hover { display: none }
.hover-parent       .hide-on-parent-hover { display: block }
.hover-parent:hover .show-on-parent-hover { display: block }
.hover-parent:hover .hide-on-parent-hover { display: none }

因此，这里的解决方案不是更改src属性，而是将两个<img>元素放在DOM中，并且只显示需要的那个元素。

如果你没有一个应该悬浮在上面的父元素，你可以简单地把两个图像都包装在一个div中。

<div class="hover-parent" >
  <img class="hide-on-parent-hover" src="../assets/download-circular-button.svg" />
  <img class="show-on-parent-hover" src="../assets/download-circular-button-hover.svg" />
</div>

你也可以将CSS更改为以下格式，因此.hover-parent父级必须是直接父级:

.hover-parent       > .show-on-parent-hover { display: none }
.hover-parent       > .hide-on-parent-hover { display: block }
.hover-parent:hover > .show-on-parent-hover { display: block }
.hover-parent:hover > .hide-on-parent-hover { display: none }

对于单色背景，您可以使用带有掩码的SVG，其中应该显示背景颜色

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" >
    <defs>
        <mask id="Mask">
            <rect width="100%" height="100%" fill="#fff" />
            <polyline stroke-width="2.5" stroke="black" stroke-linecap="square" fill="none" transform="translate(10.373882, 8.762969) rotate(-315.000000) translate(-10.373882, -8.762969) " points="7.99893906 13.9878427 12.7488243 13.9878427 12.7488243 3.53809523"></polyline>
        </mask>
    </defs>
    <rect x="0" y="0" width="20" height="20" fill="white" mask="url(#Mask)" />
</svg>

然后使用这个CSS

background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url(your/path/to.svg);
background-color: var(--color);