Skip to content

Commit b0e7df6

Browse files
committed
Setup icons with next.js
1 parent ca586f4 commit b0e7df6

File tree

3 files changed

+17
-2
lines changed

3 files changed

+17
-2
lines changed

test/integration/next/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@
66
"dev": "next dev",
77
"build": "next build",
88
"start": "next start",
9-
"lint": "next lint"
9+
"lint": "next lint",
10+
"only_include_used_icons": "node node_modules/@codegouvfr/react-dsfr/bin/only_include_used_icons.js",
11+
"predev": "yarn only_include_used_icons",
12+
"prebuild": "yarn only_include_used_icons"
1013
},
1114
"dependencies": {
1215
"next": "^13.0.1",

test/integration/next/pages/_app.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import DefaultApp from "next/app";
22
import { withAppDsfr } from "@codegouvfr/react-dsfr/next";
33
import "@codegouvfr/react-dsfr/dsfr/dsfr.css";
4+
import "@codegouvfr/react-dsfr/dsfr/utility/icons/icons.css";
45

56
export default withAppDsfr(DefaultApp, {
67
"defaultColorScheme": "system",

test/integration/next/pages/index.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,24 @@
11
import ArtworkLightSvg from "@codegouvfr/react-dsfr/dsfr/artwork/light.svg";
22
import ArtworkDarkSvg from "@codegouvfr/react-dsfr/dsfr/artwork/dark.svg";
33
import ArtworkSystemSvg from "@codegouvfr/react-dsfr/dsfr/artwork/system.svg";
4-
import { useIsDark } from "@codegouvfr/react-dsfr";
4+
import { useIsDark, fr } from "@codegouvfr/react-dsfr";
55

66
export default function App() {
77
const { isDark, setIsDark } = useIsDark();
88

99
return (
1010
<>
11+
12+
<button className={fr.cx("fr-btn", "fr-icon-checkbox-circle-line", "fr-btn--icon-left")}>
13+
Label bouton MD
14+
</button>
15+
<span className="fr-icon-ancient-gate-fill" aria-hidden="true"></span>
16+
<i className="fr-icon-ancient-gate-fill" aria-hidden="true"/>
17+
18+
<button className={fr.cx("fr-btn", "ri-amazon-fill", "fr-btn--icon-left")}>
19+
Download
20+
</button>
21+
1122
<h1>Color Scheme: {isDark ? "dark" : "light"}</h1>
1223
<button onClick={() => setIsDark(true)}>Set color scheme to dark</button>
1324
<button onClick={() => setIsDark(false)}>Set color scheme to light</button>

0 commit comments

Comments
 (0)