How to throw all the contents of svg images into a file and import it into the main html?

Question

HTML

How to throw all the content of svg images into a separate file, import it into the main html, so that later use svg images using a tag and thus not clog the main code with huge svg styles?

Answer 1

Making a character sprite

sprite.svg

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="0"
    height="0"
    style="position:absolute">

    <symbol id="i-info" viewBox="0 0 24 53">
        <path fill-rule="evenodd"
            clip-rule="evenodd"
            d="M0 16.6472C0 19.117 6.83992 17.5307 8.71918 22.8157C9.02356 23.6717 9.07117 24.33 9.01033 25.2678C8.95139 26.1764 8.65722 26.8974 8.37127 27.57L2.30835 41.8859C1.59726 43.5717 1.02151 44.6056 1.02151 46.8256C1.02151 52.3906 6.11696 52.5445 10.7723 52.5445C13.2274 52.5445 15.0646 52.1655 17.3285 51.6294C18.8049 51.2798 22.5012 50.6714 22.2197 49.1735C22.0704 48.3789 20.8287 47.8641 20.0707 47.6062C18.1098 46.939 16.8139 46.5091 15.5819 44.6443C14.7153 43.3325 14.6726 42.3873 14.6726 40.9307C14.6726 39.9473 15.1202 39.0355 15.4288 38.3038C15.7601 37.5184 16.1064 36.7437 16.4503 35.9282C17.1264 34.3254 17.8157 32.7376 18.5068 31.1018C19.3018 29.2197 20.8418 25.8336 21.5574 23.962C22.3606 21.8616 22.5746 19.2728 21.3563 17.2656C20.9099 16.5302 20.234 15.9176 19.3446 15.5642C17.7774 14.9415 14.9967 14.5621 12.8117 14.5391C12.2078 14.5328 11.7793 14.4232 11.0479 14.4448C10.6042 14.4578 10.6228 14.5153 10.2156 14.5361C9.88526 14.5529 9.52354 14.5185 9.19316 14.5352C8.11557 14.5898 6.82609 14.8073 5.83743 14.9632C4.59249 15.1595 0 15.6578 0 16.6472ZM12.2581 5.12142C12.2581 8.85849 16.3288 11.3274 20.0208 9.74856C20.273 9.64069 20.6122 9.44198 20.8421 9.29492C23.3021 7.72142 24.0191 3.87691 21.5683 1.57968C19.8597 -0.0217601 17.4431 -0.441426 15.3513 0.485421C14.1185 1.03168 13.3069 1.91689 12.7522 3.03802C12.5016 3.54467 12.2581 4.41535 12.2581 5.12142Z"
            fill="currentColor"/>
    </symbol>
    <symbol id="i-star" viewBox="0 0 19 18">
        <path d="M9.5 0L11.6329 6.56434H18.535L12.9511 10.6213L15.084 17.1857L9.5 13.1287L3.91604 17.1857L6.04892 10.6213L0.464963 6.56434H7.36712L9.5 0Z"
            fill="currentColor"/>
    </symbol>
</svg>

Then use it. You can copy-paste to the body of the page, or you can leave it in an external file (see support, it seems only IE does not understand external files there).

<svg class="icon">
  <use xlink:href="/img/sprite.svg#i-star" xmlns:xlink="http://www.w3.org/1999/xlink"/>
</svg>