从双svg d路径创建自定义react材质ui图标

camsedfj 于 2023-05-01 发布在 React

关注(0)|答案(2)|浏览(141)

我想创建一个自定义材质ui图标从svg文件有两个路径。代码使用

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { green } from '@material-ui/core/colors';
import SvgIcon from '@material-ui/core/SvgIcon';

const useStyles = makeStyles((theme) => ({
  root: {
    '& > svg': {
      margin: theme.spacing(2),
    },
  },
}));

function GradIcon(props) {
  return (
    <SvgIcon {...props}>
       <path
        d="M142.45,174.613c-4.645,0-11.495-0.514-17.779-2.926l-50.271-19.366H49.774v30.162c0,9.274,6.9,19.802,15.405,23.499
            l60.872,26.496c8.505,3.691,22.312,3.707,30.826,0.036l61.536-26.574c8.508-3.671,15.41-14.183,15.41-23.457v-30.162h-27.175
            l-44.547,18.78C156.742,173.365,149.756,174.613,142.45,174.613z"
      />
      <path
        d="M6.475,112.944l121.222,46.709c8.661,3.329,22.603,3.112,31.152-0.492l115.768-48.801v71.999l-7.151,23.866h20.682
            l-7.399-24.114V107.45h-0.208c4.997-3.449,3.832-7.747-3.567-10.393L159.196,55.146c-8.74-3.117-22.859-2.985-31.545,0.277
            L6.529,100.99C-2.157,104.258-2.178,109.612,6.475,112.944z"
      />
    </SvgIcon>
  );
}

export default function SvgIconsColor() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <GradIcon />
    </div>
  );
}

就像文件里说的那样没成功由于我对javascript和react相当陌生，我想我应该在这里问一下。谢谢

react-native

来源：https://stackoverflow.com/questions/65386272/create-custom-react-material-ui-icon-from-double-svg-d-path

2条答案

按热度按时间

bzzcjhmw1#

我通过创建一个单独的组件来解决这个问题，该组件具有以下布局，如this tutorial中所示：
首先，我将在线图像转换为svg。
然后我在一个编辑器中打开它并选择整个svg部分。
此部分张贴在组件中，如下所示。请确保禁用任何不必要的属性，并将宽度和高度设置为24。下面的属性应该足够了。不要删除部件。只需注解并尝试，直到它符合您想要的输出。

import React from "react";

const IconName = () => {
  return (
    <svg  xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      version="1.1"
      viewBox="<viewBox>"
      <path d="<path>"
       strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          fill="<color>"
          fill-rule="evenodd"
        />
    </svg>
  );
};

export default IconName;

然后只需将图标导入到需要它的组件中。路径的数量并不重要，只要记住在路径后面包含所有属性即可。

赞(0）回复(0）举报 2023-05-01

o2gm4chl2#

它像我预期的那样工作，只需要像您在最初的示例中显示的那样使用两个路径。在保存svg之前，您应该将viewBox设置为24x24。我认为可能发生的情况是，你的整个图标都在viewBox之外，因为你在回答中提到需要将其设置为24 x 24。

赞(0）回复(0）举报 2023-05-01