Is there a problem with svg in site loading?

Question

Layout

I'm making up a site and the question arose of using svg.
Is it a problem (for site loading speed) to have svg icons in html in tagged form? Approximately as in the picture

(and this is not the end of DELEKO
) , everything is decent in the code itself, that is, icons from the images folder are connected by name, which consists of "x -icon-name " , something like this:
<x-my-icon class="..."/>

Answer 1

1. Do not add to the body of the site what should not be there.
2. Embedding svg in the body of the page is normal and generally good (if there is no extra garbage, of course).
3. "x-my-icon" - if this is a web component, or a component based on some thread of the Vue type, then everything is OK, otherwise it's a game.

Answer 2

Ideally, this should be ONLY if it is a component generated programmatically, that is, each time different content, in other cases - take it to a file and load it from a file.
This will give a) cacheability, and b) asynchronous loading.