SVG Force Guides

Last updated: March 2026

Useful tutorials and step-by-step instructions for working effectively with SVG Force.

New Entries (March 2026)

New guide: icon transparency control with opacity
New guide: Team subscription CLI workflow

1. Quick Start: Your First Conversion

This guide will help you perform your first SVG to component conversion in just 5 minutes.

Step 1: Prepare Your SVG File

Make sure your SVG file:

Has a valid XML structure
Contains a viewBox attribute for proper scaling
Doesn't contain unnecessary metadata or comments (optional)

Step 2: Upload the File

Open the generator
Drag and drop your SVG file into the workspace or click "Upload"
Wait for the file to upload

Step 3: Choose Settings

Select framework (React, Vue, Angular, etc.)
Set icon name
Set component name

Step 4: Generate and Export

Click the "Generate" button
Review the generated code
Copy the code or use the downloaded file as a component

2. SVG Force and Gradients

SVG Force correctly processes SVG files with linear and radial gradients and preserves their structure in generated components.

2.1 What SVG Force Handles Automatically

Preserves the <defs> block and all gradient elements
Supports both linearGradient and radialGradient on conversion
Converts stops, offsets, and opacity to JSX/TSX format
Keeps gradient fills via fill="url(#id)" references
Lets you customize gradient colors through component props

2.2 Gradient Setup in a Generated Component

The example below shows how to use a generated component and configure gradient props:

React TSX

<Icon
  name="heart"
  size={48}
  variant="gradient"
  gradientDirection="horizontal"
  colorFirst="#3B82F6"
  colorSecond="#9911ac"
/>

3. Automatic SVG Optimization in SVG Force

SVG Force automatically optimizes SVG files during processing, so manual pre-optimization is no longer required.

3.1 What SVG Force Optimizes Automatically

Removes editor metadata (Adobe Illustrator, Sketch, etc.)
Cleans XML comments and other non-essential markup
Eliminates unused definitions and redundant wrappers
Reduces unnecessary groups, attributes, and transformations
Prepares SVG markup for reliable component conversion

3.2 Is Manual Optimization Still Needed?

In most cases, no. Upload your SVG to SVG Force and the service applies the required optimization automatically without extra tools.

3.3 Optimization Example

Before optimization:

SVG

<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g id="Layer_1">
    <path d="M10,10 L20,20" fill="none" stroke="black"/>
  </g>
</svg>

After optimization:

SVG

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M10,10 L20,20" fill="none" stroke="#000"/>
</svg>

4. Working with Animations

SVG Force allows adding color animations for SVG images in generated components.

4.1 Color Animation in SVG Force

For gradient icons, you can enable color animation and configure cycle duration, gradient direction, and color sequence.

4.2 Animation Setup Example

The example below shows color animation props in use:

React TSX

<Icon
  name="logo"
  size={24}
  variant="gradient"
  gradientDirection="vertical"
  colorFirst="#3B82F6"
  colorSecond="#9911ac"
  animate={true}
  animationDuration={15}
  animationColors={['#3B82F6', '#9911ac', '#3B82F6', '#9911ac']}
/>

4.3 What You Can Configure

animate — enables/disables color animation
animationDuration — sets cycle duration in seconds
animationColors — defines the transition color sequence

4.4 Tip

For smoother animation, use 3-5 colors inanimationColors and repeat the first color at the end of the array.

5. Customizing Colors via Props

One of the most useful patterns is the ability to change icon colors through component props.

5.1 React Example

React TSX

interface IconProps {
  color?: string;
  size?: number;
}

export const Icon: React.FC<IconProps> = ({
  color = "currentColor",
  size = 24
}) => {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24">
      <path fill={color} d="M12,2 L22,12 L12,22 L2,12 Z" />
    </svg>
  );
};

5.2 Usage

React TSX

<Icon color="#f63bf2" size={32} />
<Icon color="blue" size={16} />
<Icon /> {/* uses default values */}

5.3 Transparency via opacity prop

Every generated component automatically includes an opacity prop. By default the icon is fully opaque (value 1). Transparency is applied only when an explicit value is passed at the point of use.

React TSX

{/* Fully visible */}
<Icon name="my-icon" size={32} />

{/* Semi-transparent */}
<Icon name="my-icon" size={32} opacity={0.5} />

{/* Almost invisible */}
<Icon name="my-icon" size={32} opacity={0.1} />

5.4 Practical Guide: Opacity in UI States

