Отображение SVG inline, когда часть содержимого: url () и изменение его цвета

Question

У меня есть модуль, в котором я хочу, чтобы пользователь мог выбирать, какой тип стрелки (стиль списка) он хочет.Эта опция colorpicker, поэтому, если пользователь выбирает синий HEX, svg будет stroke: blue.

Однако я не уверен, как этого можно достичь, когда стрелка liпечатается через псевдо.

Например, вот моя разметка:

ul {
  margin: 0;
}
ul li {
  list-style-type: none;
  padding-left: 15px;
}
ul li:before {
  content: url("images/bullet-point.svg");
  display: inline-block;
  width: 15px;
  height: 15px;
}

<div class="parent">
	<ul>
  	<li>Text</li>
    <li>Text</li>
 </ul>
</div>

bullet-point.svg выглядит так:

.st0{
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:10;
  enable-background:new;
  fill: none;
  stroke-width: 2px;
  stroke: blue;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 13 12" style="enable-background:new 0 0 13 12;" xml:space="preserve" width="15px">
<polyline class="st0" points="1,1 6,6 1,11 "/>
<polyline class="st0" points="7,1 12,6 7,11 "/>
</svg>

То, что я пытаюсь сделать (и то, что я считаю лучшим подходом здесь, я могу ошибаться), это напечатать bullet-point.svg inline.Т.е. возможно ли ...

content: url("images/bullet-point.svg");

... стать (что-то эквивалентное):

 content: url(<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 13 12" style="enable-background:new 0 0 13 12;" xml:space="preserve" width="15px"><polyline class="st0" points="1,1 6,6 1,11 "/><polyline class="st0" points="7,1 12,6 7,11 "/></svg>);

Я думаю, что таким образом я смогу манипулировать.st0 класс, чтобы изменить его stroke на значение, которое пользователь выбирает в colorpicker.

Answer 1

Очень простое решение будет использовать content: "\0bb";, также вы можете использовать "\0226b" вместо.

ul {
  margin: 0;
}
ul li {
  list-style-type: none;
  padding-left: 15px;
}
ul li:before {
  content: "\0bb";
  color: blue;
  font-size: 1.5em;;
  display: inline-block;
  width: 15px;
  height: 15px;
}

<div class="parent">
	<ul>
  	<li>Text</li>
    <li>Text</li>
 </ul>
</div>

В качестве альтернативы вы можете использовать svg в качестве uri данных:

ul {
  margin: 0;
}
ul li {
  list-style-type: none;
  padding-left: 15px;
}
ul li:before {
  content: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 13 12' width='15px'%3E%3Cg stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' fill='none' stroke-width='2' stroke='blue'%3E%3Cpolyline points='1,1 6,6 1,11 '/%3E%3Cpolyline points='7,1 12,6 7,11 '/%3E%3C/g%3E%3C/svg%3E");
  color: blue;
  font-size: 1.5em;;
  display: inline-block;
  width: 15px;
  height: 15px;
}

<div class="parent">
	<ul>
  	<li>Text</li>
    <li>Text</li>
 </ul>
</div>

Чтобы преобразовать SVG в данные URI, вы можете использовать этот SVG-кодировщик