SVG Viewer CLI

A simple, fast command-line tool to recursively find and display local SVG files on a webpage.

Features

• Recursive Search: Automatically finds all .svg files in a given directory and its subdirectories.
• Local Web Server: Starts a lightweight local server to display your icons.
• Clean Grid Display: Shows all icons in a clean, responsive grid.
• Click to Copy: Simply click on any icon to copy its filename to your clipboard.
• Zero Dependencies: Runs on pure Node.js with no third-party packages.
• Custom Port: Easily specify a custom port for the server.

Prerequisites

You need to have Node.js (version 16 or higher) and npm installed on your system.

Installation

Install the package globally using npm to make the svg-viewer command available anywhere on your system.

npm install -g svg-viewer-cli

Usage

The command requires one argument: the path to the directory you want to scan.

svg-viewer <path> [options]

Examples:

1. Scan the current directory:

   svg-viewer .

2. Scan a specific folder:

   svg-viewer ./path/to/my-icons

3. Use a custom port (e.g., 9000):

   The --port flag can be placed anywhere.

   svg-viewer ./assets --port 9000

After running the command, open your web browser and navigate to http://localhost:9000 (or the custom port you specified).

default port is 8080

Usage in Your Project (as a devDependency)

Instead of installing the package globally, you can add it as a development dependency to your project. This is the recommended approach for team projects, as it ensures everyone uses the same version of the tool.

Step 1: Install as a devDependency

In your project's root directory, run the following command:

npm install svg-viewer-cli --save-dev

(You can also use the shorthand: npm i -D svg-viewer-cli)

This will add svg-viewer-cli to the devDependencies in your package.json file.

Step 2: Add a Script to package.json

Open your package.json and add a new entry to the scripts object. This creates a convenient shortcut to run the viewer.

Replace ./src/assets/icons with the path to your project's SVG directory.

{
  "name": "my-awesome-project",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "view:svgs": "svg-viewer ./src/assets/icons"
  },
  "devDependencies": {
    "svg-viewer-cli": "^1.0.1"
  }
}

How does this work? When you run a command via npm run, npm automatically looks for the executable in your project's node_modules/.bin directory, so you don't need to worry about the path.

Step 3: Run the Script

Now you can easily view your project's icons by running:

npm run view:svgs

This will start the SVG viewer and point it to the directory you configured in your script.