Command-line interface for converting SVG files into React and Vue 3 components with TypeScript support and batch processing capabilities.
š Command-line interface for converting SVG files into production-ready React and Vue 3 components with TypeScript support and batch processing capabilities.
``bash`
npm install -g svgfusion-cmdor
npx svgfusion-cmd
`bashConvert single SVG to React component
svgfusion-cmd input.svg --output ./components --framework react
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 ./componentsConvert directory
svgfusion-cmd ./icons --framework vue --output ./src/componentsWith TypeScript
svgfusion-cmd ./icons --framework react --typescript --output ./componentsWatch 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
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
v-bind="$attrs"
>
`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"
}
}
``Visit svgfusion.netlify.app for complete documentation, examples, and advanced configuration options.
MIT Ā© lolvoid