Как получить svg-изображение через svg-спрайт?

Question

[righto]

Здравствуйте. Никак не получается вывести иконку из svg-спрайта. Вот она:

<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="8.51465" width="12" height="12" rx="2" transform="rotate(-45 0 8.51465)" fill="url(#paint0_angular_12623_309)"/>
<defs>
<radialGradient id="paint0_angular_12623_309" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.3033 9.14377) rotate(135) scale(15.1875)">
<stop stop-color="#FFBB87"/>
<stop offset="1" stop-color="#FFA45E"/>
</radialGradient>
</defs>
</svg>

Если открыть ее в браузере, все гуд. Если код спрайта в том же файле, где вызов иконки - тоже все показывает. Но, если вызывать иконку вот так:

<svg class="icon">
  <use xlink:href="sprites.svg#t"></use>
</svg>

то ее не видно. В sprites.svg такой код:

<svg width="0" height="0" class="hidden">
  <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" id="t">
    <rect y="8.51465" width="12" height="12" rx="2" transform="rotate(-45 0 8.51465)" fill="url(#paint0_angular_12623_309)"></rect>
    <defs>
      <radialGradient id="paint0_angular_12623_309" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.3033 9.14377) rotate(135) scale(15.1875)">
        <stop stop-color="#FFBB87"></stop>
        <stop offset="1" stop-color="#FFA45E"></stop>
      </radialGradient>
    </defs>
  </symbol>
</svg>

В чем может быть причина ошибки?

Comments

[Ankhena]

Вариантов не много: путь неверный или размеры нулевые.

[righto]

Путь правильный, размеры меняла, не помогло, делаю на хостинге

[righto]

Ankhena, вот https://portfolio-rrrgh1.ru/test/

[Ankhena]

righto, а точно, там же градиент.
Из внешнего файла работать не будет.

Я последнее время не использую спрайты, а использую кастомные свойства и инлайню в css.

[righto]

Ankhena, спасибо