@digital-ai/dot-illustrations 2.0.23 → 2.0.24

package/demo/script.js

@@ -109,6 +109,7 @@ document.addEventListener('DOMContentLoaded', () => {
   localStorage.setItem('theme', 'light');
   themeToggle.addEventListener('click', () => {
     setTheme(!root.classList.contains('dark'));
+    renderIllustrations();
   });
 
   // --- TABS ---
@@ -208,11 +209,18 @@ document.addEventListener('DOMContentLoaded', () => {
     if (!descriptionsLoaded) return;
     const themeClass = root.classList.contains('dark') ? 'dark' : 'light';
     let categoryClass = "";
-    if (globalList.includes(illustration)) categoryClass = "global-illustration";
-    else if (dashboardsList.includes(illustration)) categoryClass = "dashboards-illustration";
-    modalImage.innerHTML = `<span class=\"dot-illustration\"><img src=\"svgs/${illustration}.svg\" class=\"${illustration} ${themeClass} ${categoryClass}\" style=\"width:286px;height:286px;object-fit:contain;\"/></span>`;
+    let categoryFolder = "";
+    if (globalList.includes(illustration)) {
+      categoryClass = "global-illustration";
+      categoryFolder = "global";
+    } else if (dashboardsList.includes(illustration)) {
+      categoryClass = "dashboards-illustration";
+      categoryFolder = "dashboards";
+    }
+    const svgPath = `illustrations/${themeClass}/${categoryFolder}/${illustration}.svg`;
+    modalImage.innerHTML = `<span class=\"dot-illustration\"><img src=\"${svgPath}\" class=\"${illustration} ${themeClass} ${categoryClass}\" style=\"width:286px;height:286px;object-fit:contain;\"/></span>`;
     modalIdInput.value = illustration;
-    const codeString = `<span class=\"dot-illustration\"><img src=\"svgs/${illustration}.svg\" class=\"${illustration} ${themeClass} ${categoryClass}\"/></span>`;
+    const codeString = `<span class=\"dot-illustration\"><img src=\"${svgPath}\" class=\"${illustration} ${themeClass} ${categoryClass}\"/></span>`;
     modalCode.value = codeString;
     modal.classList.add('active');
     modal.classList.remove('hidden');
@@ -259,8 +267,15 @@ document.addEventListener('DOMContentLoaded', () => {
     const themeClass = root.classList.contains('dark') ? 'dark' : 'light';
     toShow.forEach(illustration => {
       let categoryClass = "";
-      if (globalList.includes(illustration)) categoryClass = "global-illustration";
-      else if (dashboardsList.includes(illustration)) categoryClass = "dashboards-illustration";
+      let categoryFolder = "";
+      if (globalList.includes(illustration)) {
+        categoryClass = "global-illustration";
+        categoryFolder = "global";
+      } else if (dashboardsList.includes(illustration)) {
+        categoryClass = "dashboards-illustration";
+        categoryFolder = "dashboards";
+      }
+      const svgPath = `illustrations/${themeClass}/${categoryFolder}/${illustration}.svg`;
       const isFav = favs.includes(illustration);
       const div = document.createElement("div");
       div.setAttribute("class", "copy-container relative group flex flex-col items-center justify-between bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg p-2 md:p-3 transition-transform duration-200 hover:scale-105 hover:shadow-2xl h-[302px] w-full justify-center");
@@ -272,7 +287,7 @@ document.addEventListener('DOMContentLoaded', () => {
         </button>
         <div class="flex-1 flex flex-col justify-center items-center">
           <span class="dot-illustration">
-            <img src="svgs/${illustration}.svg" class="${illustration} ${themeClass} ${categoryClass}"/>
+            <img src="${svgPath}" class="${illustration} ${themeClass} ${categoryClass}"/>
           </span>
           <span class="iconID block text-center text-base font-medium text-gray-800 dark:text-gray-200 my-2">${illustration}</span>
         </div>
@@ -286,7 +301,7 @@ document.addEventListener('DOMContentLoaded', () => {
             <span class="tooltiptext left-1/2 -translate-x-1/2 bottom-10 shadow-md">Copy Code</span>
           </button>
         </div>
-        <pre class="codeBlock"><code class="codeBlock"><span class="dot-illustration"><img src="svgs/${illustration}.svg" class="${illustration} ${themeClass} ${categoryClass}"/></span></code></pre>
+        <pre class="codeBlock"><code class="codeBlock"><span class="dot-illustration"><img src="${svgPath}" class="${illustration} ${themeClass} ${categoryClass}"/></span></code></pre>
       `;
       list.appendChild(div);
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-illustrations",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "description": "A central place for the design team to keep illustrations and for dev teams to find them.",
   "main": "./index.css",
   "scripts": {