svgr/website/pages/docs/webpack.mdx

---
section: Usage
title: Webpack
order: 20
---

# Webpack

SVGR provides an official [webpack.js](https://webpack.js.org/) loader to import SVG as React components.

<carbon-ad />

## Install

```bash
npm install --save-dev @svgr/webpack
# or use yarn
yarn add --dev @svgr/webpack
```

## Usage

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
}
```

**Your code**

```js
import Star from './star.svg'

const Example = () => (
  <div>
    <Star />
  </div>
)
```

## Options

SVGR let you specify options in a runtime config file like `svgr.config.js` or directly in the loader:

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: [{ loader: '@svgr/webpack', options: { icon: true } }],
      },
    ],
  },
}
```

[SVGR options reference](https://react-svgr.com/docs/options/) describes all options available.

## Use SVGR and asset SVG in the same project

You may be interested to use some SVG as an asset (url) and other SVG as a React component. The easiest way to do it is to use a `resourceQuery` for one of the two type.

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        type: 'asset',
        resourceQuery: /url/, // *.svg?react
      },
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
}
```

**Your code**

```js
import svg from './assets/file.svg?url'
import Svg from './assets/file.svg'

const App = () => {
  return (
    <div>
      <img src={svg} width="200" height="200" />
      <Svg width="200" height="200" viewBox="0 0 3500 3500" />
    </div>
  )
}
```

## Use SVG in CSS files

The `issuer: /\.[jt]sx?$/` option ensures that SVGR will only apply if the SVG is imported from a JavaScript or a TypeScript file. It allows you to safely import SVG into your `.css` or `.scss` without any issue.

```css
.example {
  background-image: url(./assets/file.svg);
}
```

## Use with `url-loader` or `file-loader`

> `url-loader` and `file-loader` are deprecated over [Asset Modules](https://webpack.js.org/guides/asset-modules/) in webpack v5. It is widely encouraged to use `resourceQuery` method described before.

SVGR can be used with [`url-loader`](https://github.com/webpack-contrib/url-loader) or [`file-loader`](https://github.com/webpack-contrib/file-loader).

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack', 'url-loader'],
      },
    ],
  },
}
```

**Your code**

```js
import starUrl, { ReactComponent as Star } from './star.svg'

const App = () => (
  <div>
    <img src={starUrl} alt="star" />
    <Star />
  </div>
)
```

The named export defaults to `ReactComponent` and can be customized with the `namedExport` option.

Please note that by default, `@svgr/webpack` will try to export the React Component via default export if there is no other loader handling svg files with default export. When there is already any other loader using default export for svg files, `@svgr/webpack` will always export the React component via named export.

If you prefer named export in any case, you may set the `exportType` option to `named`.

## Use your own Babel configuration

By default, `@svgr/webpack` includes a `babel-loader` with [an optimized configuration](https://github.com/gregberge/svgr/blob/main/packages/webpack/src/index.ts). In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying `babel: false` in options.

```js
// Example using preact
{
  test: /\.svg$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets: ['preact', 'env'],
      },
    },
    {
      loader: '@svgr/webpack',
      options: { babel: false },
    }
  ],
}
```