DOCSEARCHbyAlgolia
Submit Docs

svgr

repository·main·Indexed 27 days ago

https://github.com/gregberge/svgr

A universal tool to convert raw SVG files into optimized React components. Version 2.0.0 includes a CLI for file and directory conversion, a Node API via @svgr/core, and a suite of Babel plugins and presets for attribute manipulation, React Native support, and AST transformations.

Tokens
23.9K
Snippets
96
Records
179
Agent score
91%

What's inside svgr

  1. Understand what SVGR does

    main

    SVGR is a universal tool that transforms raw SVG files into ready-to-use React components. It automates the process of converting SVG markup into JSX, applying optimizations and transformations to ensure the resulting component is safe and easy to use within a React application.

    <?xml version="1.0" encoding="UTF-8"?>
<svg
  width="48px"
  height="1px"
  viewBox="0 0 48 1"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <title>Rectangle 5</title>
  <desc>Created with Sketch.</desc>
  <defs></defs>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="19-Separator" transform="translate(-129.000000, -156.000000)" fill="#063855">
      <g id="Controls/Settings" transform="translate(80.000000, 0.000000)">
        <g id="Content" transform="translate(0.000000, 64.000000)">
          <g id="Group" transform="translate(24.000000, 56.000000)">
            <g id="Group-2">
              <rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect>
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

    Resulting React Component:

    import * as React from 'react'

const SvgComponent = (props) => (
  <svg width="1em" height="1em" viewBox="0 0 48 1" {...props}>
    <path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
  </svg>
)

export default SvgComponent

  9. Use custom Babel configuration with @svgr/webpack

    main

    By default, @svgr/webpack includes its own optimized babel-loader. To use your own Babel configuration (e.g., for Preact), set the babel: false option in @svgr/webpack and place your custom babel-loader before it in the use array.

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

  11. Use @svgr/rollup with @rollup/plugin-url

    main

    To use both the SVG URL and the React component from the same file, include both @rollup/plugin-url and @svgr/rollup in your plugins array.

    By default, the React component is provided as a named export called ReactComponent. If you want to force the React component to always be a named export (regardless of other plugins), set the exportType option to 'named'.

    import url from '@rollup/plugin-url'
import svgr from '@svgr/rollup'

export default {
  plugins: [url(), svgr({ icon: true })],
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
}

    Usage in code:

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

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