Update preview to show big and small sizes of icon

PKief · Mar 29, 2024 · f1a5b4c · f1a5b4c
1 parent f5f9d94
commit f1a5b4c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/core/generate-preview.ts b/src/core/generate-preview.ts
@@ -53,7 +53,15 @@ const createTheme = (theme: Theme, fileNames: string[]): string => {
     const iconName = basename(fileName, '.svg');
     const fullIconPath = resolve(fileName).replace(/\\/g, '/');
 
-    return `${acc}<li><div class="icon"><span class="icon-preview" style="background-image: url('${fullIconPath}')"></span><span class="iconName">${iconName}</span></div></li>`;
+    return `${acc}
+    <li>
+      <div class="icon">
+        <span class="icon-preview" style="background-image: url('${fullIconPath}')"></span>
+        <div class="divider"></div>
+        <span class="icon-preview-small" style="background-image: url('C:/Projects/svg-icon-review/logo.svg');"></span>
+        <span class="iconName">${iconName}</span>
+      </div>
+    </li>`;
   }, '');
 
   return `<div class="theme-container ${theme}"><h2>${titleCase(

diff --git a/src/core/styles.ts b/src/core/styles.ts
@@ -7,8 +7,12 @@ export const previewStyles = `
     .theme-container { padding: 1rem; }
     .theme-container > h2 { font-size: 1rem; margin-top: 0; }
     .theme-container.dark { color: var(--dark-theme-font-color); background: var(--dark-theme-bg-color); }
+    .theme-container.dark .divider { background: var(--dark-theme-font-color); }
     .theme-container.light { color: var(--light-theme-font-color); background: var(--light-theme-bg-color); }
-    .icon { display: grid; align-items: center; grid-template-columns: 32px auto; gap: 16px; }
+    .theme-container.light .divider { background: var(--light-theme-font-color); }
+    .icon { display: grid; align-items: center; grid-template-columns: 32px 16px 16px auto; gap: 5px; }
     .icon-preview { content: " "; background-size: 32px; background-position: 0; background-repeat: no-repeat; width: 32px; height: 32px; }
-    .icon > span { font-size: 32px; text-overflow: ellipsis; overflow: hidden; }
+    .divider { height: 75%; width: 1px; justify-self: center; border-radius: 16px; }
+    .icon-preview-small { content: ' '; background-size: 16px; background-position: 0; background-repeat: no-repeat; width: 16px; height: 16px; }
+    .icon > span { font-size: 13px; text-overflow: ellipsis; overflow: hidden; }
 `;