Блог

Я хочу создать пользовательский значок пользовательского интерфейса материала из файла 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: {
    'amp; > 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, я подумал, что спрошу здесь.
Спасибо

Я решил это, создав отдельный компонент со следующим макетом, как в этом руководстве:

Сначала я преобразовал изображение онлайн в 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;
 

Затем просто импортируйте значок в нужный вам компонент.
Количество путей не имеет значения, просто не забудьте указать все свойства после пути.