Features

Stroke Width Splitting: Extract and convert stroke widths to props for responsive design Browser API: Use SVGFusion directly in the browser with full feature support Smart Component Naming: Automatic prefix/suffix handling with proper PascalCase conversion Advanced Color Splitting: Intelligent color extraction with fill/stroke optimization Native SVG Props: Generated components extend React.SVGProps<SVGSVGElement> and Vue SVGAttributes React & Vue Support: Generate both React and Vue 3 components from the same SVG Complex SVG Support: Handles gradients, masks, filters, patterns, and Figma exports TypeScript Ready: Full TypeScript support with proper type definitions Batch Processing: Convert entire directories of SVG files Production Ready: Optimized output, error handling, and accessibility Simple CLI: Direct, intuitive command structure

Stroke Width Splitting

Extract stroke widths from SVG elements and convert them to component props for responsive designs:

1// Original SVG: <path stroke-width="2" d="..."/>
2// Generated React component:
3<MyIcon strokeWidth1={4} /> // Scales the stroke width

Color Splitting (splitColors)

Extracts all unique fill, stroke, and gradient colors from your SVG and generates props for each color and color class. Automatically adds fill="none" or stroke="none" to prevent unwanted browser defaults:

• Path with only fill → gets stroke="none"
• Path with only stroke → gets fill="none"
• Path with both → keeps both as props
• Path with neither → stays unchanged

Try It Live

Experience SVGFusion instantly in your browser!

Launch Interactive Playground →

Upload your SVG files, experiment with different options, and see the generated React/Vue components in real-time. No installation required!

Quick Start

Simple as One Command

1# Convert all SVG files in a directory to React components
2npx svgfusion ./icons --output ./components
3
4# Add prefixes, suffixes, and generate index file
5npx svgfusion ./icons --prefix Icon --suffix Component --index
6
7# Advanced: Split colors for Tailwind CSS with fixed stroke width
8npx svgfusion ./icons --split-colors --fixed-stroke-width --prefix Icon

Installation

1# Install globally (recommended for CLI usage)
2npm install -g svgfusion
3
4# Or use npx (no installation needed)
5npx svgfusion ./icons --output ./components
6
7# Or install locally for programmatic usage
8npm install svgfusion
9# or
10yarn add svgfusion
11# or
12pnpm add svgfusion

CLI Options

svgfusion ./icons --output ./components --prefix Icon --suffix Svg

You can add a prefix and/or suffix to the generated component names using the --prefix and --suffix options:

1npx svgfusion ./svgs --prefix Icon --suffix Svg

This will generate components like IconStarSvg, IconUserSvg, etc.

Both options sanitize input to remove symbols and spaces. If omitted, no prefix/suffix is added.

Example

1npx svgfusion ./svgs --prefix App --suffix Widget
2# Output: AppStarWidget, AppUserWidget, ...

For more details, run:

1npx svgfusion --help

CLI Usage

1# Convert to React components (default)
2svgfusion ./icons --output ./components
3
4# Convert to Vue 3 components
5svgfusion ./icons --output ./components --framework vue
6
7# Single file conversion with TypeScript
8svgfusion ./star.svg --output ./components --typescript
9
10# Batch processing with recursive directory scanning
11svgfusion ./icons --output ./components --recursive
12
13# Generate index file for tree-shaking
14svgfusion ./icons --output ./components --index
15
16# Advanced: Split colors for maximum customization
17svgfusion ./icons --output ./components --split-colors
18
19# Advanced: Fixed stroke width with split colors
20svgfusion ./icons --output ./components --split-colors --fixed-stroke-width
21
22# Using npx (no global install needed)
23npx svgfusion ./icons --output ./components --framework react

Available CLI Options

