javascript - 如何将 svg 图标与 Material-UI SvgIcon 合并

Question

c是 I/O 获取的图标。

我需要来自 c 的 SVG 路径变量，替换 <SvgIcon>一次。

这里是example提供了硬编码版本的基本工作方式。

viewBox属性是通过此方法从模板中获取的。

let c = (
  <embed
    type="image/svg+xml"
    src="/static/media/logo.svg"
  />
);

return <SvgIcon {...props}>{c}</SvgIcon>;

因为我知道有人问我的 SVG 长什么样子，所以我会提前提供。 Source

<svg id="Capa_1" enable-background="new 0 0 511.5 511.5" height="512" viewBox="0 0 511.5 511.5" width="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <linearGradient id="lg1">
    <stop offset=".00000036422" stop-color="#a8abff" />
    <stop offset="1" stop-color="#fac8ff" />
  </linearGradient>
  <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="243.937" x2="243.937" xlink:href="#lg1" y1="197.5" y2="357.5" />
  <linearGradient id="lg2">
    <stop offset=".00000083866" stop-color="#96d1f3" />
    <stop offset="1" stop-color="#ccfff4" />
  </linearGradient>
  <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="423.937" x2="423.937" xlink:href="#lg2" y1="207.5" y2="307.5" />
  <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="235.937" x2="235.937" xlink:href="#lg2" y1="88.5" y2="158.5" />
  <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="408.937" x2="408.937" xlink:href="#lg1" y1="7.5" y2="147.5" />
  <linearGradient id="Outline_1_" gradientUnits="userSpaceOnUse" x1="255.75" x2="255.75" y1="0" y2="511.5">
    <stop offset=".00000011981" stop-color="#174fa3" />
    <stop offset="1" stop-color="#b044af" />
  </linearGradient>
  <g>
    <g id="Filled_7_">
      <path d="m140.937 511.5v-69h-14.03c-31.106 0-57.054-23.772-59.771-54.76l-6.071-69.24-37.882-8.536c-12.457-2.807-19.129-16.411-13.722-27.979l45.604-97.571c0-97.707 83.918-176.914 187.436-176.914 103.518 0 187.436 79.207 187.436 176.913v31.879c0 54.276-18.732 107.074-53.361 150.405l-47.639 58.777v86.026z" fill="#fff" />
      <path d="m183.937 357.5h120c11.046 0 20-8.954 20-20v-120c0-11.046-8.954-20-20-20h-120c-11.046 0-20 8.954-20 20v120c0 11.046 8.954 20 20 20z" fill="url(#SVGID_1_)" />
      <path d="m393.937 307.5h60c11.046 0 20-8.954 20-20v-60c0-11.046-8.954-20-20-20h-60c-11.046 0-20 8.954-20 20v60c0 11.046 8.954 20 20 20z" fill="url(#SVGID_2_)" />
      <path d="m220.937 158.5h30c11.046 0 20-8.954 20-20v-30c0-11.046-8.954-20-20-20h-30c-11.046 0-20 8.954-20 20v30c0 11.046 8.954 20 20 20z" fill="url(#SVGID_3_)" />
      <path d="m333.937 147.5h150c11.046 0 20-8.954 20-20v-100c0-11.046-8.954-20-20-20h-150c-11.046 0-20 8.954-20 20v100c0 11.046 8.954 20 20 20z" fill="url(#SVGID_4_)" />
      <g fill="#fff">
        <circle cx="243.937" cy="277.5" r="35" />
        <path d="m387.937 112.5v-70l50 35z" />
      </g>
    </g>
    <path id="Outline_7_" d="m156.437 217.5v120c0 15.164 12.336 27.5 27.5 27.5h120c15.163 0 27.5-12.336 27.5-27.5v-120c0-15.164-12.337-27.5-27.5-27.5h-120c-15.164 0-27.5 12.336-27.5 27.5zm160 0v120c0 6.893-5.607 12.5-12.5 12.5h-120c-6.893 0-12.5-5.607-12.5-12.5v-120c0-6.893 5.607-12.5 12.5-12.5h120c6.892 0 12.5 5.607 12.5 12.5zm-65.5-51.5c15.163 0 27.5-12.336 27.5-27.5v-30c0-15.164-12.337-27.5-27.5-27.5h-30c-15.164 0-27.5 12.336-27.5 27.5v30c0 15.164 12.336 27.5 27.5 27.5zm-42.5-27.5v-30c0-6.893 5.607-12.5 12.5-12.5h30c6.893 0 12.5 5.607 12.5 12.5v30c0 6.893-5.607 12.5-12.5 12.5h-30c-6.893 0-12.5-5.607-12.5-12.5zm275.5-138.5h-150c-9.349 0-17.618 4.693-22.59 11.844-21.973-7.854-45.098-11.844-68.85-11.844-106.888 0-193.958 81.818-194.922 182.727l-44.915 96.081c-7.427 15.914 1.756 34.621 18.877 38.468l32.536 7.335 5.592 63.784c1.48 16.861 9.166 32.443 21.643 43.875 12.479 11.434 28.673 17.73 45.599 17.73h6.53v61.5h15v-61.5h88.5v-15h-110.03c-27.418 0-49.901-20.599-52.299-47.915l-6.548-74.697c-39.737-10.338-47.225-7.316-51.699-16.426-1.679-3.419-1.719-7.359-.11-10.806l46.315-99.08v-1.667c.001-93.412 80.717-169.409 179.931-169.409 22.086 0 43.576 3.716 63.98 11.031-.026.487-.04.976-.04 1.469v100c0 15.164 12.337 27.5 27.5 27.5h85.782c1.796 9.662 2.718 19.527 2.718 29.41v15.59h-28.5c-15.163 0-27.5 12.336-27.5 27.5v60c0 15.164 12.337 27.5 27.5 27.5h6.188c-7.881 16.648-17.734 32.419-29.374 46.978l-49.313 60.834v88.688h15v-83.372l45.998-56.745c13.881-17.363 25.361-36.311 34.179-56.384h37.323c15.163 0 27.5-12.336 27.5-27.5v-60c0-15.164-12.337-27.5-27.5-27.5h-16.5v-15.59c0-9.868-.834-19.724-2.475-29.41h48.975c15.163 0 27.5-12.336 27.5-27.5v-100c-.001-15.163-12.338-27.499-27.501-27.499zm-30 215c6.893 0 12.5 5.607 12.5 12.5v60c0 6.893-5.607 12.5-12.5 12.5h-60c-6.893 0-12.5-5.607-12.5-12.5v-60c0-6.893 5.607-12.5 12.5-12.5zm42.5-87.5c0 6.893-5.607 12.5-12.5 12.5h-150c-6.893 0-12.5-5.607-12.5-12.5v-100c0-6.893 5.607-12.5 12.5-12.5h150c6.893 0 12.5 5.607 12.5 12.5zm-195 107h-15v-15h15zm-57.5 85.5c23.435 0 42.5-19.065 42.5-42.5s-19.065-42.5-42.5-42.5-42.5 19.065-42.5 42.5 19.065 42.5 42.5 42.5zm0-70c15.163 0 27.5 12.336 27.5 27.5s-12.337 27.5-27.5 27.5c-15.164 0-27.5-12.336-27.5-27.5s12.336-27.5 27.5-27.5zm136.5-123.095 70.578-49.405-70.578-49.405zm15-70 29.422 20.595-29.422 20.595z" fill="url(#Outline_1_)" />
  </g>
</svg>

console.log(c)

key: null
props:
  src: "/static/media/0103_CSS3_logo_and_wordmark.5da907d7.svg"
  type: "image/svg+xml"
  __proto__: Object
ref: null
type: "embed"
_owner: FiberNode {tag: 1, key: null, stateNode: App, elementType: ƒ, type: ƒ, …}
_store: {validated: true}
_self: undefined
_source: {fileName: "C:\Users\ruper\Documents\Code\ReactTypescript\myapp\src\component\BaseJSX.tsx", lineNumber: 37, columnNumber: 11}
__proto__: Object

Answer 1

假设您有一个 svg 并且您需要使用它的属性和子元素(到 SvgIcon 中)。

您可以访问 props(正如您实际所做的那样)和 props.children 以获取其内容。

即:

let c = (
  <svg id="1" width="512" height="512">
    <linearGradient>...</linearGradient>
    <g><path>...</path></g>
  </svg>
);

let merged = (
  <SvgIcon {...c.props)>
    {c.props.children}
  </SvgIcon>
);