为什么 react 不显示从外部库导入的 svg？

Question

[第三版 - 添加图片] 我正在使用外部库来响应显示 svg。

根据文档，我只需将 svg 导入组件并在 img 标签中使用它，下面我该怎么做。

import { cardImg } from '@design-library';

  return (
    <Loader options={LoaderOptions} loaded={!isAppLoading}>
      

      <Title>Presentation</Title>
      <div>
        <p>Utils</p>
        <img src={cardImg} />
      </div>

      

这是导入的库文件中的内容

'use strict';

var cardImg = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"312\" height=\"234\" viewBox=\"0 0 312 234\">\n  <defs>\n    <path id=\"slice-a\" d=\"M17.4812487,27 C14.7979704,26.9944944 12.6276119,29.1592638 12.6330808,31.835683 L12.7918144,109.366233 C12.7972937,112.042652 14.9765341,114.216363 17.6598123,114.22188 L143.750943,111.96245 C149.185191,111.865074 153.54668,107.445107 153.571676,102.010044 L153.633081,88.6579974 L153.633081,88.6579974 L153.517345,32.1253045 C153.511866,29.4488853 151.332625,27.2751743 148.649347,27.2696582 L17.4812487,27 Z\"/>\n  </defs>\n  <g fill=\"none\" fill-rule=\"evenodd\">\n    <rect width=\"312\" height=\"234\" fill=\"#F1F1F1\"/>\n    <g transform=\"translate(73 30.114)\">\n      <use fill=\"#FBCE07\" transform=\"rotate(-26 83.133 70.61)\" xlink:href=\"#slice-a\"/>\n      <polygon fill=\"#404040\" points=\"5 43.886 145.954 44.176 146 66.505 5.046 66.215\" transform=\"rotate(-26 75.5 55.195)\"/>\n      <path fill=\"#F1F1F1\" fill-rule=\"nonzero\" d=\"M138.522294,82.7257434 L10.0395355,82.7257434 C6.28911648,82.7257434 3.28091481,85.8514151 3.28091481,89.6701879 L3.28091481,168.781299 C3.28091481,172.600072 6.28911648,175.725743 10.0395355,175.725743 L117.901604,175.725743 C133.040989,175.725743 145.280915,163.00785 145.280915,147.355373 L145.280915,89.6701879 C145.280915,85.8514151 142.272713,82.7257434 138.522294,82.7257434 Z\"/>\n      <path fill=\"#FBCE07\" fill-rule=\"nonzero\" d=\"M138.522294,84.7257434 C141.079603,84.7257434 143.165401,86.8211766 143.276279,89.4499245 L143.280915,89.6701879 L143.280915,147.355373 C143.280915,161.774411 132.145019,173.489354 118.321318,173.722211 L117.901604,173.725743 L10.0395355,173.725743 C7.48222702,173.725743 5.39642868,171.63031 5.28555084,169.001562 L5.28091481,168.781299 L5.28091481,89.6701879 C5.28091481,87.0130167 7.29759671,84.8457681 9.82755015,84.7305605 L10.0395355,84.7257434 L138.522294,84.7257434 Z\"/>\n      <g transform=\"translate(13.269 92.738)\">\n        <path fill=\"#FFF\" fill-rule=\"nonzero\" d=\"M18.3567802,21.0719631 L12.633856,21.0656655 L12.4038148,21.2343895 C12.0708178,21.477459 11.6353932,21.6055766 11.2083066,21.6055766 C10.7739265,21.6055766 10.3881208,21.4700163 9.9722441,21.1824879 L9.80089725,21.0631212 L4.06135454,21.0568177 L3.52661121,16.7922005 L0.266255661,14.3716832 L0.229146925,14.1989801 C0.0367285374,13.3034702 -0.00189190649,12.9340339 1.12466934e-06,12.0063293 C0.00665871366,5.71334156 5.00883333,0.668932351 11.2407816,0.67486964 C17.4747961,0.68246821 22.4680147,5.73712388 22.4607765,12.0292844 C22.4607765,12.9500333 22.4208557,13.3192846 22.2258796,14.2210814 L22.1882407,14.3951677 L18.8907468,16.8089066 L18.3567802,21.0719631 Z\"/>\n        <path fill=\"#DB2026\" d=\"M0.686606559,14.1003802 C0.50148883,13.2388474 0.466107968,12.9028401 0.467932838,12.0068206 C0.474321382,5.97166135 5.2677965,1.13783888 11.2402125,1.14352889 C17.2145239,1.15081092 21.9997856,5.99412512 21.9928434,12.0292844 C21.9928434,12.9253039 21.9546119,13.2613112 21.7685464,14.1218948 L18.4515905,16.5498797 L17.9439383,20.6028491 L12.4810699,20.5968377 L12.128209,20.8556455 C11.8672751,21.046113 11.5226276,21.1369172 11.2083066,21.1369172 C10.873452,21.1369172 10.5780849,21.0318754 10.2394395,20.797746 L9.94786332,20.5946229 L4.47425429,20.5886115 L3.96597029,16.5350094 L0.686606559,14.1003802 L0.686606559,14.1003802 Z\"/>\n        <path fill=\"#FBCE07\" d=\"M10.1681601,18.595684 L10.6319575,18.9523217 C10.8119007,19.0922481 11.0675595,19.1909264 11.2449683,19.1918782 C11.4252284,19.1918782 11.6821544,19.0922481 11.8620976,18.9535909 L12.3262118,18.5979051 L16.3495905,18.6026645 L16.7709364,15.2628345 L19.9718985,12.9212095 C20.0960847,12.4401928 20.1201616,12.2564799 20.121112,11.7998948 C20.121112,11.2259111 19.9718985,10.5100973 19.7460191,10.0036971 L13.9441169,15.8282513 L19.5220404,8.9318801 C19.3021802,7.96223158 18.8665782,7.18644932 18.1819702,6.5515453 L13.1334219,15.2593443 L17.5534361,5.71198706 C16.9511965,4.89400478 16.2266715,4.36983615 15.2724655,4.04619692 L12.1899871,14.8979472 L14.4180519,3.6026208 C13.7584712,3.22440711 12.9746693,3.02070477 12.166192,3.01816029 C11.9460149,3.0194356 11.9060118,3.01816029 11.6983209,3.01816029 L11.2332467,14.7967306 L10.7624553,3.01816029 C10.5269537,3.01816029 10.4707704,3.01880101 10.2955792,3.01816029 C9.52290037,3.01689725 8.76631362,3.21266726 8.0326014,3.61436065 L7.98761559,3.640696 L10.3053352,14.9179367 L7.23838011,4.0519082 C6.24995951,4.38506623 5.44496697,4.96254014 4.94758865,5.69263217 L9.38787811,15.2238075 L4.41631258,6.41955126 C3.72251736,6.98052592 3.16526357,7.90162855 2.93906731,8.85731616 L8.53219733,15.8380874 L2.73884878,9.93230607 C2.4841404,10.4637724 2.33966419,11.1548374 2.33966419,11.803385 C2.33872852,12.1908002 2.38371433,12.5455342 2.4854076,12.9392953 L5.74054274,15.3399368 L6.14097981,18.5906073 L10.1681601,18.595684 Z\"/>\n      </g>\n      <rect width=\"4\" height=\"6\" x=\"13.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"19.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"25.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"31.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"43.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"49.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"55.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"61.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"73.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"79.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"85.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"91.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"103.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"109.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"115.269\" y=\"151.738\" fill=\"#404040\"/>\n    </g>\n  </g>\n</svg>";

module.exports = cardImg;

如果我打印导入数据的值，它会返回 svg，但在屏幕上它似乎已损坏，如您在附图中看到的那样。

如果我检查元素，它会显示您在下图中看到的内容

如何使用这个组件？

提前感谢大家的时间和帮助。

Answer 1

应用来自https://css-tricks.com/lodge/svg/09-svg-data-uris/的知识

• 始终转储您正在使用的框架
• 从裸 SVG 开始
• 干净的SVG； https://jakearchibald.github.io/svgomg/; 7 位精度太疯狂了
• 删除空格（必需）
• 转义#（必填）
• 替换双引号（方便）

SVG:
<svg width="100px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="75 30 160 180">
    <defs>
      <path id="a" d="M17.5 27a4.8 4.8 0 00-4.9 4.8l.2 77.6c0 2.6 2.2 4.8 4.9 4.8l126-2.2a10 10 0 009.9-10V32.1c0-2.7-2.3-4.8-5-4.8L17.5 27z" />
    </defs>
    <g fill="none" fill-rule="evenodd">
      <path fill="#F1F1F1" d="M0 0h312v234H0z" />
      <g transform="translate(73 30.1)">
        <use fill="#FBCE07" transform="rotate(-26 83.1 70.6)" xlink:href="#a" />
        <path fill="#404040" d="M7.2 76L134 14.3l9.8 20L17 96z" />
        <path fill="#F1F1F1" fill-rule="nonzero" d="M138.5 82.7H10a6.9 6.9 0 00-6.7 7v79c0 3.9 3 7 6.7 7H118a27.9 27.9 0 0027.4-28.3V89.7c0-3.8-3-7-6.8-7z" />
        <path fill="#FBCE07" fill-rule="nonzero" d="M138.5 84.7c2.6 0 4.7 2.1 4.8 4.7v58a26 26 0 01-25 26.3H10a4.8 4.8 0 01-4.7-4.7V89.7c0-2.7 2-4.9 4.5-5h128.7z" />
        <path fill="#FFF" fill-rule="nonzero" d="M31.6 113.8H26l-.2.2a2 2 0 01-2.5 0l-.1-.2h-5.8l-.5-4.3-3.3-2.4v-.2c-.2-.9-.2-1.2-.2-2.2a11.2 11.2 0 1122.2 2.3v.1l-3.3 2.4-.6 4.3z" />
        <path fill="#DB2026" d="M14 106.8c-.2-.8-.3-1.2-.3-2a10.8 10.8 0 1121.3 2l-3.3 2.5-.5 4h-5.4l-.4.3a1.6 1.6 0 01-1.9 0l-.3-.3h-5.5l-.5-4-3.2-2.5z" />
        <path fill="#FBCE07" d="M23.4 111.3l.5.4.6.2c.2 0 .5 0 .6-.2l.5-.4h4l.4-3.3 3.2-2.3c.2-.5.2-.7.2-1.2s-.2-1.3-.4-1.8l-5.8 5.9 5.6-7c-.2-.9-.7-1.7-1.3-2.3l-5.1 8.7 4.4-9.6a4.5 4.5 0 00-2.3-1.6l-3 10.8 2.2-11.3c-.7-.3-1.5-.5-2.3-.5H25l-.5 11.7-.5-11.7h-.4c-.8 0-1.6.2-2.3.6l2.3 11.3-3-11c-1 .4-1.9 1-2.4 1.7l4.5 9.6-5-8.8c-.7.5-1.3 1.4-1.5 2.4l5.6 7-5.8-6a4.5 4.5 0 00-.2 3l3.2 2.5.4 3.2h4z" />
        <path fill="#404040" d="M13.3 151.7h4v6h-4zM19.3 151.7h4v6h-4zM25.3 151.7h4v6h-4zM31.3 151.7h4v6h-4zM43.3 151.7h4v6h-4zM49.3 151.7h4v6h-4zM55.3 151.7h4v6h-4zM61.3 151.7h4v6h-4zM73.3 151.7h4v6h-4zM79.3 151.7h4v6h-4zM85.3 151.7h4v6h-4zM91.3 151.7h4v6h-4zM103.3 151.7h4v6h-4zM109.3 151.7h4v6h-4zM115.3 151.7h4v6h-4z" />
      </g>
    </g>
  </svg>
injected IMG:<img/>
<textarea style="width:90vw;height:200px"></textarea>
<script>
  let svg = document.querySelector("svg").outerHTML;
  svg = svg.replace(/\>[\t\s ]+\</g, "><");
  svg = svg.replace(/#/g, "%23");
  svg = svg.replace(/"/g, "'");
  svg = "data:image/svg+xml," + svg;
  document.querySelector("img").src = svg;
  document.querySelector("textarea").value = `<img src="${svg}"/>`;
</script>