# SVGR — Transform SVGs into React Components

> A universal tool that transforms raw SVG files into optimized, customizable React components, integrated with Webpack, Vite, Rollup, and the CLI.

## Install

Save in your project root:

# SVGR — Transform SVGs into React Components

## Quick Use
```bash
npx @svgr/cli -- icon.svg
```
```bash
npm install --save-dev @svgr/webpack
# In webpack config:
# { test: /.svg$/, use: ['@svgr/webpack'] }
```
```jsx
import Star from './star.svg';
const App = () => <Star width={24} height={24} fill="currentColor" />;
```

## Introduction
SVGR takes raw SVG markup and converts it into ready-to-use React components. It handles optimization, formatting, and JSX transformation automatically. The tool is included in Create React App by default and integrates with every major bundler.

## What SVGR Does
- Converts SVG files into React functional components with proper JSX
- Optimizes SVG markup using SVGO before transformation
- Supports Webpack, Vite, Rollup, and Next.js through dedicated plugins
- Provides a Node.js API for programmatic transformations
- Generates TypeScript declarations when configured

## Architecture Overview
SVGR processes SVGs through a plugin pipeline. First, SVGO optimizes the raw SVG by removing unnecessary attributes and metadata. Then a JSX transformer converts SVG elements to valid JSX, handling attribute renaming (class to className, etc.). Finally, a template engine wraps the JSX in a React component export. Each step is configurable and replaceable.

## Self-Hosting & Configuration
- CLI usage: `npx @svgr/cli -- file.svg` for one-off conversions
- Webpack: add `@svgr/webpack` as a loader for .svg imports
- Vite: use `vite-plugin-svgr` for Vite-based projects
- Configure via `.svgrrc.json` or the `svgr` key in package.json
- Control SVGO optimizations, TypeScript output, and component templates through config

## Key Features
- Zero-config setup with sensible defaults for most projects
- Custom component templates for full control over the generated code
- Named and default export modes for flexible import patterns
- Built-in SVGO integration for automatic SVG optimization
- Playground at svgr.dev for quick online conversion testing

## Comparison with Similar Tools
- **react-svg** — loads SVGs at runtime via fetch; no build-time transformation
- **vite-plugin-svgr** — Vite wrapper around SVGR; same engine, Vite-specific API
- **svg-inline-react** — inlines SVG strings as dangerouslySetInnerHTML; less safe
- **react-inlinesvg** — runtime SVG loading with caching; adds bundle weight
- **Manual copy-paste** — works for few icons but does not scale or optimize

## FAQ
**Q: How do I use SVGR with Next.js?**
A: Install `@svgr/webpack` and configure next.config.js to use it as a Webpack loader for .svg files.

**Q: Can I generate TypeScript components?**
A: Yes. Set `typescript: true` in your SVGR config to emit .tsx files with proper type annotations.

**Q: Does SVGR work with Vite?**
A: Yes. Use the `vite-plugin-svgr` package, which wraps SVGR as a Vite plugin.

**Q: Can I customize the generated component template?**
A: Yes. Provide a custom template function in your config that receives the JSX AST and returns the component code you want.

## Sources
- https://github.com/gregberge/svgr
- https://react-svgr.com

---
Source: https://tokrepo.com/en/workflows/asset-776a2a68
Author: AI Open Source