Question

我必须导入一个自定义的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的手势。将图标显示为按钮的最佳方法是什么？

Answer 1

执行一个样式为跨度的组件

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>

注意：我确实使用打字稿。如果不使用道具，则可能不需要使用界面。作为我完成的示例的一部分，我只是将其留在那里。

导入自定义svg图标并显示它的最佳方法

1 个答案:

示例