svgr README

The project's README from github.com/gregberge/svgr. As one markdown file: README.md.

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.

svgr (gregberge/svgr)

Searching Database…

11.1K ·GitHub
Svgr
What is this?SVGR is a universal tool that turns SVG files into ready-to-use React components: feed it a raw SVG and you get a component you can drop straight into a React project.
Is it a command-line tool, a Webpack loader, or a library?All three: SVGR ships a CLI for converting files, a Webpack loader so SVGs can be imported straight into your build, and a Node.js API for scripted transformations.
How do I get started with it?The full documentation is at react-svgr.com — start with the Getting started page, and there are dedicated usage guides for whichever integration you pick.
What do I need on my machine to run it?A Node.js environment: SVGR runs from the command line, inside your Webpack build, or programmatically through its Node.js API.
Does it just wrap my SVG in a component, or optimize it too?It optimizes: the README example takes a raw SVG and outputs an optimized React component, and SVGO is part of the project's toolchain.
Does it generate web React components only, or React Native too?React Native is covered as well — the repo lists react-native among its core topics, so it targets RN projects alongside web React.
How battle-tested is SVGR?Very: it was popularized by Christopher Chedeau and included in create-react-app, it has around 11k GitHub stars, and it remains an independently developed MIT project backed by sponsors.
Can I try it before installing anything?Yes — the README links an online playground at react-svgr.com where you paste an SVG and get the React component code back instantly.
What are similar projects?svgo, mitosis, tamagui, razzle, angular-cli, oxc, blobatar, styled-components
Which topics is it in?jsx, webpack, react-native, svg, monorepo, web-development, command-line-tool, react, npm, frontend, tool, nodejs
Creator
gregberge
Size
15.7 MB
Stars
11.1K
Updated
CommitOct 05Releasev8.1.0Aug 15
Age
9y
Commits · 90 Days