Merge pull request #186 from blockscout/no-charka-icons

disallow @chakra-ui/icons

.eslintrc.js

 const RESTRICTED_MODULES = {
   paths: [
-    { name: 'dayjs', message: 'Please use lib/date/dayjs.ts' },
+    { name: 'dayjs', message: 'Please use lib/date/dayjs.ts instead of directly importing dayjs' },
+    { name: '@chakra-ui/icons', message: 'Using @chakra-ui/icons is prohibited. Please use regular svg-icon instead (see examples in "icons/" folder)' },
   ],
 };
 module.exports = {

icons/link.svg

+<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#link_svg__a)">
+    <path d="M5.547 6.073c1.303-1.303 3.469-1.303 4.772 0 1.171 1.172 1.345 3.04.382 4.387l-.026.038a.75.75 0 0 1-1.221-.872l.026-.038a1.89 1.89 0 0 0-2.874-2.435l-2.63 2.632c-.738.717-.738 1.934 0 2.672a1.887 1.887 0 0 0 2.433.202l.038-.047a.772.772 0 0 1 1.045.194.75.75 0 0 1-.173 1.048l-.038.026a3.389 3.389 0 0 1-4.366-5.154l2.632-2.653Zm6.914 5.833A3.388 3.388 0 0 1 7.307 7.54l.026-.038c.22-.335.689-.415 1.045-.173.338.22.417.689.176 1.045l-.026.038c-.537.731-.452 1.781.202 2.435a1.893 1.893 0 0 0 2.671 0l2.63-2.632c.738-.738.738-1.955 0-2.672a1.887 1.887 0 0 0-2.433-.202l-.037.026c-.338.242-.806.143-1.046-.174a.749.749 0 0 1 .174-1.046l.037-.026a3.389 3.389 0 0 1 4.367 5.153l-2.632 2.632Z" fill="currentColor"/>
+  </g>
+  <defs>
+    <clipPath id="link_svg__a">
+      <path fill="#fff" transform="translate(1.504 3)" d="M0 0h15v12H0z"/>
+    </clipPath>
+  </defs>
+</svg>

icons/sun.svg

+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m4.7 14.167-.592.591a.833.833 0 0 0 0 1.175.833.833 0 0 0 1.175 0l.592-.591A.833.833 0 0 0 4.7 14.167ZM4.166 10a.833.833 0 0 0-.833-.833H2.5a.833.833 0 1 0 0 1.666h.833A.833.833 0 0 0 4.166 10ZM10 4.167a.833.833 0 0 0 .833-.834V2.5a.833.833 0 1 0-1.667 0v.833a.833.833 0 0 0 .834.834ZM4.7 5.875a.833.833 0 0 0 1.175 0 .833.833 0 0 0 0-1.175l-.592-.592a.833.833 0 0 0-1.175 1.175l.592.592Zm10 .242a.833.833 0 0 0 .583-.242l.592-.592A.832.832 0 1 0 14.7 4.108l-.534.592a.833.833 0 0 0 0 1.175.833.833 0 0 0 .55.242H14.7Zm2.8 3.05h-.834a.833.833 0 0 0 0 1.666h.834a.833.833 0 1 0 0-1.666ZM10 15.833a.833.833 0 0 0-.834.834v.833a.833.833 0 1 0 1.667 0v-.833a.833.833 0 0 0-.833-.834Zm5.3-1.666a.833.833 0 0 0-1.134 1.133l.592.592a.833.833 0 0 0 1.175 0 .833.833 0 0 0 0-1.175l-.633-.55ZM10 5.417A4.583 4.583 0 1 0 14.583 10 4.592 4.592 0 0 0 10 5.417Zm0 7.5a2.917 2.917 0 1 1 0-5.833 2.917 2.917 0 0 1 0 5.833Z" fill="currentColor"/>
+</svg>

package.json

@@ -16,7 +16,6 @@
     "format-svg": "./node_modules/.bin/svgo -r ./icons"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^2.0.2",
     "@chakra-ui/react": "2.3.1",
     "@chakra-ui/theme-tools": "^2.0.2",
     "@emotion/react": "^11",

ui/apps/AppModal.tsx

-import { LinkIcon } from '@chakra-ui/icons';
 import {
   Box, Button, Heading, Icon, IconButton, Image, Link, List, Modal, ModalBody,
   ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Tag, Text,
@@ -9,6 +8,7 @@ import React, { useCallback } from 'react';
 import type { AppCategory, AppItemOverview } from 'types/client/apps';
 
 import { TEMPORARY_DEMO_APPS } from 'data/apps';
+import linkIcon from 'icons/link.svg';
 import ghIcon from 'icons/social/git.svg';
 import tgIcon from 'icons/social/telega.svg';
 import twIcon from 'icons/social/tweet.svg';
@@ -187,10 +187,10 @@ const AppModal = ({
               overflow="hidden"
             >
               <Icon
-                as={ LinkIcon }
+                as={ linkIcon }
                 display="inline"
                 verticalAlign="baseline"
-                boxSize={ 3 }
+                boxSize="18px"
                 marginRight={ 2 }
               />
 

ui/blocks/header/ColorModeToggler.tsx

 import type { UseCheckboxProps } from '@chakra-ui/checkbox';
 import { useCheckbox } from '@chakra-ui/checkbox';
-import { SunIcon } from '@chakra-ui/icons';
 import { useColorMode, useColorModeValue, Icon } from '@chakra-ui/react';
 import type {
   SystemStyleObject,
@@ -16,6 +15,7 @@ import { dataAttr, __DEV__ } from '@chakra-ui/utils';
 import * as React from 'react';
 
 import moonIcon from 'icons/moon.svg';
+import sunIcon from 'icons/sun.svg';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 export interface ColorModeTogglerProps
@@ -101,10 +101,11 @@ const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref)
           data-hover={ dataAttr(state.isHovered) }
           __css={ thumbStyles }
         />
-        <SunIcon
-          boxSize={ 4 }
-          margin={ 2 }
+        <Icon
+          boxSize={ 5 }
+          margin={ 1.5 }
           zIndex="docked"
+          as={ sunIcon }
           color={ useColorModeValue('gray.500', 'blue.600') }
           { ...transitionProps }
         />

ui/blocks/navigation/NavigationDesktop.tsx

-import { ChevronLeftIcon } from '@chakra-ui/icons';
-import { Flex, Box, VStack, useColorModeValue, useBreakpointValue } from '@chakra-ui/react';
+import { Flex, Box, VStack, Icon, useColorModeValue, useBreakpointValue } from '@chakra-ui/react';
 import React from 'react';
 
+import chevronIcon from 'icons/arrows/east-mini.svg';
 import * as cookies from 'lib/cookies';
 import useNavItems from 'lib/hooks/useNavItems';
 import useNetwork from 'lib/hooks/useNetwork';
@@ -78,7 +78,8 @@ const NavigationDesktop = () => {
         </Box>
       ) }
       <NavFooter isCollapsed={ isCollapsed } hasAccount={ hasAccount }/>
-      <ChevronLeftIcon
+      <Icon
+        as={ chevronIcon }
         width={ 6 }
         height={ 6 }
         border="1px"

ui/blocks/searchBar/SearchBarDesktop.tsx

-import { SearchIcon } from '@chakra-ui/icons';
-import { InputGroup, Input, InputLeftAddon, InputLeftElement, useColorModeValue } from '@chakra-ui/react';
+import { InputGroup, Input, InputLeftAddon, InputLeftElement, Icon, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 import type { ChangeEvent, FormEvent } from 'react';
 
+import searchIcon from 'icons/search.svg';
+
 interface Props {
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
@@ -14,7 +15,7 @@ const SearchBarDesktop = ({ onChange, onSubmit }: Props) => {
       <InputGroup>
         <InputLeftAddon w="111px">All filters</InputLeftAddon>
         <InputLeftElement w={ 6 } ml="132px" mr={ 2.5 }>
-          <SearchIcon w={ 5 } h={ 5 } color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
+          <Icon as={ searchIcon } boxSize={ 6 } color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
         </InputLeftElement>
         <Input
           paddingInlineStart="50px"

ui/blocks/searchBar/SearchBarMobile.tsx

-import { SearchIcon } from '@chakra-ui/icons';
-import { InputGroup, Input, InputLeftElement, useColorModeValue, chakra } from '@chakra-ui/react';
+import { InputGroup, Input, InputLeftElement, Icon, useColorModeValue, chakra } from '@chakra-ui/react';
 import clamp from 'lodash/clamp';
 import throttle from 'lodash/throttle';
 import React from 'react';
 import type { ChangeEvent, FormEvent } from 'react';
 
+import searchIcon from 'icons/search.svg';
 import isBrowser from 'lib/isBrowser';
 
 const SCROLL_DIFF_THRESHOLD = 20;
@@ -64,7 +64,7 @@ const SearchBarMobile = ({ onChange, onSubmit }: Props) => {
     >
       <InputGroup size="sm">
         <InputLeftElement >
-          <SearchIcon w={ 4 } h={ 4 } color={ searchIconColor }/>
+          <Icon as={ searchIcon } boxSize={ 4 } color={ searchIconColor }/>
         </InputLeftElement>
         <Input
           paddingInlineStart="38px"

ui/pages/PublicTags.tsx

-import { ArrowBackIcon } from '@chakra-ui/icons';
-import { Box, Link, Text } from '@chakra-ui/react';
+import { Box, Link, Text, Icon } from '@chakra-ui/react';
 import React, { useCallback, useState } from 'react';
 import { animateScroll } from 'react-scroll';
 
 import type { PublicTag } from 'types/api/account';
 
+import eastArrowIcon from 'icons/arrows/east.svg';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useToast from 'lib/hooks/useToast';
 import PublicTagsData from 'ui/publicTags/PublicTagsData';
@@ -80,7 +80,7 @@ const PublicTagsComponent: React.FC = () => {
       <Box h="100%">
         { isMobile && screen === 'form' && (
           <Link display="inline-flex" alignItems="center" mb={ 6 } onClick={ onGoBack }>
-            <ArrowBackIcon w={ 6 } h={ 6 }/>
+            <Icon as={ eastArrowIcon } boxSize={ 6 } transform="rotate(180deg)"/>
             <Text variant="inherit" fontSize="sm" ml={ 2 }>Public tags</Text>
           </Link>
         ) }

ui/shared/FilterInput.tsx

-import { SearchIcon } from '@chakra-ui/icons';
-import { Input, InputGroup, InputLeftElement, useColorModeValue, chakra } from '@chakra-ui/react';
+import { Input, InputGroup, InputLeftElement, Icon, useColorModeValue, chakra } from '@chakra-ui/react';
 import type { ChangeEvent } from 'react';
 import React, { useCallback, useState } from 'react';
 
+import searchIcon from 'icons/search.svg';
+
 type Props = {
   onChange: (searchTerm: string) => void;
   className?: string;
@@ -28,7 +29,7 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder }: Props) =
       <InputLeftElement
         pointerEvents="none"
       >
-        <SearchIcon color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
+        <Icon as={ searchIcon } color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
       </InputLeftElement>
 
       <Input

ui/shared/Filters.tsx

@@ -2,12 +2,12 @@
 // migrate to separate components
 //    ui/shared/FilterButton.tsx + custom filter
 //    ui/shared/FilterInput.tsx
-import { SearchIcon } from '@chakra-ui/icons';
 import { Flex, Icon, Button, Circle, InputGroup, InputLeftElement, Input, useColorModeValue } from '@chakra-ui/react';
 import type { ChangeEvent } from 'react';
 import React from 'react';
 
 import filterIcon from 'icons/filter.svg';
+import searchIcon from 'icons/search.svg';
 
 const FilterIcon = <Icon as={ filterIcon } boxSize={ 5 }/>;
 
@@ -45,7 +45,7 @@ const Filters = () => {
       </Button>
       <InputGroup size="xs" ml={ 3 } maxW="360px">
         <InputLeftElement ml={ 1 }>
-          <SearchIcon w={ 5 } h={ 5 } color={ searchIconColor }/>
+          <Icon as={ searchIcon } boxSize={ 5 } color={ searchIconColor }/>
         </InputLeftElement>
         <Input
           paddingInlineStart="38px"

yarn.lock

@@ -584,13 +584,6 @@
   dependencies:
     "@chakra-ui/shared-utils" "2.0.1"
 
-"@chakra-ui/icons@^2.0.2":
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-2.0.9.tgz#35edcf9c61b8e158a5d03aeda6bd4e756960dfc7"
-  integrity sha512-6xvV2rC8wATgfnRH+fC9mi0nLcgKjhHKO29lV1pGioVI0yWK0dqc//zjcyBhMMpW5ABnSfig7ujVBf3op/Syzg==
-  dependencies:
-    "@chakra-ui/icon" "3.0.9"
-
 "@chakra-ui/image@2.0.10":
   version "2.0.10"
   resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-2.0.10.tgz#712c0e1c579d959225bd8316d8d8f66cbeb95bb8"