Here’s some code from the “algolia-autocomplete-example-instantsearch” demo. I would just like to externalize the SVGs into an image folder and import them dynamically. This would make code more readable, modular and maintanable.
How can I do this ?
How can I break down the marge html... template into smaller pieces and concatenate them together ?
templates: {
item: (hit, { html, components }) => html`
<article class="hit">
<div class="hit-image">
<img src="${hit.image}" alt="${hit.name}" />
</div>
<div>
<h1>${components.Snippet({ hit, attribute: 'name' })}</h1>
<div>
By <strong>${hit.brand}</strong> in
<strong>${hit.category}</strong>
</div>
</div>
<div
style="
display: grid;
grid-auto-flow: column;
justify-content: start;
align-items: center;
gap: 8px;
"
>
${hit.rating > 0 &&
html`
<div
style="
display: grid;
grid-auto-flow: column;
justify-content: start;
align-items: center;
gap: 4px;
"
>
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="#e2a400"
stroke="#e2a400"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
/>
</svg>
${hit.rating}
</div>
`}
<div
style="
display: grid;
grid-auto-flow: column;
justify-content: start;
align-items: center;
gap: 4px;
"
>
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
style="
position: relative;
top: 1px;
"
>
<path
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
></path>
</svg>
<span>${hit.comments}</span>
</div>
</div>
</article>
`,
},