Как правильно указать путь к спрайту?

Question

Сделал спрайт всё хорошо работает на сборке Gulp. Но если открыть файл index.html через папку build иконки не показывает. Думаю проблема в пути. Если смотреть через просмотр кода, можно увидеть что блоки для svg есть, а вот самих svg он найти не может. Все пути перепробовал.

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol width="24" viewBox="0 0 17.625334 24" id="facebook">
        <path d="M17.625 7.7714H13.7902V5.2806C13.7902 4.34518 14.4182 4.12573 14.8582 4.12573H17.5586V0.0137159L13.8344 0C9.70352 0 8.76556 3.06686 8.76556 5.03098V7.7714H6.375V12.0069H8.76556V24H13.7929V12.0096H17.1851L17.625 7.7714Z"/>
    </symbol>
    <symbol viewBox="0 0 24 24" id="instagram">
        <g clip-path="url(#clip0_2_418)">
            <path d="M12 5.76825C8.5638 5.76825 5.76825 8.5638 5.76825 12C5.76825 15.4362 8.5638 18.2293 12 18.2293C15.4362 18.2293 18.2293 15.4338 18.2293 12C18.2317 8.5638 15.4362 5.76825 12 5.76825ZM12 15.8536C9.87422 15.8536 8.14641 14.1258 8.14641 12C8.14641 9.87422 9.87422 8.14641 12 8.14641C14.1258 8.14641 15.8536 9.87422 15.8536 12C15.8536 14.1258 14.1258 15.8536 12 15.8536ZM17.0936 0H6.90637C3.09889 0 0 3.09889 0 6.90637V17.0936C0 20.9011 3.09889 24 6.90637 24H17.0936C20.9011 24 24 20.9011 24 17.0936V6.90637C24 3.09889 20.9035 0 17.0936 0ZM21.6243 17.0936C21.6243 19.5907 19.5907 21.6218 17.0936 21.6218H6.90637C4.4093 21.6218 2.37816 19.5907 2.37816 17.0936V6.90637C2.37816 4.4093 4.4093 2.37816 6.90637 2.37816H17.0936C19.5907 2.37816 21.6218 4.4093 21.6218 6.90637V17.0936H21.6243ZM18.3167 3.96764C17.4188 3.96764 16.6859 4.69808 16.6859 5.59838C16.6859 6.49626 17.4164 7.22912 18.3167 7.22912C19.2146 7.22912 19.9474 6.49869 19.9474 5.59838C19.9474 4.69808 19.2146 3.96764 18.3167 3.96764Z"/>
        </g>
        <defs>
            <clipPath id="clip0_2_418">
                <rect width="24" height="24" fill="white" />
            </clipPath>
        </defs>
    </symbol>
    <symbol viewBox="0 0 24 21.750668" id="twitter">
        <path d="M24 4.55654C23.1169 4.94873 22.168 5.21203 21.1724 5.3327C22.1899 4.72384 22.9688 3.75844 23.3363 2.60928C22.3846 3.17426 21.3288 3.58291 20.2098 3.80506C19.313 2.84789 18.0322 2.25 16.6171 2.25C13.8965 2.25 11.6915 4.45232 11.6915 7.173C11.6915 7.5597 11.7353 7.93544 11.8176 8.29473C7.72575 8.08903 4.09736 6.1308 1.67021 3.14958C1.24786 3.87637 1.00377 4.72384 1.00377 5.62616C1.00377 7.33481 1.87316 8.84051 3.19232 9.72363C2.38601 9.69895 1.62633 9.47679 0.962633 9.10654V9.16962C0.962633 11.5557 2.66027 13.5441 4.9119 13.9966C4.50051 14.1091 4.06445 14.1694 3.61467 14.1694C3.29654 14.1694 2.98937 14.1392 2.69044 14.0816C3.31574 16.0371 5.13404 17.4605 7.28694 17.5017C5.60302 18.8209 3.48303 19.608 1.17381 19.608C0.77614 19.608 0.386699 19.5861 0 19.5395C2.18032 20.9354 4.76654 21.75 7.54748 21.75C16.6034 21.75 21.5564 14.2489 21.5564 7.74346C21.5564 7.52954 21.5509 7.31835 21.5427 7.10717C22.5053 6.41055 23.3418 5.54388 24 4.55654Z"/>
    </symbol>
</svg>

<div class="third-path__social">
      <a href="#" class="third-path__social-item">
          <svg class="third-path__social-icon">
              <use xlink:href="/sprite.svg#twitter"></use>
          </svg>
      </a>
      <a href="#" class="third-path__social-item">
          <svg class="third-path__social-icon">
              <use xlink:href="/sprite.svg#instagram"></use>
          </svg>
      </a>
      <a href="#" class="third-path__social-item">
          <svg class="third-path__social-icon">
              <use xlink:href="/sprite.svg#facebook"></use>
          </svg>
      </a>
</div>

БЛОГ НА HUSL

Как правильно указать путь к спрайту?

Ответы (0 шт):