From cda72f33e37b3327e4d48b8d656d9d6d1b2fd9f7 Mon Sep 17 00:00:00 2001
From: Alexandr Kazachenko <shoom3301@gmail.com>
Date: Thu, 11 Jan 2024 12:40:49 +0600
Subject: [PATCH] fix: display cow token logo in header

---
 .../src/legacy/components/CowProtocolLogo/index.tsx        | 3 ++-
 apps/cowswap-frontend/vite.config.ts                       | 6 +++++-
 package.json                                               | 1 +
 yarn.lock                                                  | 7 +++++++
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/cowswap-frontend/src/legacy/components/CowProtocolLogo/index.tsx b/apps/cowswap-frontend/src/legacy/components/CowProtocolLogo/index.tsx
index dc22834552..c350a72fab 100644
--- a/apps/cowswap-frontend/src/legacy/components/CowProtocolLogo/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/CowProtocolLogo/index.tsx
@@ -2,16 +2,17 @@ import CowProtocolIcon from '@cowprotocol/assets/cow-swap/cow_v2.svg'
 
 import styled from 'styled-components/macro'
 
+console.log('TEST1', CowProtocolIcon)
 export const Icon = styled.span<Props>`
   --defaultSize: 24px;
   --smallSize: 28px;
-  background: url(${CowProtocolIcon}) no-repeat center/contain;
   height: ${({ size }) => (size ? `${size}px` : 'var(--defaultSize)')};
   width: ${({ size }) => (size ? `${size}px` : 'var(--defaultSize)')};
   display: inline-block;
   margin: 0;
   border-radius: ${({ size }) => (size ? `${size}px` : 'var(--defaultSize)')};
   position: relative;
+  background: url(${CowProtocolIcon}) no-repeat center/contain;
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
     width: var(--smallSize);
diff --git a/apps/cowswap-frontend/vite.config.ts b/apps/cowswap-frontend/vite.config.ts
index 08dbec0511..9fa0b85a85 100644
--- a/apps/cowswap-frontend/vite.config.ts
+++ b/apps/cowswap-frontend/vite.config.ts
@@ -8,6 +8,7 @@ import macrosPlugin from 'vite-plugin-babel-macros'
 import { ModuleNameWithoutNodePrefix, nodePolyfills } from 'vite-plugin-node-polyfills'
 import { VitePWA } from 'vite-plugin-pwa'
 import svgr from 'vite-plugin-svgr'
+import svgLoader from 'vite-svg-loader'
 import viteTsConfigPaths from 'vite-tsconfig-paths'
 
 import { getReactProcessEnv } from '../../tools/getReactProcessEnv'
@@ -55,6 +56,9 @@ export default defineConfig(({ mode }) => {
         globPatterns: ['**/*.{js,css,html,png,jpg,svg,json,woff,woff2,md}'],
       },
     }),
+    svgLoader({
+      defaultImport: 'url',
+    }),
   ]
 
   if (analyzeBundle) {
@@ -75,7 +79,7 @@ export default defineConfig(({ mode }) => {
       ...getReactProcessEnv(mode),
     },
 
-    assetsInclude: ['**/*.md'],
+    assetsInclude: ['**/*.md', '**/*.svg', '../../libs/assets/**/*'],
 
     cacheDir: '../../node_modules/.vite/cowswap-frontend',
 
diff --git a/package.json b/package.json
index 887fa19344..f144063381 100644
--- a/package.json
+++ b/package.json
@@ -297,6 +297,7 @@
     "vite-plugin-node-polyfills": "^0.12.0",
     "vite-plugin-pwa": "^0.16.4",
     "vite-plugin-svgr": "^3.2.0",
+    "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "~4.2.0",
     "vitest": "~0.32.0"
   }
diff --git a/yarn.lock b/yarn.lock
index eca88be2c0..5d6067fc9b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -25936,6 +25936,13 @@ vite-plugin-svgr@^3.2.0:
     "@svgr/core" "^7.0.0"
     "@svgr/plugin-jsx" "^7.0.0"
 
+vite-svg-loader@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/vite-svg-loader/-/vite-svg-loader-5.1.0.tgz#b0b89bd8024bc0f707d0e8d7422446ac01576d94"
+  integrity sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==
+  dependencies:
+    svgo "^3.0.2"
+
 vite-tsconfig-paths@~4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-4.2.0.tgz#bd2647d3eadafb65a10fc98a2ca565211f2eaf63"