Пользовательский цвет для SVG-маркера

Question

У меня есть следующий CSS

ul {
  list-style: none;
}

ul > li::before {
  content: "";
  height: 1em;
  width: 1em;
  display: block;
  float: left;
  margin-left: -1.5em;
  margin-top: 7px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  transition: background-size 0.3s;
  -webkit-transition: background-size 0.3s;
}

ul > li::before {
  background-image: url(../images/check-mark.svg);
}

Что отлично работает с приведенным ниже HTML

  <ul>
    <li>first</li>
    <li>last</li>
  </ul>

Теперь я хочу добавить второй список, используя ту же галочку, но другого цвета.

Итак, я обновил свой код следующим образом

HTML

   <ul class="blue">
     <li>first</li>
     <li>last</li>
   </ul>

CSS

svg {
  fill: currentColor;
}

ul.blue > li::before {
  color: blue;
}

Но галочка все еще черная. Как мне поставить галочки в списке blue синим цветом?

Answer 1

Вы не можете изменить цвет изображения только цветом: синий;Может быть, это сработает:

ul.blue > li::before {
fill: blue;
}

Или просто найдите другое изображение с синей галочкой и добавьте его так же, как

ul.blue > li::before {
  background-image: url(../images/blue-check-mark.svg); 
}