diff --git a/apps/demo/src/index.scss b/apps/demo/src/index.scss index 5517c1f..0e3136a 100644 --- a/apps/demo/src/index.scss +++ b/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"; diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js index 9a40c97..284bdf9 100644 --- a/packages/react/.storybook/preview.js +++ b/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].*" }, diff --git a/packages/react/package.json b/packages/react/package.json index 75c4f7c..8f15b89 100644 --- a/packages/react/package.json +++ b/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", diff --git a/packages/react/src/docs/installation.stories.mdx b/packages/react/src/docs/installation.stories.mdx index cd786d3..79f5df3 100644 --- a/packages/react/src/docs/installation.stories.mdx +++ b/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. `} diff --git a/packages/react/src/icons.scss b/packages/react/src/icons.scss new file mode 100644 index 0000000..a8c7a27 --- /dev/null +++ b/packages/react/src/icons.scss @@ -0,0 +1 @@ +@import "@fontsource/material-icons"; diff --git a/packages/react/vite.icons.config.ts b/packages/react/vite.icons.config.ts new file mode 100644 index 0000000..7a89338 --- /dev/null +++ b/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", + }, + }, + }, +}); diff --git a/yarn.lock b/yarn.lock index 72bc6ca..7d1bd22 100644 --- a/yarn.lock +++ b/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"