1svgfusion <input> [options]
2
3Arguments:
4  <input>                      SVG file or directory to convert
5
6Options:
7  -o, --output <dir>           Output directory for generated components (default: "./components")
8  -f, --framework <framework>  Target framework: react or vue (default: "react")
9  --typescript                 Generate TypeScript components (default: true)
10  --javascript                 Generate JavaScript components
11  --split-colors               Enable color splitting feature
12  --fixed-stroke-width         Enable fixed stroke width feature
13  --memo                       Wrap component with React.memo (default: true)
14  --no-memo                    Disable React.memo wrapping
15  --forward-ref                Enable forwardRef support (default: true)
16  --no-forward-ref             Disable forwardRef support
17  -n, --name <name>            Custom component name
18  --optimize                   Enable SVG optimization (default: true)
19  --no-optimize                Disable SVG optimization
20  --recursive                  Process directories recursively
21  --prefix <prefix>            Add prefix to component names
22  --suffix <suffix>            Add suffix to component names
23  --index                      Generate index.ts file for directory processing
24  -h, --help                   Show help

--prefix <prefix> Add prefix to component name (sanitized) --suffix <suffix> Add suffix to component name (sanitized) --split-colors Extract individual color props for each SVG color --fixed-stroke-width Add support for non-scaling stroke width -h, --help Show help

### Using with npx (No Installation Required)

Perfect for trying out SVGFusion or one-time conversions:

```bash
# Convert React components
npx svgfusion ./assets/icons --output ./src/components/icons

# Convert Vue components with TypeScript
npx svgfusion ./assets/icons --output ./src/components --framework vue --typescript

# Convert single file
npx svgfusion ./logo.svg --output ./src/components --framework react

# Batch convert with index generation
npx svgfusion ./assets/icons --output ./src/components --recursive --index

# Convert with custom naming
npx svgfusion ./assets/icons --output ./src/components --prefix Icon --suffix Component --index

# Advanced: Split colors for Tailwind CSS compatibility
npx svgfusion ./assets/icons --output ./src/components --split-colors --prefix Icon

# Advanced: Fixed stroke width with split colors
npx svgfusion ./assets/icons --output ./src/components --split-colors --fixed-stroke-width

Programmatic Usage

Single File Conversion

1import { SVGFusion } from 'svgfusion';
2
3const engine = new SVGFusion();
4const svgContent = `<svg viewBox="0 0 24 24"><path fill="#FF0000" stroke="#00FF00" d="..."/></svg>`;
5
6const result = await engine.convert(svgContent, {
7  framework: 'react', // or 'vue'
8  transformation: { splitColors: true },
9  generator: { componentName: 'MyIcon', typescript: true },
10});
11
12console.log(result.code); // The generated component code

API Reference

For the complete API documentation, visit svgfusion.netlify.app.

Examples

Input SVG

1<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
3        fill="currentColor" class="star-fill"/>
4</svg>

Generated React Component

1import type { SVGProps } from 'react';
2
3interface StarIconProps extends SVGProps<SVGSVGElement> {}
4
5const StarIcon = (props: StarIconProps) => {
6  return (
7    <svg viewBox="0 0 24 24" {...props}>
8      <path
9        d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
10        fill="currentColor"
11        className="star-fill"
12      />
13    </svg>
14  );
15};
16
17export { StarIcon };

Generated React Component with Color Splitting

1import type { SVGProps } from 'react';
2
3interface StarIconProps extends SVGProps<SVGSVGElement> {
4  fillColor?: string;
5}
6
7const StarIcon = ({ fillColor = 'currentColor', ...props }: StarIconProps) => {
8  return (
9    <svg viewBox="0 0 24 24" {...props}>
10      <path
11        d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
12        fill={fillColor}
13        className="star-fill"
14      />
15    </svg>
16  );
17};
18
19export { StarIcon };

Generated Vue Component

1<script setup lang="ts">
2import type { SVGAttributes } from 'vue';
3
4interface StarIconProps extends SVGAttributes {}
5
6defineOptions({ inheritAttrs: false });
7</script>
8
9<template>
10  <svg v-bind="$attrs" viewBox="0 0 24 24">
11    <path
12      d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
13      fill="currentColor"
14      class="star-fill"
15    />
16  </svg>
17</template>

Generated Vue Component with Color Splitting

1<script setup lang="ts">
2import type { SVGAttributes } from 'vue';
3
4interface StarIconProps extends SVGAttributes {
5  fillColor?: string;
6}
7
8const props = withDefaults(defineProps<StarIconProps>(), {
9  fillColor: 'currentColor',
10});
11
12defineOptions({ inheritAttrs: false });
13</script>
14
15<template>
16  <svg v-bind="$attrs" viewBox="0 0 24 24">
17    <path
18      d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
19      :fill="fillColor"
20      class="star-fill"
21    />
22  </svg>
23</template>

## Advanced Configuration

### Split Colors with Intelligent Attribute Handling

The `splitColors` option extracts individual color properties from SVG elements and intelligently manages fill/stroke attributes:

```typescript
// Input SVG with mixed attributes
const svgContent = `
  <svg viewBox="0 0 24 24">
    <path fill="#FF0000" d="..." />          <!-- Has fill only -->
    <path stroke="#00FF00" d="..." />        <!-- Has stroke only -->
    <path fill="#0000FF" stroke="#FFFF00" /> <!-- Has both -->
    <path d="..." />                         <!-- Has neither -->
  </svg>
`;

