Реагировать и SVG спрайт

Я использую React, и я пытаюсь загрузить значок SVG от спрайта. Мой спрайт такой:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol viewBox="0 0 28.3 28.3" id="square">
      <path d="M.3 30.7h27L13.8 3.8zM126.3-51.7c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16z" />
      <path d="M0 28.3h28.3L14.2 0 0 28.3zm5.3-3.2l8.9-17.7L23 25.1H5.3z" />
    </symbol>
    <symbol viewBox="0 0 28.3 28.3" id="circle">
      <circle cx="14.2" cy="14.2" r="14.2" />
    </symbol>
  </defs>
</svg>

И я загружаю это с:

<svg viewBox="0 0 28.3 28.3" className="App-icon">
    <use xlinkHref="./sprite#square" />
</svg>

Без результатов. Я сделал песочницу в качестве примера: https://codesandbox.io/s/l711v6j7v7

Источник

1 ответ

Решение

Если вы хотите сослаться на него как на внешний ресурс, вам нужно использовать правильный URL-адрес для файла SVG, и он должен быть общедоступным. Таким образом, в коде и ящике вам нужно переместить его в общую папку, чтобы вы могли получить к нему доступ в браузере через

https://codesandbox.io/s/l711v6j7v7/sprite.svg

Тогда вы можете ссылаться на это так:

<use xlinkHref="/sprite.svg#square" />

Посмотрите на эту ветку ваших кодов и ящиков.

Источник

Для тех, где файл SVG является существующим / внешним файлом svg. У вас, вероятно, есть существующий загрузчик веб-пакетов SVG, который не работает с концепцией спрайтов SVG. Почему? Обычно требуется ссылка на файл / URL-адрес для файла спрайта, или SVG (узлы) должны существовать в DOM (решение ниже)

Это работает:

  1. Преобразуйте простой SVG в JSX (google html в jsx)
  2. Создайте новый чистый компонент реакции и просто верните преобразованный JSX в методе render()
  3. Импортировать и включить созданный компонент спрайта реакции
  4. Теперь используйте символ спрайта через <use><svg href="#symbolnameorid"></svg></use> Теперь вы можете использовать его без префикса файла
Источник
Другие вопросы по тегам