fix(#2317): mergee

src/features/Icons/Close/index.tsx

@@ -0,0 +1,18 @@
+type Props = {
+  size?: number,
+}
+
+export const Close = ({ size = 16 }: Props) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox='0 0 16 16'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M14.7097 1.29006C15.2077 1.78798 15.2077 2.59527 14.7097 3.09319L9.80326 7.99996L14.7097 12.9067C15.1662 13.3632 15.2042 14.0796 14.8239 14.5793L14.7097 14.7099C14.2118 15.2078 13.4045 15.2078 12.9066 14.7099L7.99984 9.80338L3.09307 14.7099C2.59515 15.2078 1.78786 15.2078 1.28994 14.7099C0.792024 14.212 0.792024 13.4047 1.28994 12.9067L6.19642 7.99996L1.28994 3.09319C0.833518 2.63676 0.795482 1.92038 1.17584 1.42063L1.28994 1.29006C1.78786 0.792146 2.59515 0.792146 3.09307 1.29006L7.99984 6.19654L12.9066 1.29006C13.4045 0.792146 14.2118 0.792146 14.7097 1.29006Z'
+      fill='currentColor'
+    />
+  </svg>
+)

src/features/SportIcon/index.tsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components/macro'
+
+import { SportTypes } from 'config'
+import { getSportLexic } from 'helpers'
+
+type IconProps = {
+  src: string,
+}
+
+const Icon = styled.span<IconProps>`
+  display: inline-block;
+  height: 10px;
+  min-width: 10px;
+
+  background-image: url(/images/${({ src }) => `${src}-icon`}.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+`
+
+type Props = {
+  sport: SportTypes,
+}
+
+export const SportIcon = ({ sport }: Props) => (
+  <Icon src={getSportLexic(sport)} />
+)