Skip to content

gregberge/svgr

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
April 16, 2023 15:20
api
April 16, 2023 15:20
April 16, 2023 15:20
August 15, 2023 08:46
September 16, 2021 23:40
October 27, 2022 23:39
September 2, 2017 10:11
August 15, 2023 08:46
December 20, 2017 17:25
January 30, 2022 11:45
August 15, 2023 08:46
March 24, 2023 10:16

svgr

Transform SVGs into React components 🦁

License Donate npm package npm downloads CI Code Coverage

Try it out online!

Watch the talk at React Europe

SVGR is an universal tool to transform SVG into React components.

SVGR takes a raw SVG and transforms it into a ready-to-use React component.

Docs

See the documentation at react-svgr.com for more information about using svgr!

Quicklinks to some of the most-visited pages:

Example

Take a SVG:

<?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"
>
  <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
  <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>

Run SVGR

npx @svgr/cli --icon --replace-attr-values "#063855=currentColor" -- icon.svg

Get an optimized 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

Supporting SVGR

SVGR is a MIT-licensed open source project. It's an independent project with ongoing development made possible thanks to the support of these awesome backers. If you'd like to join them, please consider:

Learn more about supporting SVGR.

Contributing

Check out the contributing guidelines

License

Licensed under the MIT License, Copyright © 2017-present Greg Bergé.

See LICENSE for more information.

Acknowledgements

This project has been popularized by Christopher Chedeau and it has been included in create-react-app thanks to Dan Abramov. We would like to thanks Sven Sauleau for his help and its intuition.