如何使用现有的材质 ui 图标构建自定义图标？答案

【问题标题】：How to build a custom icon using existing material ui icons?如何使用现有的材质 ui 图标构建自定义图标？
【发布时间】：2020-07-14 06:56:29
【问题描述】：

我想创建一个如下图所示的箭头

我是用 svg 得到的 -

<svg height='24' width='12' style={{ marginBottom: '-4px', marginLeft: '49%' }}>
  <line x1='6' y1='0' x2='6' y2='28' style={{ stroke: '#D0D0D7', strokeWidth: 2 }} />
  <polyline points='0,14 6,8 12,14' style={{ fill: 'none', stroke: '#D0D0D7', strokeWidth: 2 }} />
</svg>

但是我想使用材质ui图标，并且向上箭头在行中间的地方没有材质ui图标。

材质ui中有以下内容

- 没有线条的箭头
- 行首的箭头

有没有办法使用选项 1 中的 KeyboardArrowUp 图标并将其放在一行的中间？或任何其他方式来实现我想要的？

【问题讨论】：

你读过this吗？
试试这个：<svg viewBox="0 0 12 24" style="margin-bottom: -4px; marginLeft: 49%;"> <line x1='6' y1='0' x2='6' y2='24' style="stroke: #D0D0D7; strokeWidth: 2; fill: none;" /> <polyline points='0,14 6,8 12,14' style="fill: none; stroke: #D0D0D7; strokeWidth: 2" /> </svg> 为 svg 元素添加宽度
@Sfili_81 行中间没有带箭头的材质ui图标。我更新了问题以提及这一点。有没有办法从现有图标构建我需要的自定义图标？

标签： css svg material-ui

【解决方案1】：

我想在文档中很清楚 .. https://material-ui.com/components/icons/ 但无论哪种方式，您都可以使用 SvgIcon 或普通图标

function HomeIcon(props) => (<SvgIcon {...props}><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></SvgIcon>); 或使用

<Icon color="primary">add_circle</Icon>

【讨论】：

行中间没有带箭头的材质ui图标。我更新了问题以提及这一点。有没有办法从现有图标构建我需要的自定义图标？
您可以在 Photoshop 中创建一个 SVG 并将其导出到网络中，甚至对其进行动画处理...或者将图标包装在容器/div 中并根据需要为它们制作动画