diff --git a/README.md b/README.md index d7277bc..98329a3 100644 --- a/README.md +++ b/README.md @@ -1,78 +1,108 @@ -

-
- logo -

- SVG Icon Review -
-
-

- -

Tool to review SVG icons automatically

- -## CLI Command - -The tool can be executed with this command: - -``` -bunx svg-icon-review file1.svg file2.svg -``` - -It also supports glob file patterns to check multiple files matching the pattern like this: - -``` -bunx svg-icon-review ./images/**/*.svg -``` - -The output is a preview of how the icons look in either dark or light backgrounds: - -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 -bunx svg-icon-review --bigIcon file1.svg file2.svg -``` - -The preview will look like this: - -logo - -If further help is needed, the `--help` option can be used: - -```bash -bunx svg-icon-review --help -``` - -> Instead of "bunx" you can use "npx" if you prefer Node.js. - -## Development - -For the development of this tool, Bun.js is used. First you have to install the dependencies: - -```bash -bun install -``` - -Then you can run the tool with: - -```bash -bun run start -``` - -It is going to create a preview image of the logo.svg file in the root directory. - -### Formatting and Linting - -To format the code, run: - -```bash -bun run format -``` - -To lint the code, run: - -```bash -bun run lint -``` +

+
+ logo +

+ SVG Icon Review +
+
+

+ +

Tool to review SVG icons automatically

