How to use the @emotion/styled.img function in @emotion/styled

__ = __context('MarketData');

const ExchangeUnitContainer = styled.div({
  width: '100%',
});

const MarketInfoContainer = styled.div({
  display: 'flex',
  flexDirection: 'row',
  width: '100%',
  margin: '1.5em 0',
  borderTop: '1px solid #333',
});

const ExchangeLogo = styled.img({
  height: 60,
});

const OneDay = styled.div({
  display: 'grid',
  gridTemplateColumns: 'auto auto',
});

// React-Redux mandatory methods
const mapStateToProps = state => {
  return {
    ...state.market,
    ...state.common,
    ...state.intl,
    theme: state.theme,
    settings: state.settings,

import Icon from 'components/Icon';
import legoBlockIcon from 'icons/lego-block.svg';

const SvgWrapper = styled.span({
  display: 'inline-flex',
  verticalAlign: 'middle',
  transitionProperty: 'fill, stroke',
  transitionDuration: '.2s',
  '& > svg': {
    width: '1em',
    height: '1em',
  },
});

const Img = styled.img({
  verticalAlign: 'middle',
  transitionProperty: 'fill, stroke',
  transitionDuration: '.2s',
  width: '1em',
  height: '1em',
});

const loadSVGContent = path => {
  try {
    const content = readFileSync(path);
    // IMPORTANT! MUST sanitize icon content for security
    return DOMPurify.sanitize(content);
  } catch (err) {
    return null;
  }
};

import styled from '@emotion/styled';

// Internal Global Dependencies
import { GetSettings, SaveSettings } from 'api/settings';
import * as RPC from 'scripts/rpc';
import * as TYPE from 'actions/actiontypes';
import * as FlagFile from 'images/LanguageFlags';
import { remote } from 'electron';
import SettingsField from 'components/SettingsField';
import Button from 'components/Button';
import TextField from 'components/TextField';
import Select from 'components/Select';
import Switch from 'components/Switch';
import UIController from 'components/UIController';

const Flag = styled.img({
  marginRight: '.5em',
  verticalAlign: 'middle',
});

const AppSettings = styled.div({
  maxWidth: 750,
  margin: '0 auto',
});

const languages = [
  {
    value: 'en',
    display: (
      <span>
        
        <span>English (US)</span></span>

const StatIcon = styled(Icon)(({ theme }) => ({
  width: 38,
  height: 38,
  color: theme.primary,
}));

const MaxmindCopyright = styled.div(({ theme }) => ({
  position: 'fixed',
  left: 6,
  bottom: 3,
  opacity: 0.4,
  color: theme.primary,
  zIndex: 1, // over the navigation bar
}));

const MaxmindLogo = styled.img({
  display: 'block',
  width: 181,
});

const BlockCountTooltip = ({ blockDate }) => (
  <div style="{{">
    {__('Last updated\n%{time}', {
      time: blockDate &amp;&amp; formatRelativeTime(blockDate),
    })}
  </div>
);

/**
 * Overview Page, The main page
 *
 * @class Overview

// External
import React, { Component } from 'react';
import { connect } from 'react-redux';
import styled from '@emotion/styled';

// Internal
import languages from 'data/languages';
import { updateSettings } from 'lib/settings';
import SettingsField from 'components/SettingsField';
import Select from 'components/Select';

__ = __context('Settings.Application');

const Flag = styled.img({
  marginRight: '.5em',
  verticalAlign: 'middle',
});

const languageOptions = languages.map(lang => ({
  value: lang.code,
  display: (
    <span>
      
      <span>{lang.name}</span>
    </span>
  ),
}));

const mapStateToProps = state =&gt; ({
  locale: state.settings.locale,

});

const MainHeading = styled.h1({
  display: 'flex',
  alignItems: 'center'
});

const descriptionMargin = 4;
const ChapterDescription = styled.h4({
  display: 'block',
  marginTop: descriptionMargin,
  marginBottom: descriptionMargin,
  color: colors.text2
});

const HeadingImage = styled.img(size('2.5em'), {
  margin: 0,
  marginRight: '0.25em'
});

const Markdown = styled.div({
  a: {
    color: colors.primary,
    textDecoration: 'none',
    ':hover': {
      textDecoration: 'underline'
    }
  },
  '.anchor': {
    color: 'inherit',
    svg: {
      fill: 'currentColor'

});
ElementsRowDecoration.displayName = 'Elements:ElementsRowDecoration';

const ElementsLine = styled.div<{childrenCount: number}>(props => ({
  backgroundColor: colors.light20,
  height: props.childrenCount * ROW_HEIGHT - 4,
  position: 'absolute',
  right: 3,
  top: ROW_HEIGHT - 3,
  zIndex: 2,
  width: 2,
  borderRadius: '999em',
}));
ElementsLine.displayName = 'Elements:ElementsLine';

const DecorationImage = styled.img({
  height: 12,
  marginRight: 5,
  width: 12,
});
DecorationImage.displayName = 'Elements:DecorationImage';

const NoShrinkText = styled(Text)({
  flexShrink: 0,
  flexWrap: 'nowrap',
  overflow: 'hidden',
  userSelect: 'none',
  fontWeight: 400,
});
NoShrinkText.displayName = 'Elements:NoShrinkText';

const ElementsRowAttributeContainer = styled(NoShrinkText)({

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 */

import React, {PureComponent} from 'react';
import FlexColumn from './FlexColumn';
import styled from '@emotion/styled';
import {colors} from './colors';

const Anchor = styled.img({
  zIndex: 6,
  position: 'absolute',
  bottom: 0,
  left: '50%',
  transform: 'translate(-50%, calc(100% + 2px))',
});
Anchor.displayName = 'Popover.Anchor';

type Opts = {
  minWidth?: number;
  skewLeft?: boolean;
};

const PopoverContainer = styled(FlexColumn)<{opts?: Opts}>(props => ({
  backgroundColor: colors.white,
  borderRadius: 7,

border: 'none',
  background: 'none',
  outline: 'none',
  cursor: 'pointer',
  svg: css(size(24), {
    display: 'block',
    fill: 'currentColor'
  })
});

const MainHeading = styled.h1({
  display: 'flex',
  alignItems: 'center'
});

const HeadingImage = styled.img({
  width: '2em',
  margin: 0,
  marginRight: '0.5em'
});

const Markdown = styled.div({
  a: {
    color: colors.primary,
    textDecoration: 'none',
    ':hover': {
      textDecoration: 'underline'
    }
  },
  '.anchor': {
    color: 'inherit',
    svg: {

import React from 'react';
import styled from '@emotion/styled';

import Button from 'components/Button';
import languages from 'data/languages';
import { timing } from 'styles';
import * as color from 'utils/color';
import { UpdateSettings } from 'lib/settings';

import FullScreen from './FullScreen';

const Flag = styled.img({
  marginRight: '.5em',
  verticalAlign: 'middle',
});

const Language = styled.div(
  ({ first, theme }) => ({
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    padding: '1em 0',
    borderRadius: 2,
    border: `1px solid transparent`,
    borderTop: first ? undefined : `1px solid ${theme.mixer(0.125)}`,
    transitionProperty: 'background-color, color, border-color',
    transitionDuration: timing.normal,
    cursor: 'pointer',