Как использовать SVG-спрайт по умолчанию, если идентификатор не найден

Question

У меня есть спрайт SVG и список значков / логотипов в моей базе данных.

Я перебираю их все и использую шаблонизатор для генерации своих иконок, таких как:

<div class="partsvg__container">
  <svg class="partsvg__wt-icon partsvg__wt-icon--{{icon}}">
    <use xlink:href="svg/icons.svg#wt-icon-{{icon}}"></use>
  </svg>
</div>

У меня может не быть SVG для каждого элемента в базе данных, и в этом случае шаблон отображает пустое пространство.

Как мне сделать так, что если (например) svg/icons.svg#wt-icon-stackru несмотря на то, что он не отображается по умолчанию (то есть: svg/icons.svg#wt-icon-default)?

Answer 1

Я нашел решение!
Вы можете вставить символ в свой svg для «не найденного случая». Таким образом, если символ не найден, на заднем плане будет отображаться заполнитель.

      <div class="partsvg__container">
  <svg class="partsvg__wt-icon partsvg__wt-icon--{{icon}}">
    <use xlink:href="svg/icons.svg#wt-icon-{{'Placeholder'}}"></use>
    <use xlink:href="svg/icons.svg#wt-icon-{{icon}}"></use>
  </svg>
</div>