+ +## CLI Command + +The tool can be executed with this command: + +``` +bunx svg-icon-review file1.svg file2.svg +``` + +It also supports glob file patterns to check multiple files matching the pattern like this: + +``` +bunx svg-icon-review ./images/**/*.svg +``` + +The output is a preview of how the icons look in either dark or light backgrounds: + +logo + +## Options + +### `--bigIcon` + +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 +bunx svg-icon-review --bigIcon file1.svg file2.svg +``` + +The preview will look like this: + +logo + +### `--silent` + +By default, the tool will output a result message to the console. If you want to avoid this output, you can use the `--silent` option: + +```bash +bunx svg-icon-review --silent file1.svg file2.svg +``` + +### `--debug` + +If you want to see the debug information, you can use the `--debug` option: + +```bash +bunx svg-icon-review --debug file1.svg file2.svg +``` + +### `--noSandbox` + +By default, the tool uses a sandboxed environment to render the SVG icons. If you want to disable this sandbox, you can use the `--noSandbox` option: + +```bash +bunx svg-icon-review --noSandbox file1.svg file2.svg +``` + +Running without a sandbox is strongly discouraged because of security risks. Consider configuring a sandbox instead. If you absolutely trust the content you with this tool, you can launch it with the --noSandbox argument. + +### `--help` + +If further help is needed, the `--help` option can be used: + +```bash +bunx svg-icon-review --help +``` + +> Instead of "bunx" you can use "npx" if you prefer Node.js. + +## Development + +For the development of this tool, Bun.js is used. First you have to install the dependencies: + +```bash +bun install +``` + +Then you can run the tool with: + +```bash +bun run start +``` + +It is going to create a preview image of the logo.svg file in the root directory. + +### Formatting and Linting + +To format the code, run: + +```bash +bun run format +``` + +To lint the code, run: + +```bash +bun run lint +``` diff --git a/src/cli/commands/printHelp.ts b/src/cli/commands/printHelp.ts index 217e80e..6558289 100644 --- a/src/cli/commands/printHelp.ts +++ b/src/cli/commands/printHelp.ts @@ -1,20 +1,21 @@ -const printHelp = () => { - return console.log( - ` - Usage - $ npx svg-icon-review mySvgFile.svg anotherSvgFile.svg - - Usage with glob pattern - $ npx svg-icon-review ./icons/*.svg - - Options - --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 - ` - ); -}; - -export { printHelp }; +const printHelp = () => { + return console.log( + ` + Usage + $ npx svg-icon-review mySvgFile.svg anotherSvgFile.svg + + Usage with glob pattern + $ npx svg-icon-review ./icons/*.svg + + Options + --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 + --noSandbox, -n Run without using a sandbox + ` + ); +}; + +export { printHelp }; diff --git a/src/cli/config/flags.ts b/src/cli/config/flags.ts index f7faac0..95e3cd8 100644 --- a/src/cli/config/flags.ts +++ b/src/cli/config/flags.ts @@ -1,27 +1,36 @@ -import minimist from 'minimist'; -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', - 'bigIcon', - ] satisfies (keyof (CliFlags & Config))[], - alias: { v: 'version', h: 'help', d: 'debug', s: 'silent', b: 'bigIcon' }, - unknown: (a) => true, - default: { lang: 'en' }, - '--': true, - stopEarly: true, -}; - -export { flags }; +import minimist from 'minimist'; +import { Config } from '../../core'; + +export type CliFlags = { + version?: boolean; + help?: boolean; + debug?: boolean; + silent?: boolean; + bigIcon?: boolean; + noSandbox?: boolean; +}; + +const flags: minimist.Opts | undefined = { + boolean: [ + 'version', + 'help', + 'debug', + 'silent', + 'bigIcon', + 'noSandbox', + ] satisfies (keyof (CliFlags & Config))[], + alias: { + v: 'version', + h: 'help', + d: 'debug', + s: 'silent', + b: 'bigIcon', + n: 'noSandbox', + }, + unknown: (a) => true, + default: { lang: 'en' }, + '--': true, + stopEarly: true, +}; + +export { flags }; diff --git a/src/cli/index.ts b/src/cli/index.ts index 2aaa517..535791d 100644 --- a/src/cli/index.ts +++ b/src/cli/index.ts @@ -1,35 +1,36 @@ -import minimist from 'minimist'; -import { Config } from '../core'; -import { printHelp } from './commands/printHelp'; -import { printResults } from './commands/printResults'; -import { printVersion } from './commands/printVersion'; -import { CliFlags, flags } from './config/flags'; - -const run = async () => { - const args = minimist>( - process.argv.slice(2), - flags - ); - - if (args.version) { - printVersion(); - return; - } - if (args.help) { - printHelp(); - return; - } - - await printResults(args._, { - debug: args.debug ?? false, - silent: args.silent ?? false, - bigIcon: args.bigIcon ?? false, - }); -}; - -try { - run(); -} catch (error) { - console.log(error); - throw error; -} +import minimist from 'minimist'; +import { Config } from '../core'; +import { printHelp } from './commands/printHelp'; +import { printResults } from './commands/printResults'; +import { printVersion } from './commands/printVersion'; +import { CliFlags, flags } from './config/flags'; + +const run = async () => { + const args = minimist>( + process.argv.slice(2), + flags + ); + + if (args.version) { + printVersion(); + return; + } + if (args.help) { + printHelp(); + return; + } + + await printResults(args._, { + debug: args.debug ?? false, + silent: args.silent ?? false, + bigIcon: args.bigIcon ?? false, + noSandbox: args.noSandbox ?? false, + }); +}; + +try { + run(); +} catch (error) { + console.log(error); + throw error; +} diff --git a/src/core/generate-preview.ts b/src/core/generate-preview.ts index 06ed79e..deac15e 100644 --- a/src/core/generate-preview.ts +++ b/src/core/generate-preview.ts @@ -1,82 +1,82 @@ -import { writeFileSync } from 'node:fs'; -import { basename, join, resolve } from 'node:path'; -import { green, red } from '../cli/utils'; -import { Config, Theme } from './models'; -import { previewStyles } from './styles'; -import { createScreenshot } from './utils/screenshot'; - -/** - * Generates a preview of dark and light theme of SVG icons. - * - * @param fileNames List of SVG file names - */ -export const generatePreview = async (fileNames: string[], config: Config) => { - const darkTheme = createTheme( - 'dark', - fileNames.filter((f) => !f.includes('_light')), - config.bigIcon - ); - const lightTheme = createTheme( - 'light', - fileNames.filter( - (f) => - !fileNames.some((otherFile) => - otherFile.includes(`${basename(f, '.svg')}_light.svg`) - ) - ), - config.bigIcon - ); - const previewTemplate = ` -
${darkTheme}${lightTheme}
- `; - - const previewHtmlPath = join(__dirname, 'preview.html'); - writeFileSync(previewHtmlPath, previewTemplate); - - try { - await createScreenshot(previewHtmlPath, 'preview'); - - if (config.silent) return; - if (config.debug) { - console.log(previewTemplate); - } - - console.log( - '> SVG Icon Review:', - green(`Successfully created preview image!`) - ); - } catch (error) { - throw Error(red(`Error while creating preview image`)); - } -}; - -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 = `
`; - - return `${acc} -
  • -
    - ${bigIcon ? bigIconPreview : ''} - - ${iconName} -
    -
    • `; - }, ''); - - return `

    ${titleCase( - theme - )} Theme

      ${iconsTemplate}
    `; -}; - -const titleCase = (value: string) => - value - .replace(/([A-Z])/g, (match) => ` ${match}`) - .replace(/^./, (match) => match.toUpperCase()) - .trim(); +import { writeFileSync } from 'node:fs'; +import { basename, join, resolve } from 'node:path'; +import { green, red } from '../cli/utils'; +import { Config, Theme } from './models'; +import { previewStyles } from './styles'; +import { createScreenshot } from './utils/screenshot'; + +/** + * Generates a preview of dark and light theme of SVG icons. + * + * @param fileNames List of SVG file names + */ +export const generatePreview = async (fileNames: string[], config: Config) => { + const darkTheme = createTheme( + 'dark', + fileNames.filter((f) => !f.includes('_light')), + config.bigIcon + ); + const lightTheme = createTheme( + 'light', + fileNames.filter( + (f) => + !fileNames.some((otherFile) => + otherFile.includes(`${basename(f, '.svg')}_light.svg`) + ) + ), + config.bigIcon + ); + const previewTemplate = ` +
    ${darkTheme}${lightTheme}
    + `; + + const previewHtmlPath = join(__dirname, 'preview.html'); + writeFileSync(previewHtmlPath, previewTemplate); + + try { + await createScreenshot(previewHtmlPath, 'preview', config.noSandbox); + + if (config.silent) return; + if (config.debug) { + console.log(previewTemplate); + } + + console.log( + '> SVG Icon Review:', + green(`Successfully created preview image!`) + ); + } catch (error) { + throw Error(red(`Error while creating preview image`)); + } +}; + +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 = `
    `; + + return `${acc} +
  • +
    + ${bigIcon ? bigIconPreview : ''} + + ${iconName} +
    +
    • `; + }, ''); + + return `

    ${titleCase( + theme + )} Theme

      ${iconsTemplate}
    `; +}; + +const titleCase = (value: string) => + value + .replace(/([A-Z])/g, (match) => ` ${match}`) + .replace(/^./, (match) => match.toUpperCase()) + .trim(); diff --git a/src/core/models/config.ts b/src/core/models/config.ts index 0c5dd97..e820b23 100644 --- a/src/core/models/config.ts +++ b/src/core/models/config.ts @@ -1,5 +1,6 @@ -export type Config = { - debug?: boolean; - silent?: boolean; - bigIcon?: boolean; -}; +export type Config = { + debug?: boolean; + silent?: boolean; + bigIcon?: boolean; + noSandbox?: boolean; +}; diff --git a/src/core/utils/screenshot.ts b/src/core/utils/screenshot.ts index a26237b..dd4e80c 100644 --- a/src/core/utils/screenshot.ts +++ b/src/core/utils/screenshot.ts @@ -1,32 +1,38 @@ -import { join } from 'node:path'; -import puppeteer from 'puppeteer'; - -/** - * Create a screenshot from an HTML file and save it as image. - * @param filePath Path of an HTML file - * @param fileName Name of the output image - */ -export const createScreenshot = async (filePath: string, fileName: string) => { - try { - const htmlFilePath = join('file://', filePath); - const browser = await puppeteer.launch({ - headless: true, - }); - const page = await browser.newPage(); - await page.setViewport({ width: 3200, height: 3200, deviceScaleFactor: 0 }); - - await page.goto(htmlFilePath); - - const themeReviewElement = await page.$('.theme-review'); - - await themeReviewElement?.screenshot({ - path: `./${fileName}.png`, - omitBackground: true, - }); - - await browser.close(); - } catch (error) { - console.error(error); - throw Error('Could not create screenshot for a preview'); - } -}; +import { join } from 'node:path'; +import puppeteer from 'puppeteer'; + +/** + * Create a screenshot from an HTML file and save it as image. + * @param filePath Path of an HTML file + * @param fileName Name of the output image + * @param noSandbox Disable sandbox mode + */ +export const createScreenshot = async ( + filePath: string, + fileName: string, + noSandbox = false +) => { + try { + const htmlFilePath = join('file://', filePath); + const browser = await puppeteer.launch({ + headless: true, + args: noSandbox ? ['--no-sandbox', '--disable-setuid-sandbox'] : [], + }); + const page = await browser.newPage(); + await page.setViewport({ width: 3200, height: 3200, deviceScaleFactor: 0 }); + + await page.goto(htmlFilePath); + + const themeReviewElement = await page.$('.theme-review'); + + await themeReviewElement?.screenshot({ + path: `./${fileName}.png`, + omitBackground: true, + }); + + await browser.close(); + } catch (error) { + console.error(error); + throw Error('Could not create screenshot for a preview'); + } +};