从双svg d路径创建自定义react材质ui图标
从双svg d路径创建自定义react材质ui图标
提问于 2020-12-21 08:47:28
我想从具有两个路径的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和react还是个新手，所以我想我应该在这里问一下。谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-21 12:00:38
我用下面的布局创建了一个单独的组件来解决这个问题，就像在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;然后，只需将图标导入到您需要它的组件。路径的数量并不重要，只需记住在路径后面包含所有属性即可。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65386272
复制相关文章
相似问题
腾讯云开发者