// Convert with split colors
const result = await convertToReact(svgContent, {
  name: 'MultiColorIcon',
  splitColors: true,
  typescript: true,
});

// Generated component behavior:
// - Path with fill only: gets stroke="none" (prevents unwanted stroke)
// - Path with stroke only: gets fill="none" (prevents black fill default)
// - Path with both: keeps both as dynamic props
// - Path with neither: remains unchanged (no unnecessary attributes)

// Generated component props:
// - color, color2, color3 (for extracted colors in order)
// - colorClass, color2Class, color3Class (for CSS classes)
// - Colors are automatically converted to hex format
```

**Color Extraction Rules:**
- Colors are extracted from `fill`, `stroke`, and `stop-color` attributes
- All colors are converted to lowercase hex format (e.g., `#ff0000`)
- Empty or invalid color values are ignored
- Duplicate colors are automatically deduplicated
- Colors are assigned as `color`, `color2`, `color3`, etc. in order

**Intelligent Attribute Handling:**
- Elements with `fill` only → adds `stroke="none"`
- Elements with `stroke` only → adds `fill="none"`
- Elements with both `fill` and `stroke` → keeps both as props
- Elements with neither → no attributes added
- Empty attribute values (`fill=""`) are treated as non-existent

Fixed Stroke Width Support

The isFixedStrokeWidth option adds support for non-scaling stroke width:

1const result = await convertToReact(svgContent, {
2  name: 'StrokeIcon',
3  isFixedStrokeWidth: true,
4});
5
6// Generated component includes:
7// - isFixedStrokeWidth prop
8// - vector-effect="non-scaling-stroke" when prop is true

Custom SVGO Configuration

1import { createSvgoConfig, optimizeSvg } from 'svgfusion';
2
3const customConfig = createSvgoConfig({
4  removeViewBox: false,
5  preserveColors: true,
6  preserveClasses: true,
7});
8
9const optimizedSvg = optimizeSvg(svgContent, customConfig);

Batch Processing with SVGFusion Engine

1import { SVGFusion, readSvgDirectory } from 'svgfusion';
2import { writeFileSync } from 'fs';
3import path from 'path';
4
5const engine = new SVGFusion();
6const svgFiles = await readSvgDirectory('./icons', true); // recursive
7
8for (const svgFile of svgFiles) {
9  const svgContent = readFileSync(svgFile, 'utf-8');
10  const result = await engine.convert(svgContent, {
11    framework: 'react',
12    generator: {
13      componentName: path.basename(svgFile, '.svg'),
14      typescript: true,
15    },
16    transformation: {
17      splitColors: true,
18    },
19  });
20
21  writeFileSync(`./components/${result.filename}`, result.code);
22}

