title: How to pass an svg in a ternary operator?
body: <p>I have a very expansive custom input and one of the customizations is autocomplete functionality.
  In the interest of not sharing too much, I will just share the bit of the code that is for the suggestion drop down on the autocomplete.
  I have a <em>suggestions</em> value and a <em>searchHistory</em> value that is based on the cached search history of the user. To differentiate the two I just want to have a clock or some sort of svg in there. I'm able to render an emoji, but that doesn't fit my design theme so I want to use an clock svg from the library I'm using.</p>
  <p>How can I pass that SVG in this ternary operator? I've seen people using <code>'&lt;img :src&quot;../something&quot;/&gt;'</code>, but that syntax doesn't seem to work for me either.</p>
  <p>Any ideas on how/if I can make this happen?</p>
  <p>Cheers!</p>
  <p><strong>CAutocompleteList.vue</strong></p>
  <pre><code>&lt;template&gt;
    &lt;ul&gt;
      &lt;li
        v-for=&quot;suggestion in filteredSuggestions&quot;
        :key=&quot;suggestion&quot;
        @click=&quot;$emit('selectSuggestion', suggestion)&quot;
      &gt;
        {{ suggestion }} {{ searchHistory.includes(suggestion) ? '⏱' : '' }}
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;!-- &lt;IconPowerSupplyOne theme=&quot;outline&quot; size=&quot;100%&quot; fill=&quot;#4771FA&quot; /&gt; --&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { defineComponent, PropType } from 'vue'
  
  export default defineComponent({
    props: {
      filteredSuggestions: { type: Array as PropType&lt;string[]&gt;, required: true },
      searchHistory: { type: Array as PropType&lt;string[]&gt;, required: true },
    },
    emits: ['selectSuggestion'],
    setup() {
      return {}
    },
  })
  &lt;/script&gt;
  </code></pre>