SVG maintenance (#704)

* move assets to shared folder

* update svgr config, add new codegen scripts

* patch svgo, generate new svg components

* Update package.json

Co-authored-by: Klaudiusz Dembler <accounts@kdembler.com>

package.json

@@ -29,7 +29,9 @@
     "mocking:channels": "node scripts/mocking/generateChannels.js",
     "codegen:graphql": "graphql-codegen --config codegen.config.yml",
     "codegen:graphql-watch": "yarn codegen:graphql --watch",
-    "codegen:icons": "svgr --config-file svgr-icons.config.js -d src/shared/icons src/shared/icons/svgs",
+    "codegen:icons": "svgr --config-file svgr.config.js -d src/shared/icons src/shared/icons/svgs",
+    "codegen:illustrations": "svgr --config-file svgr.config.js -d src/shared/illustrations src/shared/illustrations/svgs",
+    "codegen:svgs": "yarn codegen:illustrations && yarn codegen:icons",
     "postinstall": "patch-package"
   },
   "lint-staged": {

patches/svgo+1.3.2.patch

@@ -0,0 +1,12 @@
+diff --git a/node_modules/svgo/plugins/_collections.js b/node_modules/svgo/plugins/_collections.js
+index 8179f30..d3016ed 100644
+--- a/node_modules/svgo/plugins/_collections.js
++++ b/node_modules/svgo/plugins/_collections.js
+@@ -1519,6 +1519,7 @@ exports.elems = {
+             'x',
+             'y',
+             'width',
++            'mask-type',
+             'height',
+             'maskUnits',
+             'maskContentUnits'

src/components/BackgroundPattern.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import styled from '@emotion/styled'
 
-import { ReactComponent as BackgroundPatternSVG } from '@/assets/bg-pattern.svg'
 import { zIndex, transitions, media } from '@/shared/theme'
+import { SvgBgPattern } from '@/shared/illustrations'
 
 const PATTERN_OFFSET = {
   SMALL: '-150px',
@@ -21,7 +21,7 @@ const StyledBackgroundPatternContainer = styled.div`
   }
 `
 
-const StyledBackgroundPattern = styled(BackgroundPatternSVG)`
+const StyledBackgroundPattern = styled(SvgBgPattern)`
   display: none;
   position: absolute;
   transform: scale(1.3);

src/components/Dialogs/TransactionDialog/TransactionDialog.style.ts

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled'
 import { sizes, media, colors, transitions } from '@/shared/theme'
-import { ReactComponent as TransactionIllustration } from '@/assets/transaction-illustration.svg'
 import Spinner from '@/shared/components/Spinner'
 import { css } from '@emotion/react'
+import { SvgTransactionIllustration } from '@/shared/illustrations'
 
 type StepProps = {
   isActive?: boolean
@@ -37,7 +37,7 @@ export const TextContainer = styled.div`
   position: relative;
 `
 
-export const StyledTransactionIllustration = styled(TransactionIllustration)`
+export const StyledTransactionIllustration = styled(SvgTransactionIllustration)`
   position: absolute;
   top: ${sizes(2)};
   left: -50px;

src/components/Sidenav/SidenavBase.style.ts

@@ -1,10 +1,10 @@
-import { ReactComponent as UnstyledFullLogo } from '@/assets/full-logo.svg'
 import { Text } from '@/shared/components'
 import { colors, sizes, transitions, typography, zIndex, media } from '@/shared/theme'
 import isPropValid from '@emotion/is-prop-valid'
 import styled from '@emotion/styled'
 import { Link, LinkProps } from 'react-router-dom'
 import { badgeStyles } from '@/shared/components/Badge'
+import { SvgJoystreamFullLogo } from '@/shared/illustrations'
 
 export const EXPANDED_SIDENAVBAR_WIDTH = 360
 export const NAVBAR_LEFT_PADDING = 24
@@ -54,7 +54,7 @@ export const LogoLink = styled(Link)`
   }
 `
 
-export const Logo = styled(UnstyledFullLogo)`
+export const Logo = styled(SvgJoystreamFullLogo)`
   height: ${sizes(8)};
 `
 

src/components/SignInSteps/AccountStep.style.ts

@@ -1,5 +1,6 @@
 import { Button, Text, RadioButton } from '@/shared/components'
 import Spinner from '@/shared/components/Spinner'
+import { SvgAccountCreationIllustration } from '@/shared/illustrations'
 import { sizes, colors, typography, transitions, media } from '@/shared/theme'
 import styled from '@emotion/styled'
 import { StepWrapper } from './SignInSteps.style'
@@ -24,9 +25,7 @@ export const IconGroup = styled.div`
   }
 `
 
-export const AccountStepImg = styled.img`
-  object-fit: cover;
-  max-width: 100%;
+export const AccountStepImg = styled(SvgAccountCreationIllustration)`
   height: 210px;
 `
 

src/components/SignInSteps/AccountStep.tsx

@@ -1,4 +1,3 @@
-import accountCreation from '@/assets/account-creation.svg'
 import { useUser } from '@/hooks'
 import { Text } from '@/shared/components'
 import { transitions } from '@/shared/theme'
@@ -20,9 +19,15 @@ import {
   SubTitle,
   StyledStepWrapper,
 } from './AccountStep.style'
-import polkadotIcon from '@/assets/polkadot-logo.svg'
-import joystreamIcon from '@/assets/joystream-logo.svg'
-import { StepFooter, BottomBarIcon, StepSubTitle, StepTitle, StepWrapper, StyledLogo } from './SignInSteps.style'
+import {
+  StepFooter,
+  BottomBarIcon,
+  StepSubTitle,
+  StepTitle,
+  StepWrapper,
+  StyledPolkadotLogo,
+  StyledJoystreamLogo,
+} from './SignInSteps.style'
 import { useNavigate } from 'react-router'
 import { SvgGlyphChannel, SvgOutlineConnect } from '@/shared/icons'
 
@@ -62,7 +67,7 @@ const AccountStep: React.FC<AccountStepProps> = ({ nextStepPath }) => {
       >
         {!accountsWithNoMembership?.length ? (
           <StyledStepWrapper withBottomBar>
-            <AccountStepImg src={accountCreation} />
+            <AccountStepImg />
             <StepTitle variant="h4">Create blockchain account</StepTitle>
             <SubTitle variant="body2" secondary>
               Use the Polkadot extension to generate your personal keypair. Follow these instructions:
@@ -89,9 +94,9 @@ const AccountStep: React.FC<AccountStepProps> = ({ nextStepPath }) => {
           <form onSubmit={handleSubmitSelectedAccount}>
             <StepWrapper>
               <IconGroup>
-                <StyledLogo src={polkadotIcon} alt="Polkadot icon" />
+                <StyledPolkadotLogo />
                 <SvgOutlineConnect />
-                <StyledLogo src={joystreamIcon} alt="Joystream icon" />
+                <StyledJoystreamLogo />
               </IconGroup>
               <StepTitle variant="h4">Connect account</StepTitle>
               <StepSubTitle secondary>

src/components/SignInSteps/ExtensionStep.tsx

@@ -1,7 +1,13 @@
 import React, { useEffect } from 'react'
 import { StyledButton } from './ExtensionStep.style'
-import { StepFooter, BottomBarIcon, StepSubTitle, StepTitle, StepWrapper, StyledLogo } from './SignInSteps.style'
-import polkadotIcon from '@/assets/polkadot-logo.svg'
+import {
+  StepFooter,
+  BottomBarIcon,
+  StepSubTitle,
+  StepTitle,
+  StepWrapper,
+  StyledPolkadotLogo,
+} from './SignInSteps.style'
 import { Text } from '@/shared/components'
 import { useNavigate } from 'react-router'
 import { useRouterQuery, useUser } from '@/hooks'
@@ -24,7 +30,7 @@ const ExtensionStep: React.FC<ExtensionStepProps> = ({ nextStepPath }) => {
 
   return (
     <StepWrapper withBottomBar>
-      <StyledLogo src={polkadotIcon} alt="polkadot icon" />
+      <StyledPolkadotLogo />
       <StepTitle variant="h4">Add Polkadot extension</StepTitle>
       <StepSubTitle secondary variant="body2">
         To manage your blockchain account, you will need a Polkadot browser extension. Please install it using the

src/components/SignInSteps/SignInSteps.style.ts

@@ -1,5 +1,6 @@
 import { Text } from '@/shared/components'
 import { SvgGlyphWarning } from '@/shared/icons/GlyphWarning'
+import { SvgJoystreamLogo, SvgPolkadotLogo } from '@/shared/illustrations'
 import { sizes, colors } from '@/shared/theme'
 import styled from '@emotion/styled'
 
@@ -17,7 +18,11 @@ export const StepWrapper = styled.div<StepWrapperProps>`
   margin-top: ${sizes(10)};
 `
 
-export const StyledLogo = styled.img`
+export const StyledJoystreamLogo = styled(SvgJoystreamLogo)`
+  height: 40px;
+  width: 40px;
+`
+export const StyledPolkadotLogo = styled(SvgPolkadotLogo)`
   height: 40px;
   width: 40px;
 `

src/components/Topbar/TopbarBase.style.tsx

@@ -2,10 +2,9 @@ import styled from '@emotion/styled'
 import { Text } from '@/shared/components'
 import { StyledSearchbar } from '@/components/Topbar/ViewerTopbar/ViewerTopbar.style'
 import { colors, sizes, transitions, typography, zIndex, media } from '@/shared/theme'
-import { ReactComponent as UnstyledShortLogo } from '@/assets/logo.svg'
-import { ReactComponent as UnstyledFullLogoDefault } from '@/assets/full-logo.svg'
 import { Link } from 'react-router-dom'
 import { TopbarVariant } from './TopbarBase'
+import { SvgJoystreamFullLogo, SvgJoystreamOneLetterLogo } from '@/shared/illustrations'
 
 type TopNavbarStyleProps = {
   hasFocus?: boolean
@@ -74,7 +73,7 @@ export const StudioText = styled(Text)`
   }
 `
 
-export const ShortLogo = styled(UnstyledShortLogo)`
+export const ShortLogo = styled(SvgJoystreamOneLetterLogo)`
   display: block;
   height: ${sizes(8)};
 
@@ -83,7 +82,7 @@ export const ShortLogo = styled(UnstyledShortLogo)`
   }
 `
 
-export const FullLogo = styled(UnstyledFullLogoDefault)<LogoContainerProps>`
+export const FullLogo = styled(SvgJoystreamFullLogo)<LogoContainerProps>`
   display: none;
   height: ${sizes(8)};
 

src/components/ViewErrorFallback.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import styled from '@emotion/styled'
 import { FallbackRender } from '@sentry/react/dist/errorboundary'
 
-import { ReactComponent as ErrorIllustration } from '@/assets/error.svg'
 import { Button, Text } from '@/shared/components'
 import { sizes, colors } from '@/shared/theme'
+import { SvgWellErrorIllustration } from '@/shared/illustrations'
 
 const Container = styled.div`
   margin: ${sizes(20)} auto 0;
@@ -37,7 +37,7 @@ const ErrorFallback: FallbackRender = ({ error, componentStack, resetError }) =>
   console.error('An error occurred.', { componentStack, error })
   return (
     <Container>
-      <ErrorIllustration />
+      <SvgWellErrorIllustration />
       <Message>
         <Title variant="h3">Oops! An Error occurred.</Title>
         <Subtitle>We could not acquire expected results. Please try reloading or return to the home page.</Subtitle>

src/shared/components/Avatar/Avatar.style.tsx

@@ -3,8 +3,7 @@ import { css, SerializedStyles } from '@emotion/react'
 import { TransitionGroup } from 'react-transition-group'
 import { colors, transitions, typography, media } from '@/shared/theme'
 import Placeholder from '../Placeholder'
-import { ReactComponent as Silhouette } from '@/assets/avatar-silhouette.svg'
-
+import { SvgAvatarSilhouette } from '@/shared/illustrations'
 export type AvatarSize = 'preview' | 'cover' | 'view' | 'default' | 'fill' | 'small'
 
 type ContainerProps = {
@@ -139,7 +138,7 @@ export const StyledImage = styled.img`
   object-fit: cover;
   border-radius: 100%;
 `
-export const SilhouetteAvatar = styled(Silhouette)`
+export const SilhouetteAvatar = styled(SvgAvatarSilhouette)`
   position: absolute;
   width: 100%;
   height: 100%;

src/shared/components/TextArea/TextArea.style.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import resizeIcon from '../../icons/svgs/glyph-resize.svg'
+import resizeIcon from '@/shared/icons/svgs/glyph-resize.svg'
 
 export const StyledTextArea = styled.textarea`
   width: 100%;

src/shared/icons/AlertError.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgAlertError = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"

src/shared/icons/AlertInfo.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgAlertInfo = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"

src/shared/icons/AlertLoader.tsx

@@ -1,9 +1,9 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgAlertLoader = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <circle cx={12} cy={12} r={9} stroke="#B5C1C9" strokeWidth={2} />
-    <mask id="alert-loader_svg__a" maskUnits="userSpaceOnUse" x={2} y={2} width={20} height={20}>
+    <mask id="alert-loader_svg__a" mask-type="alpha" maskUnits="userSpaceOnUse" x={2} y={2} width={20} height={20}>
       <circle cx={12} cy={12} r={9} stroke="#4038FF" strokeWidth={2} />
     </mask>
     <g mask="url(#alert-loader_svg__a)">

src/shared/icons/AlertSuccess.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgAlertSuccess = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"

src/shared/icons/AlertWarning.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgAlertWarning = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"

src/shared/icons/GlyphAddImage.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphAddImage = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"

src/shared/icons/GlyphAddVideo.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphAddVideo = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"

src/shared/icons/GlyphChannel.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphChannel = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M3 13.143V13a5 5 0 0110 0v.143a.857.857 0 01-.857.857H3.857A.857.857 0 013 13.143z" fill="#F4F6F8" />
     <circle cx={8} cy={4} r={2} fill="#F4F6F8" />
   </svg>

src/shared/icons/GlyphCheck.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphCheck = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M13 4l-7 8-3-3" stroke="#F4F6F8" strokeWidth={2} />
   </svg>
 )

src/shared/icons/GlyphChevronDown.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphChevronDown = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M14 5l-6 6-6-6" stroke="#F4F6F8" strokeWidth={2} />
   </svg>
 )

src/shared/icons/GlyphChevronLeft.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphChevronLeft = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M11 14L5 8l6-6" stroke="#F4F6F8" strokeWidth={2} />
   </svg>
 )

src/shared/icons/GlyphChevronRight.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphChevronRight = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M5 2l6 6-6 6" stroke="#F4F6F8" strokeWidth={2} />
   </svg>
 )

src/shared/icons/GlyphChevronUp.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphChevronUp = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M2 11l6-6 6 6" stroke="#F4F6F8" strokeWidth={2} />
   </svg>
 )

src/shared/icons/GlyphClose.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphClose = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M3 13l5-5 5 5M13 3L8 8 3 3" stroke="#F4F6F8" strokeWidth={2} />
   </svg>
 )

src/shared/icons/GlyphCopy.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphCopy = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <rect x={2} y={6} width={8} height={8} rx={1} fill="#F4F6F8" />
     <path fill="#F4F6F8" d="M6 2h8v2H6z" />
     <path fill="#F4F6F8" d="M12 10V2h2v8z" />

src/shared/icons/GlyphDraft.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphDraft = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M3 3a1 1 0 011-1h3a1 1 0 011 1v4a1 1 0 001 1h3a1 1 0 011 1v4a1 1 0 01-1 1H4a1 1 0 01-1-1V3z"
       fill="#F4F6F8"

src/shared/icons/GlyphEdit.tsx

@@ -1,9 +1,9 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphEdit = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M5 11l4-4" stroke="#F4F6F8" strokeWidth={4} />
-    <mask id="glyph-edit_svg__a" maskUnits="userSpaceOnUse" x={0} y={8} width={8} height={8}>
+    <mask id="glyph-edit_svg__a" mask-type="alpha" maskUnits="userSpaceOnUse" x={0} y={8} width={8} height={8}>
       <path d="M2 14l4-4" stroke="#fff" strokeWidth={4} />
     </mask>
     <g mask="url(#glyph-edit_svg__a)">

src/shared/icons/GlyphExternal.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphExternal = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"

src/shared/icons/GlyphFileImage.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphFileImage = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"

src/shared/icons/GlyphFileVideo.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphFileVideo = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"

src/shared/icons/GlyphHide.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphHide = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"

src/shared/icons/GlyphImage.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphImage = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"

src/shared/icons/GlyphInfo.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphInfo = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"

src/shared/icons/GlyphLink.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphLink = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M7 7L3 3M8 13l-.293.293A2.414 2.414 0 016 14v0c-.64 0-1.254-.254-1.707-.707l-1.586-1.586A2.414 2.414 0 012 10v0c0-.64.254-1.254.707-1.707L3 8M8 3l.293-.293A2.414 2.414 0 0110 2v0c.64 0 1.254.254 1.707.707l1.586 1.586C13.746 4.746 14 5.36 14 6v0c0 .64-.254 1.254-.707 1.707L13 8M13 13L9 9"
       stroke="#F4F6F8"

src/shared/icons/GlyphLoad.tsx

@@ -1,8 +1,8 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphLoad = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <mask id="glyph-load_svg__a" maskUnits="userSpaceOnUse" x={1} y={1} width={14} height={14}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <mask id="glyph-load_svg__a" mask-type="alpha" maskUnits="userSpaceOnUse" x={1} y={1} width={14} height={14}>
       <circle
         cx={8}
         cy={8}
@@ -17,7 +17,7 @@ export const SvgGlyphLoad = (props: React.SVGProps<SVGSVGElement>) => (
     <g mask="url(#glyph-load_svg__a)">
       <path d="M8 0h8v16H0l4-4 2-2H0V6l8 2-8-4V1h4l4 3V0z" fill="#F4F6F8" />
     </g>
-    <mask id="glyph-load_svg__b" maskUnits="userSpaceOnUse" x={1} y={1} width={14} height={14}>
+    <mask id="glyph-load_svg__b" mask-type="alpha" maskUnits="userSpaceOnUse" x={1} y={1} width={14} height={14}>
       <circle cx={8} cy={8} r={6} stroke="#fff" strokeWidth={2} />
     </mask>
     <g mask="url(#glyph-load_svg__b)">

src/shared/icons/GlyphLock.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphLock = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <rect x={2} y={7} width={12} height={8} rx={1} fill="#F4F6F8" />
     <path d="M11 8V5a3 3 0 00-3-3v0a3 3 0 00-3 3v3" stroke="#F4F6F8" strokeWidth={2} />
   </svg>

src/shared/icons/GlyphLogOut.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphLogOut = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M11 5l3 3-3 3" stroke="#F4F6F8" strokeWidth={2} />
     <path fill="#F4F6F8" d="M9 9V7h4v2z" />
     <path

src/shared/icons/GlyphMenu.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphMenu = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M2 13h12v-2H2v2zm0-4h12V7H2v2zm0-6v2h12V3H2z" fill="#F4F6F8" />
   </svg>
 )

src/shared/icons/GlyphMinus.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphMinus = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path fill="#F4F6F8" d="M3 9V7h10v2z" />
   </svg>
 )

src/shared/icons/GlyphMore.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphMore = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path fill="#F4F6F8" d="M7 1h2v2H7zM7 7h2v2H7zM7 13h2v2H7z" />
   </svg>
 )

src/shared/icons/GlyphNewChannel.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphNewChannel = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path fillRule="evenodd" clipRule="evenodd" d="M5 8a4 4 0 00-4 4v1a1 1 0 001 1h6v-2H5V8z" fill="#F4F6F8" />
     <path d="M7 9h8M11 13V5" stroke="#F4F6F8" strokeWidth={2} />
     <circle cx={6} cy={4} r={2} fill="#F4F6F8" />

src/shared/icons/GlyphNewTab.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphNewTab = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M5 11l3-3 3 3M8 8v7" stroke="#F4F6F8" strokeWidth={2} />
     <path d="M2 13V3a1 1 0 011-1h10a1 1 0 011 1v10" stroke="#F4F6F8" strokeWidth={2} />
     <path d="M14 10v3a1 1 0 01-1 1h-2m-9-4v3a1 1 0 001 1h2M3 4h10" stroke="#F4F6F8" strokeWidth={2} />

src/shared/icons/GlyphPan.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphPan = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M12 6l2 2-2 2M4 10L2 8l2-2M6 4l2-2 2 2M10 12l-2 2-2-2" stroke="#F4F6F8" strokeWidth={2} />
   </svg>
 )

src/shared/icons/GlyphPlay.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphPlay = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"

src/shared/icons/GlyphPlus.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphPlus = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M8 14V8h6M8 2v6H2" stroke="#F4F6F8" strokeWidth={2} />
   </svg>
 )

src/shared/icons/GlyphResize.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphResize = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path fill="#F4F6F8" d="M12.415 15.243L11 13.828 13.829 11l1.414 1.414zM6.414 14.9L5 13.486 13.485 5 14.9 6.415z" />
   </svg>
 )

src/shared/icons/GlyphRetry.tsx

@@ -1,9 +1,9 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphRetry = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <g clipPath="url(#glyph-retry_svg__clip0)">
-      <mask id="glyph-retry_svg__a" maskUnits="userSpaceOnUse" x={1} y={1} width={14} height={14}>
+      <mask id="glyph-retry_svg__a" mask-type="alpha" maskUnits="userSpaceOnUse" x={1} y={1} width={14} height={14}>
         <circle
           cx={8}
           cy={8}
@@ -18,7 +18,7 @@ export const SvgGlyphRetry = (props: React.SVGProps<SVGSVGElement>) => (
       <g mask="url(#glyph-retry_svg__a)">
         <path d="M9 0h7v16H0l4-4 2-2H0V6l8 2-8-4V1h4l5 6 3-3.5L9 0z" fill="#F4F6F8" />
       </g>
-      <mask id="glyph-retry_svg__b" maskUnits="userSpaceOnUse" x={1} y={1} width={14} height={14}>
+      <mask id="glyph-retry_svg__b" mask-type="alpha" maskUnits="userSpaceOnUse" x={1} y={1} width={14} height={14}>
         <circle cx={8} cy={8} r={6} stroke="#fff" strokeWidth={2} />
       </mask>
       <g mask="url(#glyph-retry_svg__b)">

src/shared/icons/GlyphShow.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphShow = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"

src/shared/icons/GlyphSoundOff.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphSoundOff = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"

src/shared/icons/GlyphSoundOn.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphSoundOn = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M3 6l2-4h2v12H5l-2-4H2a1 1 0 01-1-1V7a1 1 0 011-1h1z" fill="#F4F6F8" />
     <path d="M9 13A5 5 0 009 3M9 9a1 1 0 000-2" stroke="#F4F6F8" strokeWidth={2} />
   </svg>

src/shared/icons/GlyphTrash.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphTrash = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M2 3a1 1 0 011-1h10a1 1 0 011 1v1H2V3zM3 6h10v8a1 1 0 01-1 1H4a1 1 0 01-1-1V6z" fill="#F4F6F8" />
     <path d="M6 1h4l2 2H4l2-2z" fill="#F4F6F8" />
   </svg>

src/shared/icons/GlyphUpload.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphUpload = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M4 7l4-4 4 4M8 3v7M13 11v1a1 1 0 01-1 1H4a1 1 0 01-1-1v-1" stroke="#F4F6F8" strokeWidth={2} />
   </svg>
 )

src/shared/icons/GlyphZoomIn.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphZoomIn = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M11 11l3 3" stroke="#F4F6F8" strokeWidth={2} />
     <path
       fillRule="evenodd"

src/shared/icons/GlyphZoomOut.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgGlyphZoomOut = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M11 11l3 3" stroke="#F4F6F8" strokeWidth={2} />
     <path fillRule="evenodd" clipRule="evenodd" d="M8 14A6 6 0 108 2a6 6 0 000 12zM4 9h8V7H4v2z" fill="#F4F6F8" />
   </svg>

src/shared/icons/LargeEdit.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgLargeEdit = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={48} height={48} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={48} height={48} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M8 41h32" stroke="#F4F6F8" strokeWidth={2} />
     <path
       fillRule="evenodd"

src/shared/icons/LargeUploadFailed.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgLargeUploadFailed = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={48} height={48} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={48} height={48} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <mask id="large-upload-failed_svg__a" maskUnits="userSpaceOnUse" x={7} y={2} width={34} height={44} fill="#000">
       <path fill="#fff" d="M7 2h34v44H7z" />
       <path d="M9 44h30V14L29 4H9v40z" />

src/shared/icons/LargeUploadImage.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgLargeUploadImage = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={48} height={48} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={48} height={48} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M7 29l18-9.5 4 5.5a4 4 0 00-4 4v4H7v-4z" fill="#F4F6F8" />
     <path d="M25 36H5a1 1 0 01-1-1V9a1 1 0 011-1h30a1 1 0 011 1v16" stroke="#F4F6F8" strokeWidth={2} />
     <path

src/shared/icons/LargeUploadVideo.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgLargeUploadVideo = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={48} height={48} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={48} height={48} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M23 36H3a1 1 0 01-1-1V9a1 1 0 011-1h30a1 1 0 011 1v16" stroke="#F4F6F8" strokeWidth={2} />
     <path d="M16 18l7 4-7 4v-8z" fill="#F4F6F8" />
     <path

src/shared/icons/NavChannel.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgNavChannel = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <circle cx={12} cy={9} r={3} stroke="#F4F6F8" strokeWidth={2} />
     <path
       d="M10 22h7a1 1 0 001-1v-1a4 4 0 00-4-4h-4a4 4 0 00-4 4v2"

src/shared/icons/NavChannels.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgNavChannels = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <circle cx={16} cy={7} r={3} stroke="#F4F6F8" strokeWidth={2} />
     <circle cx={6} cy={7} r={1} stroke="#F4F6F8" strokeWidth={2} />
     <path

src/shared/icons/NavFollowing.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgNavFollowing = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M10 19.313l-2.387 1.255a1 1 0 01-1.45-1.055l.748-4.367a1 1 0 00-.287-.885L3.45 11.168a1 1 0 01.554-1.705l4.385-.637a1 1 0 00.753-.547l1.96-3.972a1 1 0 011.794 0l1.96 3.972a1 1 0 00.753.547l4.385.637a1 1 0 01.554 1.705L19 12.678M23 21h-9M23 17h-9"
       stroke="#F4F6F8"

src/shared/icons/NavHome.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgNavHome = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M15 20v1a1 1 0 001 1h5a1 1 0 001-1v-9.555a1 1 0 00-.331-.743L12 2l-9.669 8.702a1 1 0 00-.331.743V21a1 1 0 001 1h5c.552 0 1-.446 1-.998V17a1 1 0 011-1h5"
       stroke="#F4F6F8"

src/shared/icons/NavMenu.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgNavMenu = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="#F4F6F8" />
   </svg>
 )

src/shared/icons/NavNew.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgNavNew = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M1 22V4.125c0-.564.21-1.104.586-1.503A1.942 1.942 0 013 2h18c.53 0 1.04.224 1.414.622.375.399.586.94.586 1.503v10.75c0 .564-.21 1.104-.586 1.503A1.942 1.942 0 0121 17H5"
       stroke="#F4F6F8"

src/shared/icons/NavPopular.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgNavPopular = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M17.292 9C19 10 20 12.61 20 15c0 3.012-1.54 5.635-4 7h-1c0-6-2.452-6-4-6 0 2-.6 6-3 6-2.46-1.365-4-3.988-4-7 0-1.892.657-3.63 1.755-5C7 8 11 6 11 2h1c1.485 1.788 3.274 6.158 1 9"
       stroke="#F4F6F8"

src/shared/icons/NavSettings.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgNavSettings = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M20 12a8.023 8.023 0 00-.188-1.713l2.01-1.522a1 1 0 00.263-1.297l-1.118-1.936a1 1 0 00-1.254-.42l-2.33.982a7.984 7.984 0 00-2.961-1.719l-.313-2.5A1 1 0 0013.117 1h-2.234a1 1 0 00-.993.876l-.312 2.499c-1.1.352-2.11.939-2.961 1.719l-2.33-.983a1 1 0 00-1.254.421L1.915 7.468a1 1 0 00.263 1.297l2.01 1.522a7.888 7.888 0 000 3.426l-2.01 1.522a1 1 0 00-.263 1.297l1.118 1.936a1 1 0 001.254.42l2.33-.982a7.983 7.983 0 002.961 1.719l.312 2.5a1 1 0 00.993.875h2.234a1 1 0 00.992-.876l.313-2.499a7.983 7.983 0 002.961-1.719l2.33.983a1 1 0 001.254-.421l1.118-1.936a1 1 0 00-.263-1.297l-2.01-1.522A8.023 8.023 0 0020 12z"
       stroke="#F4F6F8"

src/shared/icons/NavUpload.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgNavUpload = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M12 21V8" stroke="#F4F6F8" strokeWidth={2} strokeMiterlimit={10} />
     <path d="M8 11l4-4 4 4" stroke="#F4F6F8" strokeWidth={2} strokeMiterlimit={10} strokeLinecap="square" />
     <path

src/shared/icons/NavVideos.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgNavVideos = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M10 11l5 3-5 3v-6z" fill="#F4F6F8" />
     <path d="M18 2H6" stroke="#F4F6F8" strokeWidth={2} strokeMiterlimit={10} strokeLinecap="square" />
     <path d="M10 11l5 3-5 3v-6z" fill="#F4F6F8" />

src/shared/icons/OutlineBack.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgOutlineBack = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M22 12H3" stroke="#F4F6F8" strokeWidth={2} strokeMiterlimit={10} />
     <path d="M7 16l-4-4 4-4" stroke="#F4F6F8" strokeWidth={2} strokeMiterlimit={10} strokeLinecap="square" />
   </svg>

src/shared/icons/OutlineCancel.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgOutlineCancel = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <rect
       x={3}
       y={3}

src/shared/icons/OutlineConnect.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgOutlineConnect = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path fill="#F4F6F8" d="M1 11h7v2H1zM16 11h7v2h-7z" />
     <circle cx={10} cy={12} r={3} stroke="#F4F6F8" strokeWidth={2} />
     <path d="M10 19a7 7 0 100-14" stroke="#F4F6F8" strokeWidth={2} />

src/shared/icons/OutlineError.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgOutlineError = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={32} height={32} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={32} height={32} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <circle cx={16} cy={16} r={15} stroke="#FF3861" strokeWidth={2} />
     <path d="M11 21l10-10M21 21L11 11" stroke="#FF3861" strokeWidth={2} />
   </svg>

src/shared/icons/OutlineExternal.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgOutlineExternal = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M17 14v6a1 1 0 01-1 1H4a1 1 0 01-1-1V8a1 1 0 011-1h6"
       stroke="#F4F6F8"

src/shared/icons/OutlineFileImage.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgOutlineFileImage = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <rect x={3} y={5} width={18} height={14} rx={1} stroke="#F4F6F8" strokeWidth={2} />
     <path d="M18 14l-4-4-8 4v2h12v-2z" fill="#F4F6F8" />
     <circle cx={7} cy={9} r={1} fill="#F4F6F8" />

src/shared/icons/OutlineFileVideo.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgOutlineFileVideo = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"

src/shared/icons/OutlineInfo.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgOutlineInfo = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={32} height={32} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={32} height={32} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <circle cx={16} cy={16} r={15} stroke="#DAE2EB" strokeWidth={2} />
     <path d="M16 14v8M16 10v2" stroke="#DAE2EB" strokeWidth={2} />
   </svg>

src/shared/icons/OutlineLoader.tsx

@@ -1,9 +1,9 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgOutlineLoader = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={32} height={32} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={32} height={32} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <circle cx={16} cy={16} r={15} stroke="#DAE2EB" strokeWidth={2} />
-    <mask id="outline-loader_svg__a" maskUnits="userSpaceOnUse" x={0} y={0} width={32} height={32}>
+    <mask id="outline-loader_svg__a" mask-type="alpha" maskUnits="userSpaceOnUse" x={0} y={0} width={32} height={32}>
       <circle cx={16} cy={16} r={15} stroke="#4038FF" strokeWidth={2} />
     </mask>
     <g mask="url(#outline-loader_svg__a)">

src/shared/icons/OutlineSearch.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgOutlineSearch = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <circle cx={10} cy={10} r={8} stroke="#F4F6F8" strokeWidth={2} />
     <path d="M22 22l-4-4" stroke="#F4F6F8" strokeWidth={2} strokeMiterlimit={10} />
   </svg>

src/shared/icons/OutlineSuccess.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgOutlineSuccess = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={32} height={32} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={32} height={32} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <circle cx={16} cy={16} r={15} stroke="#00DBB0" strokeWidth={2} />
     <path d="M11 17l3 3 7-8" stroke="#00DBB0" strokeWidth={2} />
   </svg>

src/shared/icons/OutlineVideo.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgOutlineVideo = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <rect
       x={3}
       y={3}

src/shared/icons/OutlineWarning.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgOutlineWarning = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={32} height={32} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={32} height={32} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <circle cx={16} cy={16} r={15} stroke="#F3901C" strokeWidth={2} />
     <path d="M16 18v-8M16 22v-2" stroke="#F3901C" strokeWidth={2} />
   </svg>

src/shared/icons/OutlineZoomIn.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgOutlineZoomIn = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <circle cx={10} cy={10} r={8} stroke="#F4F6F8" strokeWidth={2} />
     <path d="M22 22l-4-4M14 10H6M10 6v8" stroke="#F4F6F8" strokeWidth={2} strokeMiterlimit={10} />
   </svg>

src/shared/icons/OutlineZoomOut.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgOutlineZoomOut = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <circle cx={10} cy={10} r={8} stroke="#F4F6F8" strokeWidth={2} />
     <path d="M22 22l-4-4M14 10H6" stroke="#F4F6F8" strokeWidth={2} strokeMiterlimit={10} />
   </svg>

src/shared/icons/PlayerFullScreen.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgPlayerFullScreen = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M4 16v3a1 1 0 001 1h3m12-4v3a1 1 0 01-1 1h-3M20 8V5a1 1 0 00-1-1h-3M4 8V5a1 1 0 011-1h3"
       stroke="#F4F6F8"

src/shared/icons/PlayerNext.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgPlayerNext = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M19 5v14" stroke="#F4F6F8" strokeWidth={2} strokeMiterlimit={10} />
     <path d="M4 5l11 7-11 7V5z" fill="#F4F6F8" />
   </svg>

src/shared/icons/PlayerPause.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgPlayerPause = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M8 4v16M16 4v16M16 4v16" stroke="#F4F6F8" strokeWidth={4} strokeMiterlimit={10} />
   </svg>
 )

src/shared/icons/PlayerPip.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgPlayerPip = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M2 5a1 1 0 011-1h18a1 1 0 011 1v14a1 1 0 01-1 1H3a1 1 0 01-1-1V5z" stroke="#F4F6F8" strokeWidth={2} />
     <path d="M13 13h6v4h-6v-4z" fill="#F4F6F8" />
   </svg>

src/shared/icons/PlayerPlay.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgPlayerPlay = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M6 4l13 8-13 8V4z" fill="#F4F6F8" />
   </svg>
 )

src/shared/icons/PlayerPlaylist.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgPlayerPlaylist = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M17 15l5 3-5 3v-6z" fill="#F4F6F8" />
     <path d="M18 12H2M18 8H2M15 16H2" stroke="#F4F6F8" strokeWidth={2} strokeMiterlimit={10} />
   </svg>

src/shared/icons/PlayerPlaylistAdd.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgPlayerPlaylistAdd = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M15 12H2M15 8H2M12 16H2M22 16h-8M18 12v8" stroke="#F4F6F8" strokeWidth={2} strokeMiterlimit={10} />
   </svg>
 )

src/shared/icons/PlayerSmallScreen.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgPlayerSmallScreen = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M16 4v3a1 1 0 001 1h3M8 4v3a1 1 0 01-1 1H4M8 20v-3a1 1 0 00-1-1H4M16 20v-3a1 1 0 011-1h3"
       stroke="#F4F6F8"

src/shared/icons/PlayerSoundOff.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgPlayerSoundOff = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M21.222 20.808l-18-18" stroke="#F4F6F8" strokeWidth={2} strokeMiterlimit={10} />
     <path
       fillRule="evenodd"

src/shared/icons/PlayerSoundOn.tsx

@@ -1,7 +1,7 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
 import * as React from 'react'
 export const SvgPlayerSoundOn = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M6 9l4-5h2v16h-2l-4-5H3a1 1 0 01-1-1v-4a1 1 0 011-1h3z" fill="#F4F6F8" />
     <path d="M14 19a7 7 0 100-14M14 15a3 3 0 100-6" stroke="#F4F6F8" strokeWidth={2} />
   </svg>