smooth-code/svgr


Transform SVGs into React components 🦁

https://smooth-code.com/open-source/svgr/

License: MIT

Language: JavaScript

Keywords: inline-svg, loader, react, react-native, react-svg, react-svg-creator, react-svg-loader, svg, svg-react, svg-to-react, svg2react, svgo, webpack, webpack-loader


svgr

Transform SVGs into React components 🦁

License Donate npm package npm downloads Build Status Code Coverage Code style Dependencies DevDependencies

Try it out online!

Watch the talk at React Europe

SVGR transforms SVG into ready to use components. It is part of create-react-app and makes SVG integration into your React projects easy.

Docs

See the documentation at smooth-code.com/open-source/svgr for more information about using svgr!

Quicklinks to some of the most-visited pages:

Example

Take an icon.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

Output

import 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:

Gold Sponsors

Gold Sponsors are those who have pledged $100/month and more to SVGR.

gold-sponsors

License

Licensed under the MIT License, Copyright © 2017-present Smooth Code.

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.

Project Statistics

Sourcerank 22
Repository Size 2.69 MB
Stars 4,868
Forks 168
Watchers 41
Open issues 26
Dependencies 3,496
Contributors 42
Tags 41
Created
Last updated
Last pushed

Top Contributors See all

Greg Bergé Aaron Reisman Bogdan Chadkin Marques Kevin Tom Chen Arctic Ice Studio Loic Plaire Sudhir Mitharwal Mickael Dumand Daniel Bayerlein Igor Adrov Rhys van der Waerden Jim Holby Surendra Singhi Evan Sharp Jeremy Stucki Tom Most Edward Paget Lewis Zhang Andrey Zhupik

Packages Referencing this Repo

@deal/parcel-plugin-svgr
SVGR Parcel plugin.
Latest release 1.12.17 - Updated - 4.87K stars
@svgr/babel-plugin-svg-em-dimensions
Transform SVG to use em-based dimensions
Latest release 4.0.0 - Published - 4.87K stars
@svgr/plugin-jsx
Transform SVG into JSX
Latest release 4.3.2 - Updated - 4.87K stars
@svgr/hast-util-to-babel-ast
Transform HAST to Babel AST (JSX)
Latest release 4.3.2 - Updated - 4.87K stars
@svgr/babel-plugin-replace-jsx-attribute-value
Replace JSX attribute value
Latest release 4.0.0 - Published - 4.87K stars
@svgr/babel-plugin-remove-jsx-empty-expression
Remove JSX empty expression
Latest release 4.0.0 - Published - 4.87K stars
@svgr/babel-plugin-add-jsx-attribute
Add JSX attribute
Latest release 4.0.0 - Published - 4.87K stars
@svgr/babel-plugin-remove-jsx-attribute
Remove JSX attribute
Latest release 4.0.3 - Updated - 4.87K stars
@svgr/cli
SVGR command line.
Latest release 4.3.2 - Updated - 4.87K stars
@svgr/parcel-plugin-svgr
SVGR Parcel plugin.
Latest release 4.3.2 - Updated - 4.87K stars
@svgr/babel-preset
SVGR preset that apply transformations from config
Latest release 4.3.1 - Updated - 4.87K stars
@svgr/plugin-prettier
Format code using Prettier
Latest release 4.3.2 - Updated - 4.87K stars
@svgr/babel-plugin-transform-svg-component
Transform SVG into component
Latest release 4.0.1 - Updated - 4.87K stars
@svgr/babel-plugin-svg-dynamic-title
Transform SVG by adding a dynamic title element
Latest release 4.3.1 - Updated - 4.87K stars
@svgr/rollup
SVGR Rollup plugin.
Latest release 4.3.2 - Updated - 4.87K stars
@svgr/babel-plugin-transform-react-native-svg
Transform DOM elements into react-native-svg components
Latest release 4.0.0 - Published - 4.87K stars
@svgr/core
Transform SVG into React Components.
Latest release 4.3.2 - Updated - 4.87K stars
svgr
Convert raw SVG into React components.
Latest release 2.0.0 - Updated - 4.87K stars
@svgr/webpack
SVGR webpack loader.
Latest release 4.3.2 - Updated - 4.87K stars
@svgr/plugin-svgo
Optimize SVG
Latest release 4.3.1 - Updated - 4.87K stars

Recent Tags See all

v4.3.2 July 15, 2019
v4.3.1 July 01, 2019
v4.3.0 May 28, 2019
v4.2.0 April 11, 2019
v4.1.0 November 24, 2018
v4.0.4 November 24, 2018
v4.0.3 November 13, 2018
v4.0.2 November 08, 2018
v4.0.1 November 08, 2018
v4.0.0 November 04, 2018
v3.1.0 October 05, 2018
v3.0.0 October 01, 2018
v2.4.1 September 16, 2018
v2.4.0 September 16, 2018
v2.3.0 September 03, 2018

Something wrong with this page? Make a suggestion

Last synced: 2019-07-15 08:56:40 UTC

Login to resync this repository