物料界面：SvgIcon存在一些路径问题
我想这样使用：物料界面：SvgIcon存在一些路径问题,svg,material-ui,render,Svg,Material Ui,Render,我想这样使用： const iconsSVG = { // WORKING "PS1": "M8.985 2.596v17.548l3.915 1.261V6.688c0-.69.304-1.151.794-.991.636.181.76.814.76 1.505v5.876c2.441 1.193 4.362-.002 4.362-3.153 0-3.237-1.126-4.675-4.438-5.827-1.307-.448-3.728-1.18
const iconsSVG = {
// WORKING
"PS1": "M8.985 2.596v17.548l3.915 1.261V6.688c0-.69.304-1.151.794-.991.636.181.76.814.76 1.505v5.876c2.441 1.193 4.362-.002 4.362-3.153 0-3.237-1.126-4.675-4.438-5.827-1.307-.448-3.728-1.186-5.391-1.502h-.002zm4.656 16.242l6.296-2.275c.715-.258.826-.625.246-.818-.586-.192-1.637-.139-2.357.123l-4.205 1.499v-2.385l.24-.085s1.201-.42 2.913-.615c1.696-.18 3.785.029 5.437.661 1.848.601 2.041 1.472 1.576 2.072s-1.622 1.036-1.622 1.036l-8.544 3.107v-2.297l.02-.023zM1.808 18.6c-1.9-.545-2.214-1.668-1.352-2.321.801-.585 2.159-1.051 2.159-1.051l5.616-2.013v2.313L4.206 17c-.705.271-.825.632-.239.826.586.195 1.637.15 2.343-.12L8.248 17v2.074c-.121.029-.256.044-.391.073-1.938.331-3.995.196-6.037-.479l-.012-.068z",
"PS2": "M7.46 13.779v.292h4.142v-3.85h3.796V9.93h-4.115v3.85zm16.248-3.558v1.62h-7.195v2.23H24v-.292h-7.168v-1.646H24V9.929h-7.487v.292zm-16.513 0v1.62H0v2.23h.292v-1.938H7.46V9.929H0v.292Z",
"PS3": "M15.363 9.438h-3.148c-.97 0-1.447.6-1.447 1.38v2.366c0 .483-.228.83-.71.83H7.304c-.02 0-.035.017-.035.035v.47c0 .02.01.032.03.032h3.11c.97 0 1.45-.597 1.45-1.377V10.81c0-.484.225-.832.71-.832h2.782c.02 0 .04-.014.04-.033V9.47c0-.02-.02-.035-.04-.035zm-9.267 0H.038c-.022 0-.038.017-.038.035v.477c0 .02.016.036.038.036h5.694c.48 0 .71.347.71.83s-.228.83-.71.83H1.228c-.7 0-1.227.587-1.227 1.366v1.513c0 .02.02.037.04.037h1.03c.02 0 .04-.016.04-.037v-1.513c0-.48.28-.82.68-.82H6.1c.97 0 1.444-.595 1.444-1.375 0-.778-.473-1.38-1.442-1.38zm17.454 2.498c-.015-.015-.015-.04 0-.056.3-.25.45-.627.45-1.062 0-.778-.474-1.38-1.446-1.38h-6.057c-.02 0-.036.018-.036.038v.475c0 .02.02.04.04.04h5.7c.48 0 .715.35.715.83s-.23.83-.712.83h-5.7c-.02 0-.036.02-.036.04v.48c0 .02.016.034.037.034h5.7c.63.007.71.62.71.93v.06c0 .485-.23.833-.71.833h-5.7c-.02 0-.036.015-.036.034v.477c0 .02.015.037.036.037h6.05c.973 0 1.446-.645 1.446-1.38v-.057c0-.47-.15-.916-.45-1.19z",
// NOT WORKING
"PSP": "M67.5,194 174.4,194 174.4,225.7 71.7,225.7 71.7,253.2 67.5,253.2 67.5,221.5 170.2,221.5 170.2,198.2 67.5,198.2 67.5,194 M307.9,225.7 307.9,253.2 303.7,253.2 303.7,221.5 406.3,221.5 406.3,198.2 303.7,198.2 303.7,194 410.6,194 410.6,225.7 307.9,225.7 M228.9,194 228.9,249 174.4,249 174.4,253.2 233.3,253.2 233.3,198.2 287.8,198.2 287.8,194 228.9,194",
"PC": "M1210 2030 l0 -1730 420 0 420 0 2 583 3 582 245 3 245 2 268 268 267 267 0 605 0 605 -273 273 -272 272 -663 0 -662 0 0 -1730z m998 571 l2 -462 -77 3 -78 3 -3 457 -2 457 67 3 c38 2 73 3 78 3 6 -1 11 -165 13 -464z M3492 3487 l-272 -272 0 -1190 0 -1190 268 -268 268 -267 450 0 449 0 268 268 267 267 -2 475 -3 475 -440 0 -440 0 -3 -397 -2 -398 -70 0 -70 0 0 1035 0 1035 70 0 70 0 2 -327 3 -328 440 0 440 0 3 405 2 405 -272 272 -273 273 -440 0 -440 0 -273 -273z"
}
// ... some piece of code latter
<SvgIcon>
<path d={iconsSVG["PS3"]} /> // any key of the iconsSVG could be used
</SvgIcon>
const iconsvg={
//工作
“PS1”："6.304-1.417-7.417.417.417.417-1.417-1.417-4-4.438-5.827-7-7-1.307-1.307-1.417-7-1.417-1.417-1.417-7-4-4-4.438-5-5-7-7-7-7-7-7-7-7-7-1.307-7-7-7-7-7-7-7-7-1.307-7-7-7-1.307-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7.307-7-7-7-7-7-7-7-7-7-7-7-7-7-7-1.637-.139-2.357.123l-4.205 1.499v-2.385l.24-.085s1.201-.42 2.913-.615c1.696-.18 3.75.2.2.1.1.1.2.1.2.1.1.1.2 2.1.1.1.3-1.3-1.3-1.1.3-1.3-1.3-1.3-1.3-1.2 1.2 1.1.2.2 1.2-1.1.2-1.3-1.3-1.3-1.3-1.3-1.3-1.3-1.2 1.2 1.3-1.3-1.1.2 1.2 1.2 1.2 1.2 1.2 1.2 1.2 1.2 1.1.2 1.2 1.2 1.2 1.2 1.2 1.2 1.2 1.2 1 1.2 1 1 1 1.2 1 1 1 1 1.1.2 1.2 1.2 1 1 1 1 1 1 1 1 1 1.2 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1.12L8.248 17v2.074c-.121.029-.256.044-.391.073-1.938.331-3.995.196-6.037-.479l-.012-.068z“，
“PS2”：“M7.46 13.779v.292h4.142v-3.85h3.796V9.93h-4.115v3.85zm16.248-3.558v1.62h-7.195v2.23H24v-.292h-7.168v-1.646H24V9.929h-7.487v.292zm-16.513 0v1.62H0v2.23h.292v-1.938H7.46V9.929H0v.292Z”，
“PS3”：4.6.7 7 7 7.7 7 7 7 7 7 7 7 7 0 0 0 0 0 0 0 0 0 0 0 7 7 7 7 7 7 7 7 7 7 7 7 7 6 6 6 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.038c-.0220-.038.017-.038.035v.477c0.02.016.036.038.036h5.694c.48 0.71.347.71.83s-.2287.7 7.7 7.6.6.7.7.7 7.7 7.7 7 7.7 7 7.7 7 7.7 7.3.7.7.0 0 0 0.2.0 0 0.0 0 0.3.7.4.7.4.4.4.4.4.4.4.4.4.4.4.4.4.4.4.04.04.04.04.04.04.04.04.0 0.3.037 7 7.3.3.3 H1H1H1H10 0 0 0.3.3.0 0 0 0 0 0 0 0 0 0.3.3.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0 0.0 0 0 0 0 0 0 0 0 0 0 0.0 0 0 0 0 0 0 0.0 0 0 0 0 0 0 0 0 0.0 0 0 0 0 0 0.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0 0 0 0 0 0 0-1.38-1.446-1.38h-6.057c-.02 0-.036.018-.036.038v.475c0.02.02.04.04h5.7c.48 0.715。35.715.83s-.23.83-.712.83h-5.7c-.02 0-.036.02-.036.04v.48c0.02.016.034.037.034h5.7c.63.007.71.62.71.93v.06c0.485-.23.833-.71.833h-5.7c-.02 0-.036.015.034v.477c0.02.015.037.036.037.037.037.037.037.037.037.037h6.05c.973.441-641.75Z-.387-.037-.037-.037-.037-.037-.037-.037-.037-.037-.037-.037-.037-.037-.037-.037-.036-，
//不起作用
“PSP”：7.7.7 7 7.7 7 7 7 7.7 7 7 7 7.7 7 7 7 7.7 7 7 7.7 7 7.7 7 7 7.7 7 7.7 7 7.7 7 7 7.5 7 7.7 7 7 7.7 7 7 7 7.7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7.7 7 7 7 7.7 7 7 7 7.7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7 7.7 7 7 7 7.7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7，
“个人电脑”：M1210 2030 l0-1730 420 0 0 2 583 582 245 3 245 2 268 268 267 267 0 605 0 605-273 273-272-663 0-662 0-1730z m998 571 l2-462-77 3-78 3-3457-2457 c38 2 73 3 78 3 6-11-165 13-464z M342 3487 l-272-272 0-1190-1190 268-268-268 268-268-267 450 0 449 268 268 268 267-2 475 267-397 4400-4400-3970 0 1035 0 1035 70 0 70 0 0 2-327 3-328 440 0 440 0 3 405 2 405-272 272-273 273-4400-4400-273-273z“
}
//…后一段代码
//可以使用ICONSSSVG的任何键
PSP和PC图标有3和2个路径和viewBox=“0 0 500”viewBox=“0 0 640.000000 407.000000” 此SvgIcon有1个路径和“0 0 24 24”默认视口 您可以为图标指定viewBox道具和路径阵列，但在PC项中还有g标记，因此不会以这种方式显示
const iconsSVG = {
// WORKING
PS1: {
path: [
"M8.985 2.596v17.548l3.915 1.261V6.688c0-.69.304-1.151.794-.991.636.181.76.814.76 1.505v5.876c2.441 1.193 4.362-.002 4.362-3.153 0-3.237-1.126-4.675-4.438-5.827-1.307-.448-3.728-1.186-5.391-1.502h-.002zm4.656 16.242l6.296-2.275c.715-.258.826-.625.246-.818-.586-.192-1.637-.139-2.357.123l-4.205 1.499v-2.385l.24-.085s1.201-.42 2.913-.615c1.696-.18 3.785.029 5.437.661 1.848.601 2.041 1.472 1.576 2.072s-1.622 1.036-1.622 1.036l-8.544 3.107v-2.297l.02-.023zM1.808 18.6c-1.9-.545-2.214-1.668-1.352-2.321.801-.585 2.159-1.051 2.159-1.051l5.616-2.013v2.313L4.206 17c-.705.271-.825.632-.239.826.586.195 1.637.15 2.343-.12L8.248 17v2.074c-.121.029-.256.044-.391.073-1.938.331-3.995.196-6.037-.479l-.012-.068z",
],
viewBox: "0 0 24 24",
},
PS2: {
path: [
"M7.46 13.779v.292h4.142v-3.85h3.796V9.93h-4.115v3.85zm16.248-3.558v1.62h-7.195v2.23H24v-.292h-7.168v-1.646H24V9.929h-7.487v.292zm-16.513 0v1.62H0v2.23h.292v-1.938H7.46V9.929H0v.292Z",
],
viewBox: "0 0 24 24",
},
PS3: {
path: [
"M15.363 9.438h-3.148c-.97 0-1.447.6-1.447 1.38v2.366c0 .483-.228.83-.71.83H7.304c-.02 0-.035.017-.035.035v.47c0 .02.01.032.03.032h3.11c.97 0 1.45-.597 1.45-1.377V10.81c0-.484.225-.832.71-.832h2.782c.02 0 .04-.014.04-.033V9.47c0-.02-.02-.035-.04-.035zm-9.267 0H.038c-.022 0-.038.017-.038.035v.477c0 .02.016.036.038.036h5.694c.48 0 .71.347.71.83s-.228.83-.71.83H1.228c-.7 0-1.227.587-1.227 1.366v1.513c0 .02.02.037.04.037h1.03c.02 0 .04-.016.04-.037v-1.513c0-.48.28-.82.68-.82H6.1c.97 0 1.444-.595 1.444-1.375 0-.778-.473-1.38-1.442-1.38zm17.454 2.498c-.015-.015-.015-.04 0-.056.3-.25.45-.627.45-1.062 0-.778-.474-1.38-1.446-1.38h-6.057c-.02 0-.036.018-.036.038v.475c0 .02.02.04.04.04h5.7c.48 0 .715.35.715.83s-.23.83-.712.83h-5.7c-.02 0-.036.02-.036.04v.48c0 .02.016.034.037.034h5.7c.63.007.71.62.71.93v.06c0 .485-.23.833-.71.833h-5.7c-.02 0-.036.015-.036.034v.477c0 .02.015.037.036.037h6.05c.973 0 1.446-.645 1.446-1.38v-.057c0-.47-.15-.916-.45-1.19z",
],
viewBox: "0 0 24 24",
},
// NOT WORKING
PSP: {
path: [
"M 67.5,194 174.4,194 174.4,225.7 71.7,225.7 71.7,253.2 67.5,253.2 67.5,221.5 170.2,221.5 170.2,198.2 67.5,198.2 67.5,194",
"M 307.9,225.7 307.9,253.2 303.7,253.2 303.7,221.5 406.3,221.5 406.3,198.2 303.7,198.2 303.7,194 410.6,194 410.6,225.7 307.9,225.7",
"M 228.9,194 228.9,249 174.4,249 174.4,253.2 233.3,253.2 233.3,198.2 287.8,198.2 287.8,194 228.9,194",
],
viewBox: "0 0 500 500",
},
PC: {
path: [
"M1210 2030 l0 -1730 420 0 420 0 2 583 3 582 245 3 245 2 268 268 267 267 0 605 0 605 -273 273 -272 272 -663 0 -662 0 0 -1730z m998 571 l2 -462 -77 3 -78 3 -3 457 -2 457 67 3 c38 2 73 3 78 3 6 -1 11 -165 13 -464z",
"M3492 3487 l-272 -272 0 -1190 0 -1190 268 -268 268 -267 450 0 449 0 268 268 267 267 -2 475 -3 475 -440 0 -440 0 -3 -397 -2 -398 -70 0 -70 0 01035 0 1035 70 0 70 0 2 -327 3 -328 440 0 440 0 3 405 2 405 -272 272 -273 273 -440 0 -440 0 -273 -273z",
],
viewBox: "0 0 640.000000 407.000000",
},
};
// ... some piece of code latter
function App() {
const type = "PC";
const { viewBox, path } = iconsSVG[type];
return (
<SvgIcon viewBox={viewBox}>
{path.map((d) => (
<path d={d} key={d} />
))}
</SvgIcon>
);
}
const iconsvg={
//工作
PS1：{
路径：[
"6.304-1.417-7.417.417.417.417-1.417-1.417-4-4.438-5.827-7-7-1.307-1.307-1.417-7-1.417-1.417-1.417-7-4-4-4.438-5-5-7-7-7-7-7-7-7-7-7-1.307-7-7-7-7-7-7-7-7-1.307-7-7-7-1.307-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7.307-7-7-7-7-7-7-7-7-7-7-7-7-7-7-1.637-.139-2.357.123l-4.205 1.499v-2.385l.24-.085s1.201-.42 2.913-.615c1.696-.18 3.75.2.2.1.1.1.2.1.2.1.1.1.2 2.1.1.1.3-1.3-1.3-1.1.3-1.3-1.3-1.3-1.3-1.2 1.2 1.1.2.2 1.2-1.1.2-1.3-1.3-1.3-1.3-1.3-1.3-1.3-1.2 1.2 1.3-1.3-1.1.2 1.2 1.2 1.2 1.2 1.2 1.2 1.2 1.2 1.1.2 1.2 1.2 1.2 1.2 1.2 1.2 1.2 1.2 1 1.2 1 1 1 1.2 1 1 1 1 1.1.2 1.2 1.2 1 1 1 1 1 1 1 1 1 1.2 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1.12L8.248 17v2.074c-.121.029-.256.044-.391.073-1.938.331-3.995.196-6.037-.479l-.012-.068z“，
],
查看框：“0 0 24 24”，
},
PS2：{
路径：[
“M7.46 13.779v.292h4.142v-3.85h3.796V9.93h-4.115v3.85zm16.248-3.558v1.62h-7.195v2.23H24v-.292h-7.168v-1.646H24V9.929h-7.487v.292zm-16.513 0v1.62H0v2.23h.292v-1.938H7.46V9.929H0v.292Z”，
],
查看框：“0 0 24 24”，
},
PS3：{
路径：[
"4.6.7 7 7 7.7 7 7 7 7 7 7 7 7 0 0 0 0 0 0 0 0 0 0 0 7 7 7 7 7 7 7 7 7 7 7 7 7 6 6 6 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.038c-.0220-.038.017-.038.035v.477c0.02.016.036.038.036h5.694c.48 0.71.347.71.83s-.2287.7 7.7 7.6.6.7.7.7 7.7 7.7 7 7.7 7 7.7 7 7.7 7.3.7.7.0 0 0 0.2.0 0 0.0 0 0.3.7.4.7.4.4.4.4.4.4.4.4.4.4.4.4.4.4.4.04.04.04.04.04.04.04.04.0 0.3.037 7 7.3.3.3 H1H1H1H10 0 0 0.3.3.0 0 0 0 0 0 0 0 0 0.3.3.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0 0.0 0 0 0 0 0 0 0 0 0 0 0.0 0 0 0 0 0 0 0.0 0 0 0 0 0 0 0 0 0.0 0 0 0 0 0 0.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0 0 0 0 0 0 0-1.38-1.446-1.38h-6.057c-.02 0-.036.018-.036.038v.475c0.02.02.04.04h5.7c.48 0.715。35.715.83s-.23.83-.712.83h-5.7c-.02 0-.036.02-.036.04v.48c0.02.016.034.037.034h5.7c.63.007.71.62.71.93v.06c0.485-.23.833-.71.833h-5.7c-.02 0-.036.015.034v.477c0.02.015.037.036.037.037.037.037.037.037.037.037h6.05c.973.441-641.75Z-.387-.037-.037-.037-.037-.037-.037-.037-.037-.037-.037-.037-.037-.037-.037-.037-.036-，
],
查看框：“0 0 24 24”，
},
//不起作用
PSP：{
路径：[
“M 67.5194174.4194174.4225.771.7225.771.7253.267.5253.267.5221.5170.2221.5170.2198.267.5198.267.5194”，
“M 307.9225.7 307.9253.2 303.7253.2 303.7221.5 406.3221.5 406.3198.2 303.7198.2 303.7194 410.6194 410.6225.7 307.9225.7”，
“M 228.9194228.9249174.4249174.4253.2233.3253.2233.3198.2287.8198.2287.8194228.9194”，
],
视图框：“0”
import React from "react";
export const PCSvg = () => (
<svg
width='24'
height='24'
viewBox="0 0 640.000000 407.000000"
preserveAspectRatio="xMidYMid meet"
>
<g
transform="translate(0.000000,407.000000) scale(0.100000,-0.100000)"
fill="#000000"
stroke="none"
>
<path
d="M1210 2030 l0 -1730 420 0 420 0 2 583 3 582 245 3 245 2 268 268
267 267 0 605 0 605 -273 273 -272 272 -663 0 -662 0 0 -1730z m998 571 l2
-462 -77 3 -78 3 -3 457 -2 457 67 3 c38 2 73 3 78 3 6 -1 11 -165 13 -464z"
/>
<path
d="M3492 3487 l-272 -272 0 -1190 0 -1190 268 -268 268 -267 450 0 449
0 268 268 267 267 -2 475 -3 475 -440 0 -440 0 -3 -397 -2 -398 -70 0 -70 0 0
1035 0 1035 70 0 70 0 2 -327 3 -328 440 0 440 0 3 405 2 405 -272 272 -273
273 -440 0 -440 0 -273 -273z"
/>
</g>
</svg>
);
import { PCSvg } from './PC';
function App() {
return (
<PCSvg />
);
}
export default App;