Use icon

Author: garronej

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@codegouvfr/react-dsfr",
-    "version": "0.0.19",
+    "version": "0.0.20",
     "description": "French State Design System React component library",
     "repository": {
         "type": "git",

src/bin/css_to_ts/icons.ts

@@ -3,7 +3,6 @@ import type { Icon } from "./css_to_ts";
 import { parseCss } from "./parseCss";
 import * as css from "css";
 import { exclude } from "tsafe/exclude";
-import { assert } from "tsafe/assert";
 
 type IconLike = Icon.Dsfr | Omit<Icon.Remixicon, "rawSvgCode">;
 
@@ -70,11 +69,11 @@ export const getPatchedRawCssCodeForCompatWithRemixIcon = memoize((rawCssCode: s
     (parsedCss as any).stylesheet.rules = (parsedCss as any).stylesheet.rules
         .map((rule: any) => {
             if (rule.type === "media") {
-                //TODO
-
                 rule.rules = rule.rules
                     .map((rule: any) => {
-                        assert(rule.type === "rule");
+                        if (rule.type !== "rule") {
+                            return undefined;
+                        }
 
                         if (prefixRegExp.test(rule.selectors.join(", "))) {
                             return rule;
@@ -91,7 +90,9 @@ export const getPatchedRawCssCodeForCompatWithRemixIcon = memoize((rawCssCode: s
                 return rule;
             }
 
-            assert(rule.type === "rule");
+            if (rule.type !== "rule") {
+                return undefined;
+            }
 
             if (prefixRegExp.test(rule.selectors.join(", "))) {
                 return rule;

test/frameworks/vite/index.html

@@ -21,6 +21,7 @@
     <!--<link rel="preload" href="/dsfr/fonts/Spectral-ExtraBold.woff2" as="font" crossorigin="anonymous" />-->
 
     <link rel="stylesheet" href="/dsfr/dsfr.min.css" />
+    <link rel="stylesheet" href="/dsfr/utility/icons/icons.min.css" />
 
     <title>Vite + React + TS</title>
   </head>

test/frameworks/vite/src/App.tsx

@@ -1,13 +1,25 @@
 import artworkLightSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/light.svg";
 import artworkDarkSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/dark.svg";
 import artworkSystemSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/system.svg";
-import { useIsDark } from "@codegouvfr/react-dsfr";
+import { useIsDark, fr } from "@codegouvfr/react-dsfr";
 
 export function App() {
     const { isDark, setIsDark } = useIsDark();
 
     return (
         <>
+
+            <button className={fr.cx("fr-btn", "fr-icon-checkbox-circle-line", "fr-btn--icon-left")}>
+              Label bouton MD
+            </button>
+            <span className="fr-icon-ancient-gate-fill" aria-hidden="true"></span>
+            <i className="fr-icon-ancient-gate-fill" aria-hidden="true"/>
+
+            <button className={fr.cx("fr-btn", "ri-amazon-fill", "fr-btn--icon-left")}>
+              Download
+            </button>
+
+
             <h1>Color Scheme: {isDark ? "dark" : "light"}</h1>
             <button onClick={() => setIsDark(true)}>Set color scheme to dark</button>
             <button onClick={() => setIsDark(false)}>Set color scheme to light</button>