➕(react) add material icons

We need some icons to implement the Pagination and the DataGrid.

apps/demo/src/index.scss

@@ -1,4 +1,5 @@
 @import "@openfun/cunningham-react/fonts";
+@import "@openfun/cunningham-react/icons";
 @import "@openfun/cunningham-react/style";
 @import "cunningham-tokens";
 

packages/react/.storybook/preview.js

@@ -1,5 +1,6 @@
 import '../src/index.scss'
 import '../src/fonts.scss'
+import '../src/icons.scss'
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

packages/react/package.json

@@ -17,7 +17,8 @@
       "types": "./dist/index.d.ts"
     },
     "./style": "./dist/style.css",
-    "./fonts": "./dist/fonts.css"
+    "./fonts": "./dist/fonts.css",
+    "./icons": "./dist/icons.css"
   },
   "files": [
     "dist/"
@@ -25,8 +26,9 @@
   "scripts": {
     "lint": "eslint . 'src/**/*.{ts,tsx}'",
     "dev": "yarn storybook & nodemon --watch src --ext '*' --ignore src/cunningham-tokens.ts --ignore src/cunningham-tokens.js --ignore src/cunningham-tokens.css --exec npm run build",
-    "build": "tsc && yarn build-theme && vite build && yarn build-fonts",
+    "build": "tsc && yarn build-theme && vite build && yarn build-fonts && yarn build-icons",
     "build-fonts": "vite build -c vite.fonts.config.ts && rm -rf dist/fonts.js",
+    "build-icons": "vite build -c vite.icons.config.ts && rm -rf dist/icons.js",
     "build-theme": "cunningham -o src -g css,ts,js",
     "preview": "vite preview",
     "test": "FORCE_COLOR=1 vitest run",
@@ -36,6 +38,7 @@
     "deploy-storybook": "storybook-to-ghpages"
   },
   "dependencies": {
+    "@fontsource/material-icons": "4.5.4",
     "@fontsource/roboto": "4.5.8",
     "@openfun/cunningham-tokens": "*",
     "react": "18.2.0",

packages/react/src/docs/installation.stories.mdx

@@ -54,6 +54,7 @@ Then, add these lines at the top of your main stylesheet file:
   format={false}
   code={`
 @import "@openfun/cunningham-react/fonts"; // Imports default fonts ( Roboto ). You can also import fonts by yourself.
+@import "@openfun/cunningham-react/icons"; // Imports icons ( Material Icons ).
 @import "@openfun/cunningham-react/style"; // Imports the default theme.
 @import "cunningham-tokens"; // Imports the file you just generated.
   `}

packages/react/src/icons.scss

@@ -0,0 +1 @@
+@import "@fontsource/material-icons";

packages/react/vite.icons.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from "vitest/config";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    emptyOutDir: false,
+    outDir: "dist",
+    lib: {
+      entry: {
+        icons: "./src/icons.scss",
+      },
+      formats: ["es"],
+    },
+    rollupOptions: {
+      input: "src/icons.scss",
+      output: {
+        assetFileNames: "icons.css",
+      },
+    },
+  },
+});

yarn.lock

@@ -1583,6 +1583,11 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@fontsource/material-icons@^4.5.4":
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/@fontsource/material-icons/-/material-icons-4.5.4.tgz#bfedde9352c36dbbacb6b49d190a1ce1e5917756"
+  integrity sha512-YGmXkkEdu6EIgpFKNmB/nIXzZocwSmbI01Ninpmml8x8BT0M6RR++V1KqOfpzZ6Cw/FQ2/KYonQ3x4IY/4VRRA==
+
 "@fontsource/roboto@4.5.8":
   version "4.5.8"
   resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-4.5.8.tgz#56347764786079838faf43f0eeda22dd7328437f"