feat: add option to show bigger icon in front of small icon

material-extensions · Mar 29, 2024 · 9de5e93 · 9de5e93
1 parent f1a5b4c
commit 9de5e93
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -26,3 +26,21 @@ npx svg-icon-review ./images/**/*.svg
 The output is a preview of how the icons look in either dark or light backgrounds:
 
 <img src="./images/preview.png" alt="logo" >
+
+## Options
+
+Optionally, an additional bigger icon (in size of 32x32px) will be shown in front of the preview. This is useful to see the icon in more detail. This can be done by adding the `--bigIcon` option like this:
+
+```bash
+npx svg-icon-review --bigIcon file1.svg file2.svg
+```
+
+The preview will look like this:
+
+<img src="./images/preview-big-icon.png" alt="logo" >
+
+If further help is needed, the `--help` option can be used:
+
+```bash
+npx svg-icon-review --help
+```
diff --git a/images/preview-big-icon.png b/images/preview-big-icon.png
diff --git a/src/cli/commands/printHelp.ts b/src/cli/commands/printHelp.ts
@@ -8,9 +8,11 @@ const printHelp = () => {
     $ npx svg-icon-review ./icons/*.svg
 
   Options
-    --silent, -s  Not showing any output
+    --bigIcons, -b  Show big icons in front of the small icons
     --debug, -d  Show generated HTML
     --help, -h  Show help
+    --silent, -s  Not showing any output
+    --version, -v  Show version
     `
   );
 };

diff --git a/src/cli/config/flags.ts b/src/cli/config/flags.ts
@@ -5,12 +5,20 @@ import { Config } from '../../core';
 export type CliFlags = {
   version?: boolean;
   help?: boolean;
+  debug?: boolean;
+  silent?: boolean;
+  bigIcon?: boolean;
 };
 
 const flags: minimist.Opts | undefined = {
-  boolean: ['version', 'help', 'debug', 'silent'] satisfies (keyof (CliFlags &
-    Config))[],
-  alias: { v: 'version', h: 'help', d: 'debug', s: 'silent' },
+  boolean: [
+    'version',
+    'help',
+    'debug',
+    'silent',
+    'bigIcon',
+  ] satisfies (keyof (CliFlags & Config))[],
+  alias: { v: 'version', h: 'help', d: 'debug', s: 'silent', b: 'bigIcon' },
   unknown: (a) => true,
   default: { lang: 'en' },
   '--': true,

diff --git a/src/cli/index.ts b/src/cli/index.ts
@@ -23,6 +23,7 @@ const run = async () => {
   await printResults(args._, {
     debug: args.debug ?? false,
     silent: args.silent ?? false,
+    bigIcon: args.bigIcon ?? false,
   });
 };
 

diff --git a/src/core/generate-preview.ts b/src/core/generate-preview.ts
@@ -13,7 +13,8 @@ import { createScreenshot } from './utils/screenshot';
 export const generatePreview = async (fileNames: string[], config: Config) => {
   const darkTheme = createTheme(
     'dark',
-    fileNames.filter((f) => !f.includes('_light'))
+    fileNames.filter((f) => !f.includes('_light')),
+    config.bigIcon
   );
   const lightTheme = createTheme(
     'light',
@@ -22,7 +23,8 @@ export const generatePreview = async (fileNames: string[], config: Config) => {
         !fileNames.some((otherFile) =>
           otherFile.includes(`${basename(f, '.svg')}_light.svg`)
         )
-    )
+    ),
+    config.bigIcon
   );
   const previewTemplate = `<!DOCTYPE html><head><style>${previewStyles}</style></head>
   <body><div class="theme-review">${darkTheme}${lightTheme}</div></body>
@@ -48,17 +50,21 @@ export const generatePreview = async (fileNames: string[], config: Config) => {
   }
 };
 
-const createTheme = (theme: Theme, fileNames: string[]): string => {
+const createTheme = (
+  theme: Theme,
+  fileNames: string[],
+  bigIcon = false
+): string => {
   const iconsTemplate = fileNames.reduce((acc, fileName) => {
     const iconName = basename(fileName, '.svg');
     const fullIconPath = resolve(fileName).replace(/\\/g, '/');
+    const bigIconPreview = `<span class="icon-preview" style="background-image: url('${fullIconPath}')"></span><div class="divider"></div>`;
 
     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>
+    <li class="${bigIcon ? 'with-big-icon' : ''}">
+      <div class="icon ${bigIcon ? 'with-big-icon' : ''}">
+        ${bigIcon ? bigIconPreview : ''}
+        <span class="icon-preview-small" style="background-image: url('${fullIconPath}')"></span>
         <span class="iconName">${iconName}</span>
       </div>
     </li>`;

diff --git a/src/core/models/config.ts b/src/core/models/config.ts
@@ -1,4 +1,5 @@
 export type Config = {
   debug?: boolean;
   silent?: boolean;
+  bigIcon?: boolean;
 };
diff --git a/src/core/styles.ts b/src/core/styles.ts
@@ -4,13 +4,15 @@ export const previewStyles = `
     .theme-review { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; width: 600px; }
     .theme-review ul { list-style: none; padding: 0; margin: 0; }
     .theme-review ul > li { line-height: 1.5;}
+    .theme-review ul > li.with-big-icon { line-height: 3;}
     .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); }
     .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 { display: grid; align-items: center; grid-template-columns: 16px auto; gap: 5px; }
+    .icon.with-big-icon { grid-template-columns: 32px 16px 16px auto; }
     .icon-preview { content: " "; background-size: 32px; background-position: 0; background-repeat: no-repeat; width: 32px; height: 32px; }
     .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; }