icons problem

[youssefElMkhantar]

hi,

i recently encountred a problem in accordion and alert components. the icons doesn't show but instead a square is present. i use react with vite.js

thank you

[ddecrulle]

Hello,

Have you carefully followed the installation procedure described in the documentation ? In addition, an example project is available here

[youssefElMkhantar]

i did the exact same thing. a month ago it worked just fine but lately after some updates.icons don't show anymore !!

[ddecrulle]

I need more context to help you

[youssefElMkhantar]

here is the actual results following the same for vite in the docs

[ddecrulle]

Can you show me the package.json and the script block ?

[youssefElMkhantar]

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "postinstall": "copy-dsfr-to-public",
    "predev": "only-include-used-icons",
    "prebuild": "only-include-used-icons"
  },
  "dependencies": {
    "@codegouvfr/react-dsfr": "^0.74.2",
    "@dataesr/react-dsfr": "^3.6.0",
    "@emotion/style": "^0.8.0",
    "@emotion/styled": "^11.11.0",
    "@jitsi/react-sdk": "^1.3.0",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.12.3",
    "@reduxjs/toolkit": "^1.9.5",
    "@types/react-datepicker": "^4.11.2",
    "@types/react-mic": "^12.4.3",
    "axios": "^1.4.0",
    "dotenv": "^16.0.3",
    "jwt-decode": "^3.1.2",
    "react": "^18.2.0",
    "react-datepicker": "^4.14.0",
    "react-datetime-picker": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-icalendar-link": "^3.0.2",
    "react-markdown": "^8.0.7",
    "react-mic": "^12.4.6",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.11.1",
    "react-slideshow-image": "^4.2.1",
    "react-webcam": "^7.0.1",
    "rehype-raw": "^6.1.1",
    "remark-slug": "^7.0.1"
  },
  "devDependencies": {
    "@types/node": "^20.1.5",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "prettier": "^2.8.8",
    "typescript": "^5.0.2",
    "vite": "^4.3.2"
  }
}

[garronej]

@youssefElMkhantar Sorry about that.
Can you share your code or a reproducable repo?
I'll fix swiftly.

[ddecrulle]

Unfortunately I can't reproduce your issue, as you can see here and check code, icons are well displayed.

[youssefElMkhantar]

thanks for the responses. here is the demo project. you can see yourself https://github.com/DISIC/wce-portail @garronej

[ddecrulle]

Ok I reproduced and fixed, this occurs only when <Badge> in Header.tsx is used. I had to add @emotion/react to your project otherwise it won't build. Also npm install doesn't work either, I installed the dependencies with yarn.

[youssefElMkhantar]

thanks. finally it worked for me. the problem was the use of dataesr/react-dsfr component in the same project with the new design system.