时间戳

首页 > 解决方案 > 从双 svg d 路径创建自定义反应材料 ui 图标

reactjs - 从双 svg d 路径创建自定义反应材料 ui 图标

问题描述

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

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 还很陌生并且做出了反应，所以我想我会在这里问。谢谢

标签： reactjsreact-nativesvgmaterial-uiicons

解决方案

我通过在本教程中创建具有以下布局的单独组件来解决它：

首先，我将在线图像转换为 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;

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

推荐阅读