SVG не отображается в реакции

Question

У меня есть файл svg, и я хочу отобразить его как background-img:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="12px" viewBox="0 0 16 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
        <path d="M496.659,312.107l-47.061-36.8c0.597-5.675,1.109-12.309,1.109-19.328c0-7.019-0.491-13.653-1.109-19.328l47.104-36.821    c8.747-6.912,11.136-19.179,5.568-29.397L453.331,85.76c-5.227-9.557-16.683-14.464-28.309-10.176l-55.531,22.293    c-10.645-7.68-21.803-14.165-33.344-19.349l-8.448-58.901C326.312,8.448,316.584,0,305.086,0h-98.133    c-11.499,0-21.205,8.448-22.571,19.456l-8.469,59.115c-11.179,5.035-22.165,11.435-33.28,19.349l-55.68-22.357    C76.52,71.531,64.04,76.053,58.856,85.568L9.854,170.347c-5.781,9.771-3.392,22.464,5.547,29.547l47.061,36.8    c-0.747,7.189-1.109,13.44-1.109,19.307s0.363,12.117,1.109,19.328l-47.104,36.821c-8.747,6.933-11.115,19.2-5.547,29.397    l48.939,84.672c5.227,9.536,16.576,14.485,28.309,10.176l55.531-22.293c10.624,7.659,21.781,14.144,33.323,19.349l8.448,58.88    C185.747,503.552,195.454,512,206.974,512h98.133c11.499,0,21.227-8.448,22.592-19.456l8.469-59.093    c11.179-5.056,22.144-11.435,33.28-19.371l55.68,22.357c2.688,1.045,5.483,1.579,8.363,1.579c8.277,0,15.893-4.523,19.733-11.563    l49.152-85.12C507.838,331.349,505.448,319.083,496.659,312.107z M256.019,341.333c-47.061,0-85.333-38.272-85.333-85.333    s38.272-85.333,85.333-85.333s85.333,38.272,85.333,85.333S303.08,341.333,256.019,341.333z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#295477"/>
</g>
</svg>

.icon {
  background: red;
  width: 50%;
  padding: 20px;
  position: relative;
}

.icon::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 30px;
  width: 30px;
  background: url(test.svg) no-repeat left center;
  background-size: 150%;
}

export default function App() {
  return (
    <div className="App">
      <div className="icon">123</div>
    </div>
  );
}

, и он просто не отображается ， Есть ли что-то, что я пропустил?

on line demo

Answer 1

Вы можете загрузить SVG в реакции напрямую, используя:

import mySvg from "./test.svg";

, затем вы можете установить его в качестве фона непосредственно в коде JSX

...
 <div className="icon" style={{ backgroundImage: url(data:image/svg+xml;utf8,${mySvg})` }} />
...

Answer 2

Когда ваша страница отображается, браузер выбирает дополнительные ресурсы (например, файлы .js / .css / .svg) относительно каталога загруженной страницы.

Инструменты реагирования предоставляют только public/ в браузер, поэтому при загрузке index.html браузер попытается найти SVG-изображение в этом же каталоге.

Вы можете либо переместить файл в public/test.svg, либо создать символическую ссылку, чтобы получить его Работа. Демо - https://codesandbox.io/s/use-svg-sorw2.