Recommended opacity ranges for common product scenarios:

1 — primary icons in default state
0.7-0.85 — secondary icons and hints
0.45-0.6 — disabled controls
0.2-0.35 — decorative/background SVG assets

React TSX

<Icon name="search" opacity={1} />
<Icon name="info" opacity={0.8} />
<Icon name="lock" opacity={0.5} />
<Icon name="pattern" opacity={0.25} />

5.5 Practical Guide: Team Subscription CLI

The CLI lets you initialize a project and run SVG conversion from the terminal. Recommended runtime: Node.js v20.19.4 with npm v10.8.2.

Install the CLI globally
Sign in to your Team account with svgforce login
Run svgforce init in the project root and follow the setup wizard
If you selected "Create npm scripts" during init, trigger conversions with npm run icons from that point on

Bash

npm i -g @svgforce/cli
svgforce login
svgforce init
# if "Create npm scripts" was selected during init:
npm run icons

6. Batch File Processing

6.1 Preparing Files

Organize SVG files in one folder
Give files meaningful names (they will be used to access each image via props)
Make sure all files have the same format

6.2 Batch Processing Flow

Select multiple files or a folder
Configure common settings for all files
Start batch conversion
Download results as a ZIP archive

6.3 Tips

Use the same viewBox settings for all icons
Follow a consistent naming convention
Group similar icons together

7. Integration with Design Systems

SVG Force returns a single universal index.tsx file with all SVG components, so there is no need to import each image separately.

7.1 How It Works

All generated icons are combined in one file
You access a specific image through props
Only one import from index.tsx is required for integration

7.2 Universal index.tsx Example

React TSX

type IconName = 'arrow-left' | 'arrow-right' | 'check' | 'close';

const ICONS = {
  'arrow-left': ArrowLeftSvg,
  'arrow-right': ArrowRightSvg,
  check: CheckSvg,
  close: CloseSvg,
};

export const Icon = ({ name, ...props }) => {
  const SvgComponent = ICONS[name as IconName];
  return <SvgComponent {...props} />;
};

7.3 Usage

React TSX

import { Icon } from './index';

<Icon name="arrow-left" size={24} />
<Icon name="check" size={20} color="#22c55e" />

8. Working with React Native

React Native requires special processing of SVG files through the react-native-svg library.

8.1 Installing Dependencies

Bash

npm install react-native-svg

8.2 Conversion Features

SVG Force automatically imports components from react-native-svg
All SVG elements are converted to corresponding RN components
Gradient support via LinearGradient and RadialGradient
Transformations are converted to RN format

8.3 Example Generated Component

React Native TSX

import React from 'react';
import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg';

export const Icon = ({ size = 24, color = '#000' }) => {
  return (
    <Svg width={size} height={size} viewBox="0 0 24 24">
      <Defs>
        <LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
          <Stop offset="0" stopColor="#f63bf2" />
          <Stop offset="1" stopColor="#bacf6e" />
        </LinearGradient>
      </Defs>
      <Path fill="url(#grad)" d="M12,2 L22,12 L12,22 L2,12 Z" />
    </Svg>
  );
};

9. Troubleshooting Common Issues

9.1 Icon Not Displaying

Possible causes:

Missing viewBox attribute
Incorrect dimensions (width/height = 0)
Icon color matches background

Solutions:

Add viewBox to SVG
Set explicit dimensions
Change fill or stroke color

9.2 Gradient Not Working

Possible causes:

Gradient ID is not unique
Gradient defined outside <defs>
Incorrect gradient reference

Solutions:

Use unique IDs
Place gradient in <defs>
Check url(#gradientId) syntax

9.3 Animation Not Playing

Possible causes:

SMIL animations not supported by browser
Conflict with CSS styles
Incorrect transformation

Solutions:

Use CSS or JS animations
Check CSS specificity
Use SVG Force for automatic conversion

10. Performance and Optimization

10.1 Reducing Component Size

SVG Force automatically reduces generated component size by removing unnecessary attributes, optimizing SVG structure, and preparing clean code for production use.

10.2 Lazy Loading Icons

SVG Force returns a universal index.tsx with all icons, optimized for fast integration. In most cases, extra manual lazy loading setup is not required.

10.3 Caching Components

SVG Force generates stable and clean component code that works well with app-level caching strategies. Manual memoization for every icon is usually unnecessary.

11. Additional Resources

Have questions or suggestions about the guides? Contact us at [email protected]