[Icons]: Icons SVG is not shown

[Tus1688]

I tried to use <EuiIcon type='gear' size='xl' />

expected behaviours:
successfully render gear icon

observed result:

package.json

{
  "name": "react-elastic",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@elastic/datemath": "^5.0.3",
    "@elastic/eui": "^70.2.0",
    "@emotion/css": "^11.10.5",
    "@emotion/react": "^11.10.5",
    "moment": "^2.29.4",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.3"
  },
  "devDependencies": {
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
    "typescript": "^4.6.4",
    "vite": "^3.2.3"
  }
}

any kind of help is appreciated, thanks in advance 👍

[chandlerprall]

EuiIcon relies on a dynamic import() to load icons, which relies on your bundler being correctly configured. Our consuming.md wiki file has some workarounds to ensure icons are included in your bundle.

We do not have any vite scaffolding to test with, but if you could provide a reproducible environment we can take a deeper look at this.

[cee-chen]

Hi @Tus1688! The bug you're seeing is due to us not fully supporting Vite/Rollup. A few Vite users have posted workarounds/patches here: #5463 (either patching EUI or using our SSR appendIconComponentCache workaround).

Closing this issue as a duplicate of the linked one, please feel free to continue the discussion there if needed.

[Tus1688]

Thanks for replying, I will try to patching it as a workaround :)

[unckleg]

Thanks me later: https://gist.github.com/unckleg/5476ebd940d1d473387bb082e8c2929c