SVG Force Documentation

Last updated: March 2026

Welcome to the official documentation for SVG Force — a powerful tool for converting SVG icons into React, React Native, and other framework components.

1. Introduction

SVG Force is an online service that allows developers to quickly and easily convert SVG files into ready-to-use components for popular frameworks.

1.1 Key Features

  • Convert SVG to React, React Native, Vue, and other frameworks
  • Support for gradients, shadows, animations, and opacity
  • SVG code optimization
  • Customizable export parameters
  • Batch file processing (for premium users)
  • Generation history and SVG library

2. Getting Started

2.1 Registration

To start using SVG Force, you need to create an account:

  1. Go to the service homepage
  2. Click the "Sign Up" button
  3. Enter your email and password
  4. Verify your email address

2.2 Choosing a Pricing Plan

SVG Force offers several pricing plans suitable for both individual developers and teams. Learn more about pricing on the subscription page.

3. Using the Generator

3.1 Uploading SVG Files

There are several ways to upload an SVG file:

  • Drag and drop the file into the workspace
  • Click the "Upload" button and select a file, or a folder with files from your computer

3.2 Configuring Parameters

After uploading a file, you can configure:

  • Framework: React, React Native, Vue, Angular, and others
  • Icon Name: Custom name for the generated icon
  • Component Name: Custom name for the generated component

3.3 Code Generation

After configuring all parameters, click the "Generate" button. The system will automatically process your SVG file and generate ready-to-use component code.

3.4 Exporting Results

The generated component is automatically downloaded to your computer as a .tsx file. We do not store the generated file ourselves.

4. Supported Frameworks

4.1 React

Generate React components with support for hooks, props, and TypeScript. Components are optimized for use in modern React applications.

4.2 React Native

Special generation for React Native using react-native-svg. Support for all major SVG elements and properties.

4.3 Vue

Generate Vue components (Vue 2 and Vue 3) with support for Composition API and TypeScript.

4.4 Angular

Generate Angular components with support for decorators and TypeScript.

4.5 Svelte

Generate Svelte components with support for TypeScript.

5. Advanced Features

5.1 Gradients

SVG Force allows you to add gradients to your SVG images.

5.2 Shadows and Filters

The service supports adding shadows and filters to your SVG images.

5.3 Animations

SVG Force can create animations for colors in your SVG images.

5.4 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 call site, e.g. <Icon name="my-icon" opacity={0.5} />.

Example usage after generation:

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

5.5 Batch Processing

Users can upload and process multiple SVG files simultaneously, significantly speeding up the workflow.

5.6 Team Subscription CLI

SVG Force 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.

  1. Install the CLI globally: npm i -g @svgforce/cli
  2. Sign in to your Team account: svgforce login
  3. Initialize the CLI in the project root: svgforce init — the setup wizard will guide you through the required options
  4. If you selected "Create npm scripts" during init, run conversions with npm run icons from that point on
npm i -g @svgforce/cli
svgforce login
svgforce init
# if "Create npm scripts" was selected during init:
npm run icons

6. Tips and Best Practices

6.1 Optimize SVG Before Upload

For best results, we recommend pre-optimizing your SVG files by removing unnecessary metadata and comments.

6.2 Use Semantic Names

Give your components clear and descriptive names, which will make code maintenance easier.

6.3 Configure Sizes

When converting SVG, make sure the viewBox is configured correctly for proper icon scaling.

7. Troubleshooting

7.1 Gradient Issues

If gradients don't display correctly, make sure your SVG file uses standard SVG gradients (linearGradient or radialGradient).

7.2 Conversion Errors

If errors occur during conversion, try simplifying the SVG file or contact support.

7.3 Animation Problems

Some complex SMIL animations may not be supported. In such cases, we recommend using CSS animations.

8. Support

If you have questions or problems, you can contact our support service:

9. Updates and Changes

This documentation is regularly updated. Follow updates in our Changelog.

To receive information about new features and capabilities, subscribe to our newsletter or visit our blog.