如何将一个SVG图标与Material-UI的SvgIcon合并

Question

c是通过输入/输出获取的图标。

我需要从c变量中获取SVG路径，一次替换<SvgIcon>。

这里提供了一个示例，展示了硬编码版本的基本工作方式。

viewBox属性源自该方法的模板。

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

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

因为我知道有些人想了解我的SVG长什么样子，所以我将提前提供它。 来源

<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

- ru4ert

Answer 1

假设您有一个svg，并且您需要使用其属性和子元素（进入SvgIcon）。

您可以访问props（实际上正在执行此操作）和props.children以获取其内容。

I.e.:

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>
);

- Leo

---

很遗憾没有孩子。我使用console.log(c)方法并将其放在描述中。 - ru4ert

Answer 2

好的，在经过漫长的一晚上尝试了许多方法后，我找到了唯一可行的解决方案。

1. 首先，我创建了一个文件，将所有文件存储为常量。
   
   我在 src/assets/images/index.tsx 创建了一个文件。

我使用 TypeScript

我像这样构建了文件结构：

import Logo from "./path/to/Logo.svg";

function getSVG(link: string) {
  return <object data={link} type="image/svg+xml"></object>;
}

export const SVG_Logo = (): JSX.Element => getSVG(Logo); // This is the JSX Component
export const FILE_Logo = Logo; // This is the file path string

我为我的所有图标制作了这个...所以会得到一个巨大的文件。

2. 现在你必须在需要它们的地方导入它们。

import {
  SVG_Logo
} from "./../assets/images/index";
import {
  ListItem,
  ListItemText,
  List,
  ListItemIcon,
  SvgIcon
} from "@material-ui/core";


myfunction() {
  return ( 
    <List >
      <ListItemLink href = "#simple-list" >
        <ListItemIcon>
          <SvgIcon component = "object"> // Important, use object!!! otherwise there isn't a display of this in the frontend
            <SVG_Logo />
          </SvgIcon> 
        </ListItemIcon> 
      <ListItemText primary = "Spam" / >
    </ListItemLink>     
  </List>
  );
}

此时，您已经拥有了一个漂亮的物品列表。

3. 现在有一个问题，就是对象无法像原始链接那样被点击。

CSS可以解决这个问题：

object {
  pointer-events: none;
}

- ru4ert