1

I have a sprite of SVGs and a list of icons/logos in my database.

I loop through all of them and use a templating engine to generate my icons, such as:

<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>

I might not have a SVG for every item in the database, and in that case the template renders an empty space.

How do I do so that if (for instance) svg/icons.svg#wt-icon-stackoverflow is not present in the spite, to still show a default one (ie: svg/icons.svg#wt-icon-default)?

Radu Chiriac
  • 1,374
  • 3
  • 18
  • 34
  • 1
    Why not just have a default icon (`wt-icon-default`), and set the `icon` property to `"default"` for any records for which you don't have an icon? – Paul LeBeau Feb 15 '19 at 13:30
  • I know, but there is no connection between the database clients and how many svgs the design team managed to implement. – Radu Chiriac Feb 15 '19 at 13:57

1 Answers1

2

I found a solution!
You can insert a symbol in your svg for the "not found case". In this way, if the symbol isn't found, a placeholder will be draw in the background.

<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>
iFederx
  • 845
  • 1
  • 11
  • 16