feat: generate icon css classes on build

ably · Nov 14, 2024 · 3b138b8 · 3b138b8
1 parent 44b39b8
commit 3b138b8
Show file tree

Hide file tree

Showing 6 changed files with 250 additions and 3 deletions.
diff --git a/scripts/generate-sprites.ts b/scripts/generate-sprites.ts
@@ -41,6 +41,8 @@ const svgDir = path.resolve(__dirname, "../src/core/icons");
 // Object to store the grouped filenames
 const iconGroups: Record<string, string[]> = {};
 
+let iconCSSClasses = "";
+
 // Read all SVG files from the directory and add them to the sprite
 fs.readdirSync(svgDir).forEach((file) => {
   if (file.endsWith(".svg")) {
@@ -55,6 +57,7 @@ fs.readdirSync(svgDir).forEach((file) => {
 
         // Remove the .svg extension before adding to the group
         const fileNameWithoutExtension = file.replace(".svg", "");
+        iconCSSClasses += `.ui-${fileNameWithoutExtension} { background-image: url(../icons/${file}); }\n`;
         iconGroups[key].push(fileNameWithoutExtension);
       }
 
@@ -88,6 +91,11 @@ sprite.compile((err, result) => {
         "../src/core/Icon/computed-icons.ts",
       );
 
+      const iconClassesPath = path.resolve(
+        __dirname,
+        "../src/core/styles/icons.css",
+      );
+
       const generatedIconGroups =
         `// AUTOGENERATED BY build:sprites - DO NOT EDIT\n\nexport const computedIcons = ${JSON.stringify(iconGroups, null, 2)}`.replace(
           /]/g,
@@ -96,7 +104,15 @@ sprite.compile((err, result) => {
 
       fs.writeFileSync(iconJsonPath, generatedIconGroups, "utf-8");
 
-      console.log("🖼️  SVG sprites and icon manifest generated successfully!");
+      fs.writeFileSync(
+        iconClassesPath,
+        `/* AUTOGENERATED BY build:sprites - DO NOT EDIT */\n\n${iconCSSClasses}`,
+        "utf-8",
+      );
+
+      console.log(
+        "🖼️  SVG sprites, icon manifest and icon CSS classes generated successfully!",
+      );
     } catch (error) {
       console.log("SVG sprite/manifest generation failed:", error);
     }

diff --git a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
@@ -447,14 +447,14 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
   </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
-      icon-display-connection-state-&amp;-recovery
+      icon-display-connection-state-recovery
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
         <svg class="text-cool-black hover:text-active-orange"
              style="width: 1.5rem; height: 1.5rem;"
         >
-          <use xlink:href="#sprite-icon-display-connection-state-&amp;-recovery">
+          <use xlink:href="#sprite-icon-display-connection-state-recovery">
           </use>
         </svg>
       </div>

diff --git a/src/core/styles.components.css b/src/core/styles.components.css
@@ -4,6 +4,7 @@
 @import "./styles/layout.css";
 @import "./styles/shadows.css";
 @import "./styles/text.css";
+@import "./styles/icons.css"; /* Autogenerated at build time */
 
 @layer components {
   /* Basis for icon component */
@@ -43,4 +44,8 @@
   .ui-container-padding {
     @apply px-24 py-40 sm:px-40 sm:py-48 md:p-64;
   }
+
+  .ui-icon {
+    @apply bg-cover;
+  }
 }
diff --git a/src/core/styles/Forms.stories.tsx b/src/core/styles/Forms.stories.tsx
@@ -80,6 +80,32 @@ export const Inputs = {
         />
         <p className="ui-text-p3 text-gui-error-red mt-8">Oof, what an input</p>
       </div>
+      <div>
+        <p className="mb-16 text-neutral-800">With icon insert</p>
+        <div className="relative">
+          <div className="h-32 w-32 ui-icon ui-icon-display-48hrs absolute left-8 top-8"></div>
+          <input
+            type="search"
+            className="ui-input pl-48"
+            placeholder="With icon"
+            autoComplete="off"
+          />
+        </div>
+      </div>
+      <div>
+        <p className="mb-16 text-neutral-800">With character insert</p>
+        <div className="relative">
+          <div className="h-32 w-32 absolute left-8 top-8 flex items-center justify-center">
+            $
+          </div>
+          <input
+            type="search"
+            className="ui-input pl-40"
+            placeholder="With icon"
+            autoComplete="off"
+          />
+        </div>
+      </div>
     </div>
   ),
 };

diff --git a/src/core/styles/__snapshots__/Forms.stories.tsx.snap b/src/core/styles/__snapshots__/Forms.stories.tsx.snap
@@ -255,6 +255,35 @@ exports[`CSS/Forms Inputs smoke-test 1`] = `
       Oof, what an input
     </p>
   </div>
+  <div>
+    <p class="mb-16 text-neutral-800">
+      With icon insert
+    </p>
+    <div class="relative">
+      <div class="h-32 w-32 ui-icon ui-icon-display-48hrs absolute left-8 top-8">
+      </div>
+      <input type="search"
+             class="ui-input pl-48"
+             placeholder="With icon"
+             autocomplete="off"
+      >
+    </div>
+  </div>
+  <div>
+    <p class="mb-16 text-neutral-800">
+      With character insert
+    </p>
+    <div class="relative">
+      <div class="h-32 w-32 absolute left-8 top-8 flex items-center justify-center">
+        $
+      </div>
+      <input type="search"
+             class="ui-input pl-40"
+             placeholder="With icon"
+             autocomplete="off"
+      >
+    </div>
+  </div>
 </div>
 `;