fix: display cow token logo in header

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);

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',
 

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"
   }

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"