mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
739075662c
* Migrating Icon to typescript and deprecating JS component * gw suggestions (#18434) --------- Co-authored-by: Garrett Bear <gwhisten@gmail.com>
36 lines
879 B
TypeScript
36 lines
879 B
TypeScript
import React from 'react';
|
|
import classnames from 'classnames';
|
|
|
|
import Box from '../../ui/box/box';
|
|
|
|
import { IconColor, DISPLAY } from '../../../helpers/constants/design-system';
|
|
|
|
import { IconProps, IconSize } from './icon.types';
|
|
|
|
export const Icon = ({
|
|
name,
|
|
size = IconSize.Md,
|
|
color = IconColor.inherit,
|
|
className = '',
|
|
style,
|
|
...props
|
|
}: IconProps) => (
|
|
<Box
|
|
className={classnames(className, 'mm-icon', `mm-icon--size-${size}`)}
|
|
as="span"
|
|
display={DISPLAY.INLINE_BLOCK}
|
|
color={color}
|
|
style={{
|
|
/**
|
|
* To reduce the possibility of injection attacks
|
|
* the icon component uses mask-image instead of rendering
|
|
* the svg directly.
|
|
*/
|
|
maskImage: `url('./images/icons/${String(name)}.svg')`,
|
|
WebkitMaskImage: `url('./images/icons/${String(name)}.svg')`,
|
|
...style,
|
|
}}
|
|
{...props}
|
|
/>
|
|
);
|