Replace SVG attributes that are not compat. with React
npm install subatbash
Install globally for CLI usage
npm install -g subat
Or use directly with npx
npx subat
For plugin usage in your project
npm install subat
`
Quick Start
$3
`bash
Process a single file
subat path/to/file.tsx
Process multiple files
subat file1.tsx file2.jsx src/icons.tsx
`
$3
`ts
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import subat from "subat";
export default defineConfig({
plugins: [subat.vite({}), react()],
});
`
Example Transformation
`tsx
// Input:
// Output:
`
Features
- CLI Tool: Process single or multiple files at once
- Build Tool Plugin: Automatic transformation during development and build
- Universal Plugin: Works with Vite, Webpack, and Rollup via unplugin
- Smart Processing: Only transforms files containing SVG elements
- TypeScript Support: Full TypeScript support for both CLI and plugin
📖 Detailed CLI Usage
$3
`bash
subat path/to/file.tsx
`
$3
`bash
Process multiple specific files
subat file1.tsx file2.jsx src/icons.tsx
Process with glob patterns (if your shell supports it)
subat src//.tsx components//.jsx
`
$3
The tool provides feedback for each file:
- ✅ Successfully processed files
- ❌ Files with errors
- ℹ️ Files that were skipped (no SVG content)
Example output:
`
Processing: src/icons.tsx
✓ Successfully processed: src/icons.tsx
Processing: components/Icon.jsx
✓ Successfully processed: components/Icon.jsx
File not found: missing.tsx
`
🔧 Plugin Configuration
$3
`ts
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import subat from "subat";
export default defineConfig({
plugins: [
subat.vite({
include: ["/.tsx", "/.jsx"], // default
exclude: ["node_modules/**"], // default
}),
react(),
],
});
`
$3
`js
// webpack.config.js
const subat = require("subat");
module.exports = {
plugins: [
subat.webpack({
include: ["/.tsx", "/.jsx"],
exclude: ["node_modules/**"],
}),
],
};
`
$3
`js
// rollup.config.js
import subat from "subat";
export default {
plugins: [
subat.rollup({
include: ["/.tsx", "/.jsx"],
exclude: ["node_modules/**"],
}),
],
};
`
$3
`ts
interface SubatPluginOptions {
include?: string[]; // File patterns to include (default: ['/.tsx', '/.jsx'])
exclude?: string[]; // File patterns to exclude (default: ['node_modules/**'])
}
`
$3
If you prefer specific imports:
`ts
// Vite-specific import
import subat from "subat/vite";
// Webpack-specific import
import subat from "subat/webpack";
// Rollup-specific import
import subat from "subat/rollup";
`
🎯 How It Works
The tool identifies SVG attributes with kebab-case naming and converts them to camelCase to match React/JSX conventions:
$3
- stroke-width → strokeWidth
- fill-rule → fillRule
- stroke-linecap → strokeLinecap
- stroke-linejoin → strokeLinejoin
- stroke-dasharray → strokeDasharray
- stroke-dashoffset → strokeDashoffset
- fill-opacity → fillOpacity
- stroke-opacity → strokeOpacity
- clip-rule → clipRule
- clip-path → clipPath
$3
1. File Detection: Only processes files containing