mirror of https://github.com/trezor/trezor-wallet
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.4 KiB
64 lines
1.4 KiB
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import styled, { keyframes } from 'styled-components';
|
|
|
|
// TODO: make animation of icons better
|
|
const rotate180up = keyframes`
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(180deg);
|
|
}
|
|
`;
|
|
|
|
const rotate180down = keyframes`
|
|
from {
|
|
transform: rotate(180deg);
|
|
}
|
|
to {
|
|
transform: rotate(0deg);
|
|
}
|
|
`;
|
|
|
|
const SvgWrapper = styled.svg`
|
|
animation: ${props => (props.canAnimate ? (props.isActive ? rotate180up : rotate180down) : null)} 0.2s linear 1 forwards;
|
|
`;
|
|
|
|
const Path = styled.path``;
|
|
|
|
const Icon = ({
|
|
icon, size = 32, color = 'black', isActive, canAnimate,
|
|
}) => (
|
|
<SvgWrapper
|
|
canAnimate={canAnimate}
|
|
isActive={isActive}
|
|
style={{
|
|
display: 'inline-block',
|
|
verticalAlign: 'middle',
|
|
}}
|
|
width={`${size}`}
|
|
height={`${size}`}
|
|
viewBox="0 0 1024 1024"
|
|
>
|
|
{icon.map(path => (
|
|
<Path
|
|
key={path}
|
|
isActive={isActive}
|
|
style={{ fill: color }}
|
|
d={path}
|
|
/>
|
|
))}
|
|
</SvgWrapper>
|
|
);
|
|
|
|
Icon.propTypes = {
|
|
canAnimate: PropTypes.bool,
|
|
icon: PropTypes.arrayOf(PropTypes.string).isRequired,
|
|
size: PropTypes.number,
|
|
isActive: PropTypes.bool,
|
|
color: PropTypes.string,
|
|
};
|
|
|
|
|
|
export default Icon; |