Создайте пользовательский значок пользовательского интерфейса материала реакции из двойного пути svg d
Я хочу создать собственный значок пользовательского интерфейса материала из файла 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 и реагирую, я подумал, что спрошу здесь. Спасибо
Я сделал это, публикуя ответ в ближайшее время
Ответы 2
Я решил это, создав отдельный компонент со следующим макетом, как в этом уроке:
Сначала я преобразовал изображение онлайн в 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;
Затем просто импортируйте значок в компонент, в котором он вам нужен. Количество путей не имеет значения, просто не забудьте включить все свойства после пути.
Это сработало так, как задумано для меня, просто используя два пути, как вы показали в своем первоначальном примере. Вы должны установить свой viewBox на 24x24, прежде чем сохранять svg. Я думаю, что могло произойти то, что весь ваш значок был за пределами viewBox, поскольку вы упомянули в своем ответе о необходимости установить его на 24 x 24.
Что именно означает "не получилось"?