如何使用材质 ui 从 SVG 图像创建 SVG 图标?

Question

所以，我正在尝试创建自定义的Svgicon，但所有的源代码都直接使用路径。无论如何，我可以从这样的图像中添加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>
);

Answer 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>
}
}