feat: relocate Icon atom from WEB

Author: Uzhastin-Nikita

src/components/atoms/Icon/Icon.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { Icons } from 'src/components/atoms/Icon/Icon.types'
+
+import { getIcon } from 'src/components/atoms/Icon/Icon.utils'
+
+export type IconProps = {
+  name: Icons | string
+  tooltip?: string
+  onClick?: () => void
+  className?: string
+}
+
+export const Icon = ({ name, onClick, className, tooltip }: IconProps) => {
+  const IconComponent = getIcon(name)
+
+  return (
+    <div className={className} onClick={onClick} title={tooltip}>
+      <IconComponent />
+    </div>
+  )
+}

src/components/atoms/Icon/Icon.types.ts

@@ -0,0 +1,37 @@
+export enum Icons {
+  // social
+  telegram = 'telegram',
+  facebook = 'facebook',
+  vkontakte = 'vkontakte',
+  twitter = 'twitter',
+  github = 'github',
+
+  // common
+  gamepad = 'gamepad',
+  work = 'work',
+  house = 'house',
+  star = 'star',
+  domain = 'domain',
+  graphics = 'graphics',
+
+  // details
+  processor = 'processor',
+  motherboard = 'motherboard',
+  videocard = 'videocard',
+  ram = 'ram',
+  close = 'close',
+
+  // navLinks
+  call = 'call',
+  catalog = 'catalog',
+  delivery = 'delivery',
+  home = 'home',
+
+  // benefit
+  dollar = 'dollar',
+  guality = 'guality',
+  tool = 'tool',
+  modules = 'modules',
+  vector = 'vector',
+  envelope = 'envelope'
+}

src/components/atoms/Icon/Icon.utils.test.tsx

@@ -0,0 +1,7 @@
+import { ICONS } from './Icon.utils'
+
+describe('Icon.utils', () => {
+  it('should match snapshot', () => {
+    expect(ICONS).toMatchSnapshot()
+  })
+})

src/components/atoms/Icon/Icon.utils.ts

@@ -0,0 +1,73 @@
+// benefit
+import DollarImage from '../../../../public/images/benefit/dollar.svg'
+import EnvelopeImage from '../../../../public/images/benefit/envelope.svg'
+import GualityImage from '../../../../public/images/benefit/guality.svg'
+import ModulesImage from '../../../../public/images/benefit/modules.svg'
+import ToolImage from '../../../../public/images/benefit/tool.svg'
+import VectorImage from '../../../../public/images/benefit/vector.svg'
+
+// common
+import CloseImage from '../../../../public/images/common/close.svg'
+import DomainImage from '../../../../public/images/common/domain.svg'
+import GamepadImage from '../../../../public/images/common/gamepad.svg'
+import GraphicsImage from '../../../../public/images/common/graphics.svg'
+
+import HouseImage from '../../../../public/images/common/house.svg'
+import MotherboardImage from '../../../../public/images/common/motherboard.svg'
+import ProcessorImage from '../../../../public/images/common/processor.svg'
+import RamImage from '../../../../public/images/common/ram.svg'
+import StarImage from '../../../../public/images/common/star.svg'
+import VideocardImage from '../../../../public/images/common/videocard.svg'
+import WorkImage from '../../../../public/images/common/work.svg'
+
+// navLinks
+import CallImage from '../../../../public/images/navLinks/call.svg'
+import CatalogImage from '../../../../public/images/navLinks/catalog.svg'
+import DeliveryImage from '../../../../public/images/navLinks/delivery.svg'
+import HomeImage from '../../../../public/images/navLinks/home.svg'
+
+// social
+import FacebookImage from '../../../../public/images/social/facebook.svg'
+import GithubImage from '../../../../public/images/social/github.svg'
+import TelegramImage from '../../../../public/images/social/telegram.svg'
+import TwitterImage from '../../../../public/images/social/twitter.svg'
+import VKImage from '../../../../public/images/social/vkontakte.svg'
+
+import { Icons } from './Icon.types'
+
+export const ICONS: Record<Icons | string, string> = {
+  [Icons.telegram]: TelegramImage,
+  [Icons.facebook]: FacebookImage,
+  [Icons.vkontakte]: VKImage,
+  [Icons.twitter]: TwitterImage,
+  [Icons.github]: GithubImage,
+  // common
+  [Icons.gamepad]: GamepadImage,
+  [Icons.work]: WorkImage,
+  [Icons.house]: HouseImage,
+  [Icons.star]: StarImage,
+  [Icons.domain]: DomainImage,
+  [Icons.graphics]: GraphicsImage,
+  // details
+  [Icons.processor]: ProcessorImage,
+  [Icons.motherboard]: MotherboardImage,
+  [Icons.videocard]: VideocardImage,
+  [Icons.ram]: RamImage,
+  [Icons.close]: CloseImage,
+  // navLinks
+  [Icons.call]: CallImage,
+  [Icons.catalog]: CatalogImage,
+  [Icons.delivery]: DeliveryImage,
+  [Icons.home]: HomeImage,
+  // benefit
+  [Icons.dollar]: DollarImage,
+  [Icons.guality]: GualityImage,
+  [Icons.tool]: ToolImage,
+  [Icons.modules]: ModulesImage,
+  [Icons.vector]: VectorImage,
+  [Icons.envelope]: EnvelopeImage
+}
+
+export const getIcon = (name: Icons | string) => {
+  return ICONS[name]
+}

src/components/atoms/Icon/__snapshots__/Icon.utils.test.tsx.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon.utils should match snapshot 1`] = `
+Object {
+  "call": "svg",
+  "catalog": "svg",
+  "close": "svg",
+  "delivery": "svg",
+  "dollar": "svg",
+  "domain": "svg",
+  "envelope": "svg",
+  "facebook": "svg",
+  "gamepad": "svg",
+  "github": "svg",
+  "graphics": "svg",
+  "guality": "svg",
+  "home": "svg",
+  "house": "svg",
+  "modules": "svg",
+  "motherboard": "svg",
+  "processor": "svg",
+  "ram": "svg",
+  "star": "svg",
+  "telegram": "svg",
+  "tool": "svg",
+  "twitter": "svg",
+  "vector": "svg",
+  "videocard": "svg",
+  "vkontakte": "svg",
+  "work": "svg",
+}
+`;

src/components/atoms/Icon/index.ts

@@ -0,0 +1,3 @@
+export * from './Icon'
+export * from './Icon.types'
+export * from './Icon.utils'