SVG sprite. Referencing an SVG icon using <defs>, <g> and <use>

Question

I am trying to insert an SVG icon in HTML for later use, however when I reference it by <use> it doesn't appear on the webpage. I copy an the icon's SVG code and insert it in the html file. Then I move the icon's path to a separate .svg file. When I reference it later, it doesn't show up. This is a task for my studies, so I'm supposed to use this exact principle and tags: <defs> <g> and <use>. The first part of the code is in HTML, the second is in a separate .svg file.

    <svg
      width="23"
      height="23"
      viewBox="0 0 23 23"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <use xlink:href="#vector-icons.svg#phone"></use>
    </svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="phone">
      <path
       d="M13.9381 5C14.9149 5.19057 15.8125 5.66826 16.5162 6.37194C17.2199 7.07561 17.6976 7.97326 17.8881 8.95M13.9381 1C15.9674 1.22544 17.8597 2.13417 19.3044 3.57701C20.749 5.01984 21.6601 6.91101 21.8881 8.94M20.8881 16.92V19.92C20.8892 20.1985 20.8322 20.4742 20.7206 20.7293C20.6091 20.9845 20.4454 21.2136 20.2402 21.4019C20.035 21.5901 19.7927 21.7335 19.5289 21.8227C19.265 21.9119 18.9855 21.9451 18.7081 21.92C15.631 21.5856 12.6751 20.5341 10.0781 18.85C7.66194 17.3147 5.61345 15.2662 4.07812 12.85C2.38809 10.2412 1.33636 7.27099 1.00812 4.18C0.983127 3.90347 1.01599 3.62476 1.10462 3.36162C1.19324 3.09849 1.33569 2.85669 1.52288 2.65162C1.71008 2.44655 1.93792 2.28271 2.19191 2.17052C2.44589 2.05833 2.72046 2.00026 2.99812 2H5.99812C6.48342 1.99522 6.95391 2.16708 7.32188 2.48353C7.68985 2.79999 7.93019 3.23945 7.99812 3.72C8.12474 4.68007 8.35957 5.62273 8.69812 6.53C8.83266 6.88792 8.86178 7.27691 8.78202 7.65088C8.70227 8.02485 8.51698 8.36811 8.24812 8.64L6.97812 9.91C8.40167 12.4135 10.4746 14.4864 12.9781 15.91L14.2481 14.64C14.52 14.3711 14.8633 14.1858 15.2372 14.1061C15.6112 14.0263 16.0002 14.0555 16.3581 14.19C17.2654 14.5286 18.2081 14.7634 19.1681 14.89C19.6539 14.9585 20.0975 15.2032 20.4146 15.5775C20.7318 15.9518 20.9003 16.4296 20.8881 16.92Z"
        stroke="white"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </g>
  </defs>
</svg>

Answer 1

1. If the icon code is in a separate SVG file You can add a sprite with icons to HTML, which is in a separate SVG file using <object>

<object type="image/svg+xml" data="vector-icons.svg"></object>   

Then call the required icon from the sprite by the unique identifier using <use>

<svg viewBox="0 0 23 23">
     <use xlink:href="vector-icons.svg#phone" ></use> 
</svg>

2. If the icon code is added to HTML inline, then you can use this icon many times anywhere on the web page using <use>

<style>
svg  use:hover {
fill:red;
} 
</style>
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23">
  <defs>
    <g id="phone">
      <path
       d="M13.9 5C14.9 5.2 15.8 5.7 16.5 6.4 17.2 7.1 17.7 8 17.9 9M13.9 1C16 1.2 17.9 2.1 19.3 3.6 20.7 5 21.7 6.9 21.9 8.9M20.9 16.9V19.9C20.9 20.2 20.8 20.5 20.7 20.7 20.6 21 20.4 21.2 20.2 21.4 20 21.6 19.8 21.7 19.5 21.8 19.3 21.9 19 21.9 18.7 21.9 15.6 21.6 12.7 20.5 10.1 18.9 7.7 17.3 5.6 15.3 4.1 12.9 2.4 10.2 1.3 7.3 1 4.2 1 3.9 1 3.6 1.1 3.4 1.2 3.1 1.3 2.9 1.5 2.7 1.7 2.4 1.9 2.3 2.2 2.2 2.4 2.1 2.7 2 3 2H6C6.5 2 7 2.2 7.3 2.5 7.7 2.8 7.9 3.2 8 3.7 8.1 4.7 8.4 5.6 8.7 6.5 8.8 6.9 8.9 7.3 8.8 7.7 8.7 8 8.5 8.4 8.2 8.6L7 9.9C8.4 12.4 10.5 14.5 13 15.9L14.2 14.6C14.5 14.4 14.9 14.2 15.2 14.1 15.6 14 16 14.1 16.4 14.2 17.3 14.5 18.2 14.8 19.2 14.9 19.7 15 20.1 15.2 20.4 15.6 20.7 16 20.9 16.4 20.9 16.9Z"
        stroke="white"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </g>
  </defs> 
  
</svg>  
   
<svg>
<use xlink:href="#phone"></use>
</svg>