fix: icon sizes and colors with svgr lib

.eslintrc.js

@@ -73,7 +73,7 @@ module.exports = {
                 ],
             },
         ],
-        'react/jsx-max-props-per-line': ['error', { maximum: 3 }],
+        'react/jsx-max-props-per-line': ['error', { maximum: 4 }],
     },
     globals: {
         __IS_DEV__: true,

config/build/buildLoaders.ts

@@ -13,17 +13,33 @@ export function buildLoaders(options: BuildOptions): webpack.RuleSetRule[] {
         paths,
     } = options;
 
-    const svgLoader = {
-        test: /\.svg$/,
-        use: ['@svgr/webpack'],
-    };
+	const svgLoader = {
+		test: /\.svg$/,
+		use: [{
+			loader: '@svgr/webpack',
+			options: {
+				icon: true,
+				svgoConfig: {
+					plugins: [
+						{
+							name: 'convertColors',
+							params: {
+								currentColor: true,
+							}
+						}
+					]
+				}
+			}
+		}],
+	};
+
 
-    const codeBabelLoader = buildBabelLoader({ ...options, isTsx: false });
+	const codeBabelLoader = buildBabelLoader({ ...options, isTsx: false });
     const tsxCodeBabelLoader = buildBabelLoader({ ...options, isTsx: true });
 
     const cssLoader = buildCssLoader(isDev);
 
-    // Если не используем тайпскрипт - нужен babel-loader
+    // if not using ts -  babel-loader needed
     // const typescriptLoader = {
     //     test: /\.tsx?$/,
     //     use: 'ts-loader',

src/app/App.tsx

@@ -8,9 +8,9 @@ import { Sidebar } from '@/widgets/Sidebar';
 import { getUserInited, initAuthData } from '@/entities/User';
 import { useTheme } from '@/shared/lib/hook/useTheme/useTheme';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
-import { PageLoader } from '@/features/PageLoader';
 import { ToggleFeatures } from '@/shared/lib/features';
 import { MainLayout } from '@/shared/layouts/MainLayout';
+import { PageLoader } from '@/features/PageLoader';
 
 function App() {
     const { theme } = useTheme();

src/entities/User/model/slice/userSlice.ts

@@ -42,9 +42,7 @@ export const userSlice = createSlice({
             },
         );
         builder.addCase(initAuthData.rejected, (state) => {
-            if (state.authData) {
-                state._inited = true;
-            }
+            state._inited = true;
         });
     },
 });

src/features/ArticleViewSelector/ui/ArticleViewSelector.tsx

@@ -44,6 +44,8 @@ export const ArticleViewSelector = memo((props: ArticleViewSelectorProps) => {
                             [cls.notSelected]: viewType.view !== view,
                         })}
                         Svg={viewType.icon}
+                        width={24}
+                        height={24}
                     />
                 </Button>
             ))}

src/features/ThemeSwitcher/ui/ThemeSwitcher.tsx

@@ -1,12 +1,11 @@
 import React, { useCallback } from 'react';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { Button, ButtonTheme } from '@/shared/ui/Button';
-import LightIcon from '../../../shared/assets/icons/theme-light.svg';
-import DarkIcon from '../../../shared/assets/icons/theme-dark.svg';
-import { Theme } from '@/shared/const/theme';
+import ThemeIcon from '../../../shared/assets/icons/theme-light.svg';
 import { useTheme } from '@/shared/lib/hook/useTheme/useTheme';
 import { saveJsonSettings } from '@/entities/User';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
+import { Icon } from '@/shared/ui/Icon';
 
 interface ThemeSwitcherProps {
     className?: string;
@@ -29,7 +28,7 @@ export const ThemeSwitcher = ({ className }: ThemeSwitcherProps) => {
             className={classNames('', {}, [className])}
             onClick={onToggleHandler}
         >
-            {theme === Theme.DARK ? <DarkIcon /> : <LightIcon />}
+            <Icon Svg={ThemeIcon} width={40} height={40} inverted />
         </Button>
     );
 };

src/shared/lib/features/setGetFeatures.ts

@@ -1,7 +1,7 @@
 import { FeatureFlags } from '@/shared/types/featureFlags';
 
 // features does not change on session, only after
-let featureFlags: FeatureFlags;
+let featureFlags: FeatureFlags = {};
 
 export function setFeatureFlags(newFeatureFlags?: FeatureFlags) {
     if (newFeatureFlags) {
@@ -10,5 +10,5 @@ export function setFeatureFlags(newFeatureFlags?: FeatureFlags) {
 }
 
 export function getFeatureFlag(flag: keyof FeatureFlags) {
-    return featureFlags[flag] ?? false;
+    return featureFlags?.[flag];
 }