Index File Generation

When using the --index flag or generateIndex: true option, SVGFusion creates an optimized index file for tree-shaking:

Named Exports (Default)

1// Auto-generated index file for tree-shaking
2// This file exports all components for optimal bundling
3
4export { default as IconStar } from './IconStar';
5export { default as IconUser } from './IconUser';
6export { default as IconHome } from './IconHome';
7
8// Barrel export for convenience
9export { IconStar, IconUser, IconHome };
10
11// TypeScript component types
12export type IconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
13export type IconComponents = {
14  IconStar: IconComponent;
15  IconUser: IconComponent;
16  IconHome: IconComponent;
17};

Default Exports

1// Auto-generated index file
2// Warning: Default exports are less tree-shakeable
3
4import IconStar from './IconStar';
5import IconUser from './IconUser';
6import IconHome from './IconHome';
7
8export default {
9  IconStar,
10  IconUser,
11  IconHome,
12};
13
14// Individual exports for flexibility
15export { default as IconStar } from './IconStar';
16export { default as IconUser } from './IconUser';
17export { default as IconHome } from './IconHome';

Usage

1// Tree-shakeable named imports (recommended)
2import { IconStar, IconUser } from './components';
3
4// Default import
5import * as Icons from './components';
6const { IconStar, IconUser } = Icons;

Complex Filename Support

SVGFusion handles complex filenames from design systems:

1# Design system metadata
2"Size=xl, Color=Brand, Type=Glass.svg" → GlassBrandXl
3"User Profile Avatar, Type=Solid.svg" → UserProfileAvatarTypeSolid
4
5# Standard patterns
6"icon-star.svg" → IconStar
7"user-profile-avatar.svg" → UserProfileAvatar

Styling Support

CSS Classes

1<path class="primary-color" />
2<circle class="bg-blue-500" /> <!-- Tailwind -->

CSS Variables

1<path fill="var(--primary-color)" />
2<circle fill="currentColor" />

Gradients & Patterns

1<defs>
2  <linearGradient id="gradient">
3    <stop offset="0%" style="stop-color:#ff6b6b" />
4    <stop offset="100%" style="stop-color:#4ecdc4" />
5  </linearGradient>
6</defs>
7<path fill="url(#gradient)" />

Testing

1npm test          # Run tests
2npm run test:coverage # Run with coverage

Development

1npm run dev       # Watch mode
2npm run build     # Build for production
3npm run lint      # Lint code
4npm run format    # Format code

License

MIT © SVGFusion Contributors

Contributing

Contributions are welcome! Please read CONTRIBUTING.md for details.

Changelog

See CHANGELOG.md for details.

Browser Usage (New!)

SVGFusion now supports browser environments! Convert SVG strings to component code without writing files.

Try the Interactive Playground: svgfusion.netlify.app/playground

1import { convertToReact, convertToVue } from 'svgfusion/browser';
2
3const svgContent = `<svg viewBox="0 0 24 24"><path fill="#3B82F6" d="..."/></svg>`;
4
5// Convert to React component string
6const reactResult = await convertToReact(svgContent, {
7  componentName: 'MyIcon',
8  typescript: true,
9  splitColors: true,
10});
11
12console.log(reactResult.code); // Generated React component code
13
14// Convert to Vue component string
15const vueResult = await convertToVue(svgContent, {
16  componentName: 'MyIcon',
17  typescript: true,
18  sfc: true,
19});
20
21console.log(vueResult.code); // Generated Vue component code

Browser Features:

• All conversion features (color splitting, stroke fixing, etc.)
• React and Vue component generation
• TypeScript support
• Batch conversion
• Color extraction and validation
• Index file generation
• Works in all modern browsers
• Interactive Playground with Monaco Editor

Full Browser API Documentation Full Node API Documentation