RTL Compatible Icon

Icon.js

import React from 'react';
import styled from 'styled-components';

const IconWrapper = styled('div')`
  html[dir='rtl'] &.flip-icon {
    transform: scaleX(-1);
  }
`;

const Icon = ({ name, onClick, noFlip }) => {
  return (
    <IconWrapper onClick={onClick} className={noFlip ? '' : 'flip-icon'}>
      <i className={`icon icon-${name}`} title={name} />
    </IconWrapper>
  );
};

export default Icon;