Introduction

neon-generator is a utility to generate Vue components from SVG files and create an index of these components. This package provides both CLI and API interfaces for integration and usage.

Installation

To add neon-generator to your project, run the following command:

npm install neon-generator

Usage

There are two primary ways to use neon-generator: via the command line interface (CLI) or programmatically in your JavaScript/TypeScript code.

CLI Usage

Setup NPM Scripts

Add the following scripts to the scripts section of your package.json:

"scripts": {
    "generate-entry": "generate-entry-index --input=./path-to-source --output=./path-to-output",
    "generate-svg-vue": "generate-svg-vue --input=./path-to-source --output=./path-to-output",
    "generate": "npm run generate-entry && npm run generate-svg-vue"
}

Ensure you replace ./path-to-source and ./path-to-output with the appropriate paths for your project.

Run the Scripts

You can now use the following commands to run the generators:

To generate the Vue components index:

• npm run generate-entry

To generate Vue components from SVG files:

• npm run generate-svg-vue

To run both operations consecutively:

• npm run generate

API Usage Import the Required Functions

In your JavaScript/TypeScript file:

import { generateSvgVue, generateVueComponentsIndex } from 'neon-generator';

Use the Functions in Your Code

// To generate Vue components from SVGs
generateSvgVue(inputPath, outputPath);

// To generate an index of Vue components
generateVueComponentsIndex(inputPath, outputPath);

Conclusion neon-generator provides a streamlined way to manage SVGs as Vue components in your project. Whether you're using the command line or integrating directly into your codebase, neon-generator offers flexibility and efficiency.