时间戳

首页 > 解决方案 > 导入自定义 svg 图标并显示它的最佳方式

material-ui - 导入自定义 svg 图标并显示它的最佳方式

问题描述

我必须导入一个自定义 svg 图标并将其用作我的应用程序中的按钮

我一直在做的是，

import high from '../img/high.svg';

const styles = theme => ({
 icon: {
    color: red[800],
    height: '15px',
    width: '15px',
    cursor: 'pointer'
  }

});

<IconButton><CardMedia image={high} className={classes.icon}/></IconButton>

但这不像一个按钮，我没有得到 onClick 的手形符号。将图标显示为按钮的最佳方式是什么？

标签： material-ui

解决方案

做一个样式为 sa span 的样式化组件

interface IconProps {
    color: 'blue' | 'red' | 'green';
    size: string;
    margin: string;
}

export const Icon = styled.span<IconProps>`
    color: ${props => props.color || '#000000'};
    font-size: ${props => props.size || ''};
    margin: ${props => props.margin || null};
    cursor: pointer;
`;

你不必像我一样使用道具，但这对我来说很好。在强制对文本和 SVG 等内容进行样式设置时，跨度非常有用。

例子

<Icon size="150px" color="green">
    <i className="fab fa-fort-awesome-alt"/>
</Icon>

注意：我确实使用打字稿。如果您不使用道具，则可能不需要使用界面。我只是把它留在那里，作为我所做的例子的一部分。

推荐阅读