Fix/missing icons

apps/client/README.md

@@ -40,8 +40,11 @@ npm run build
 npm run preview
 ```
 
-## Récupérer toutes les icones du projets
-`grep -r -oh "ri:[a-z0-9-]*" . | sort | uniq | cut -d ':' -f 2 | awk NF | awk '{print "  \047" $1 "\047,"}'`
+## Import des icones
+
+Utiliser `npm run icons` pour générer icon-collections.ts à partir des icônes utilisées dans le projet. Cette commande utilise un script qui recherche les icônes utilisées dans le projet et génère un fichier de collections d'icônes.
+
+Commiter les changements des deux fichiers
 
 ## Activation OpenCDS
 

apps/client/package.json

@@ -15,7 +15,7 @@
     "dev": "vite --mode=development",
     "format": "NODE_OPTIONS='--no-warnings=ExperimentalWarning' eslint ./ --fix",
     "format:style": "stylelint ./src/**/*.{css,vue} --fix",
-    "icons": "vue-dsfr-icons -s scripts/icons.js -t src/icon-collections.ts",
+    "icons": "node ./scripts/create-collections.js -s scripts/icons.js -t src/icon-collections.ts",
     "integ": "vite --mode=integration",
     "lint": "pnpm run --parallel \"/^lint:.*/\"",
     "lint:style": "stylelint ./src/**/*.{css,vue}",
@@ -60,6 +60,7 @@
     "@vitest/coverage-v8": "^4.1.5",
     "@vue/eslint-config-typescript": "^14.7.0",
     "chalk": "^5.6.2",
+    "commander": "^15.0.0",
     "eslint": "^10.1.0",
     "eslint-plugin-vue": "^10.8.0",
     "jsdom": "^25.0.1",

apps/client/scripts/create-collections.js

@@ -1,17 +1,53 @@
 #!env node
+import { spawnSync } from 'node:child_process'
+import fs from 'node:fs'
 import path from 'node:path'
-
 import { createCustomCollectionFile } from '@gouvminint/vue-dsfr/meta'
 import { Command } from 'commander'
 
-const program = new Command()
+const grepResult = spawnSync('grep', [
+  // recursive
+  '-r',
+  // exclude node_modules
+  '--exclude-dir=node_modules',
+  // exclude icons.js and icon-collections.ts files to avoid collecting icons that are not used in the project
+  '--exclude-dir=scripts',
+  '--exclude=icon-collections.ts',
+  // only print the matched part of the line
+  '-ohs',
+  // regex to match icon names starting with ri:icon-name
+  'ri:[a-z0-9-]*',
+  // search in the whole project
+  '../..',
+], { shell: false })
+const result = grepResult.stdout.toString()
+  .split('\n')
+  .filter(Boolean)
+  .sort()
+  .filter((value, index, self) => self.indexOf(value) === index)
+  .map(value => value.split(':')[1])
+  .filter(Boolean)
+  .map(value => `  '${value}',`)
+  .join('\n')
+console.log(result)
+
+// open console/apps/client/src/icons.js and replace the content with the result of the command above, then run `npm run icons` to generate the icon collections
+// determine lines to replace in src/icons.js
+const iconsFilePath = path.resolve(process.cwd(), 'scripts/icons.js')
+const fileContent = fs.readFileSync(iconsFilePath, 'utf-8')
+const startIndex = fileContent.indexOf('const riIconNames = [')
+const endIndex = fileContent.indexOf(']', startIndex) + 1
+const newFileContent = `${fileContent.slice(0, startIndex)}const riIconNames = [\n${result}\n]${fileContent.slice(endIndex)}`
+fs.writeFileSync(iconsFilePath, newFileContent)
+
+const transformIconsProgram = new Command()
 
-program
+transformIconsProgram
   .option('-s, --source <filepath>', 'Chemin vers le fichier de tuples [IconifyJSON, string[]]')
   .option('-t, --target <filepath>', 'Chemin vers le fichier destination (src/icons.ts par défaut)')
   .parse(process.argv)
 
-const options = program.opts()
+const options = transformIconsProgram.opts()
 
 if (options.source && options.target) {
   createCustomCollectionFile(path.resolve(process.cwd(), options.source), path.resolve(process.cwd(), options.target))

apps/client/scripts/icons.js

@@ -8,6 +8,8 @@ const riIconNames = [
   'account-circle-line',
   'add-line',
   'admin-line',
+  'alert-line',
+  'archive-line',
   'arrow-drop-left-line',
   'arrow-drop-right-line',
   'arrow-go-back-line',
@@ -17,13 +19,15 @@ const riIconNames = [
   'arrow-right-s-line',
   'award-line',
   'building-line',
+  'check-line',
   'checkbox-blank-circle-fill',
   'checkbox-circle-line',
   'clipboard-line',
   'close-line',
   'code-s-slash-line',
   'dashboard-line',
   'delete-bin-7-line',
+  'door-open-line',
   'exchange-line',
   'eye-line',
   'eye-off-line',
@@ -35,13 +39,14 @@ const riIconNames = [
   'focus-3-line',
   'folder-line',
   'folder-shield-2-line',
-  'folders-line',
   'folder-user-line',
-  'github-line',
+  'folders-line',
   'git-merge-line',
   'git-repository-private-line',
+  'github-line',
   'global-line',
   'key-2-line',
+  'links-line',
   'loader-4-line',
   'lock-line',
   'lock-unlock-line',
@@ -55,9 +60,10 @@ const riIconNames = [
   'send-plane-line',
   'server-line',
   'settings-3-line',
+  'settings-5-line',
   'shapes-line',
   'shield-check-line',
-  'sound-module-line',
+  'shield-keyhole-line',
   'stock-line',
   'sun-line',
   'team-line',