SVGFusion CLI

🚀 Command-line interface for converting SVG files into production-ready React and Vue 3 components with TypeScript support and batch processing capabilities.

Installation

``bash
npm install -g svgfusion-cmd


or


npx svgfusion-cmd
`

Quick Start

`bash


Convert single SVG to React component

svgfusion-cmd input.svg --output ./components --framework react

Batch convert all SVGs in a directory

svgfusion-cmd ./icons --output ./components --framework vue --typescript

Watch mode for development

svgfusion-cmd ./icons --output ./components --watch
`

Features

- Batch Processing - Convert entire directories of SVG files
- Fast & Efficient - Optimized for large-scale conversions
- Framework Support - React and Vue 3 components
- TypeScript Ready - Generate .tsx/.ts files with full type support
- Watch Mode - Automatically convert files on changes
- Customizable - Extensive configuration options
- Zero Dependencies - Standalone CLI tool

Usage

$3

`bash


Convert single file

svgfusion-cmd icon.svg --framework react --output ./components

Convert directory

svgfusion-cmd ./icons --framework vue --output ./src/components

With TypeScript

svgfusion-cmd ./icons --framework react --typescript --output ./components

Watch mode

svgfusion-cmd ./icons --framework react --watch --output ./components
`

$3

| Option | Alias | Description | Default |
| -------------- | ----- | ----------------------------- | ---------- |
| --framework | -f | Target framework (react, vue) | react |
| --output | -o | Output directory | ./output |
| --typescript | -t | Generate TypeScript files | false |
| --watch | -w | Watch for file changes | false |
| --config | -c | Configuration file path | - |
| --help | -h | Show help | - |
| --version | -v | Show version | - |

$3

Create a svgfusion.config.js file:

`javascript
export default {
framework: 'react',
typescript: true,
output: './src/components/icons',
template: 'functional',
naming: 'PascalCase',
// Add custom transformations
transforms: {
removeIds: true,
addDisplayName: true,
},
};
`

Examples

$3

`tsx
// Generated IconHome.tsx
import React from 'react';

interface IconHomeProps extends React.SVGProps {}

export const IconHome: React.FC = props => {
return (
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
{...props}
>


);
};

export default IconHome;
`

$3

`vue




`

Advanced Usage

$3

`bash


Convert with custom naming


svgfusion-cmd ./icons --framework react --typescript \
--output ./components \
--naming "Icon{name}" \
--case PascalCase
`

$3

`json
{
"scripts": {
"icons:build": "svgfusion-cmd ./assets/icons --framework react --typescript --output ./src/components/icons",
"icons:watch": "svgfusion-cmd ./assets/icons --framework react --typescript --output ./src/components/icons --watch"
}
}
``

Documentation

Visit svgfusion.netlify.app for complete documentation, examples, and advanced configuration options.

License

MIT © lolvoid