如何从带有材质 ui 的 SVG 图像创建 SVG 图标？

【问题标题】：How can I create an SVG Icon from an SVG image with material ui?如何从带有材质 ui 的 SVG 图像创建 SVG 图标？
【发布时间】：2018-08-15 16:42:16
【问题描述】：

所以，我正在尝试创建一个自定义 Svgicon，但都是 the source code uses the paths directly。无论如何，我可以从这样的图像中添加 SVG 图标吗？

import { SvgIcon } from '@material-ui/core';
import React from 'react';

const iconStyles = {
  marginRight: 24,
};

export const LawyersIcon = props => (
  <SvgIcon {...props}>
    <img src="https://pictures-for-website.nyc3.digitaloceanspaces.com/icons/team.svg" />
  </SvgIcon>
);

【问题讨论】：

标签： svg material-ui

【解决方案1】：

所以，您实际上根本不需要使用 SvgIcon，您可以创建自己的图标。这是我的最终代码：

import { withStyles } from '@material-ui/core';
import React from 'react';

@withStyles(theme => ({
  svg_icon: {
    width: '1em',
    height: '1em',
    display: 'inline-block',
    fontSize: '24px',
    transition: 'fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
    flexShrink: 0,
    userSelect: 'none',
  }
}))
export class LawyersIcon extends React.Component {
  render() {
    const { classes } = this.props
    return <div className={classes.svg_icon}>
      <img src="https://pictures-for-website.nyc3.digitaloceanspaces.com/icons/team.svg" />
    </div>
  }

}

【讨论】：