Transform SVGs into React components 🦁

Overview

svgr

Transform SVGs into React components 🦁

License Donate npm package npm downloads Build Status Code Coverage Code style Dependencies DevDependencies Gitpod Ready-to-Code

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 react-svgr.com 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 * 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:

Gold Sponsors

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

gold-sponsors

Contributing

Check out the contributing guidelines

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.

Comments
  • Try to test component with React generated form svgr

    Try to test component with React generated form svgr

    Hi, I have a little problem with Jest tests runner.

    My simple component:

    import React from 'react';
    
    import {ReactComponent as CloseIcon} from '../images/close.svg';
    
    const CloseBubble = ({minimize}) => (
        <div className='thulium-chat-bubble'>
            <a onClick={event => {
                event.preventDefault();
                minimize()
            }} href=''>
                <CloseIcon/>
            </a>
        </div>
    );
    
    export default CloseBubble;
    

    test class:

    import CloseBubble from '../CloseBubble';
    
    describe('CloseBubble', () => {
        test('sample', () => {
            expect(1).toBe(1);
        });
    });
    

    And after I run this test I got following error:

      ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:#231f20;}</style></defs><title>cancel_icon</title><path class="cls-1" d="M52.08,50,70.32,31.84a1.49,1.49,0,0,0-2.11-2.11L50,47.87,31.82,29.63a1.8,1.8,0,0,0-2.22,0,1.82,1.82,0,0,0,0,2.21L47.85,50.09,29.6,68.23a1.47,1.47,0,0,0,0,2.12,1.74,1.74,0,0,0,2.22,0L50.06,52.1,68.31,70.35a1.73,1.73,0,0,0,2.21,0,1.46,1.46,0,0,0,0-2.12Z"/></svg>
                                                                                                 ^
        
        SyntaxError: Unexpected token <
    
           9 |             minimize()
          10 |         }} href=''>
        > 11 |             <CloseIcon/>
          12 |         </a>
          13 |     </div>
          14 | );
          
          at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
          at Object.<anonymous> (src/components/CloseBubble.js:11:14)
    

    What I've do wrong?

    discussion πŸ—£ 
    opened by piotrooo 43
  • Using svgr with webpack 5

    Using svgr with webpack 5

    Hi! I am using two kinds of imports in my application, like: import starUrl from './star.svg' and import { ReactComponent as Star } from './star.svg' This works well if using file-loader. But in webpack 5 the file-loader, raw-loader, raw-loader is deprecated. Now we need to use asset-modules (https://webpack.js.org/guides/asset-modules/). I tried to use all kinds, but nothing worked for me.

    question ❓ 
    opened by vyachsed 26
  • Is there a way to pass custom config/plugins to svgo?

    Is there a way to pass custom config/plugins to svgo?

    Judging from the readme, you can only enable/disable svgo and some of its plugin, but I wanted to use some other svgo plugins.

    Does the svgo parameter in node work also as a config object? It's not clear in the readme.

    The svgo plugins I wanted to use are removeStyleElement, convertColors: { currentColor: true }, or the inlineStyles plugin.

    opened by marcofugaro 24
  • Bugs in the React Native rendering

    Bugs in the React Native rendering

    Thanks for the great library! I have created an SVG transformer for React Native.

    It's currently using react-native-svg-loader to transform SVG images to a format that React Native can understand.

    I am currently trying to switch to use SVGR instead, because the output is cleaner, the code of the library is easier to understand and the project is maintained.

    This is my the setup that I'm using:

    "@svgr/core": "^4.0.3",
    "@svgr/webpack": "^4.0.0",
    "react-native-svg": "^8.0.8",
    
    const svgr = require("@svgr/core").default;
    svgr(src, { native: true })
    

    πŸ› Bug Report

    1) Bug when rendering this file: ember.svg

    When I switch to use svgr to render the images inside the transformer file, React Native throws an error during the transform:

    SyntaxError: /Users/kristerkari/Git/SVGDemo/logos/ember.svg: 
    Namespace tags are not supported by default. 
    React's JSX doesn't support namespace tags. 
    You can turn on the 'throwIfNamespace' flag to bypass this warning.
    

    This happens because of the xmlns:svg="http://www.w3.org/2000/svg" attribute on the ember.svg image. If I remove that attribute, then the error is not thrown. The svg->svgr transform should probably take of that.

    2) Bug when rendering this file: ember.svg

    The ember.svg image is using <use xlink:href="#D_3_" overflow="visible" /> which throws an error during runtime:

    TypeError: undefined is not an object (evaluating 'href.match')
    
    This error is located at:
        in Use (at ember.svg:4)
        in RNSVGClipPath (at ClipPath.js:11)
        in ClipPath (at ember.svg:4)
        in RNSVGGroup (at G.js:23)
        in G (at ember.svg:4)
        in RNSVGGroup (at G.js:23)
        in G (at Svg.js:109)
        in RNSVGSvgView (at Svg.js:90)
        in Svg (at ember.svg:4)
        in SvgComponent (at App.js:37)
        in RCTScrollContentView (at ScrollView.js:852)
        in RCTScrollView (at ScrollView.js:977)
        in ScrollView (at App.js:29)
        in RCTSafeAreaView (at SafeAreaView.ios.js:35)
        in SafeAreaView (at App.js:28)
        in App (at renderApplication.js:34)
        in RCTView (at View.js:44)
        in RCTView (at View.js:44)
        in AppContainer (at renderApplication.js:33)
    

    If change the element to be <use href="#D_1_" overflow="visible" />, the image will render.

    Note: SVG 2 removed the need for the xlink namespace, so instead of xlink:href you should use href.

    • https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

    3) Inconsistent rendering when width and height props are omitted between @svgr/core + React Native and @svgr/webpack.

    Actual:

    When I have this code <RubyMine width={256} height={256} style={styles.logo} /> the image renders the same way in the browser (using @svgr/webpack) and in React Native with @svgr/core.

    However, if I remove the width and height props, then it still displays the same way in browser but is not rendered at all in React Native.

    Expected:

    The SVG image should render in React Native without width and height props on the React element, and using the width and height of the image.

    Link to repl or repo (highly encouraged)

    App that I use for testing: https://github.com/kristerkari/react-native-svg-example Images that I want to render: https://github.com/kristerkari/react-native-svg-example/tree/master/logos

    Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard

    Paste the results here:

    ## System:
     - OS: macOS High Sierra 10.13.6
     - CPU: x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
     - Memory: 675.03 MB / 16.00 GB
     - Shell: 2.7.1 - /usr/local/bin/fish
    ## Binaries:
     - Node: 8.11.4 - /usr/local/bin/node
     - Yarn: 1.12.1 - /usr/local/bin/yarn
     - npm: 6.4.0 - /usr/local/bin/npm
     - Watchman: 4.9.0 - /usr/local/bin/watchman
    ## npmPackages:
     - @svgr/core: ^4.0.3 => 4.0.3 
     - @svgr/webpack: ^4.0.0 => 4.0.0 
    

    @neoziro

    bug πŸ› 
    opened by kristerkari 23
  • Question: Custom TS Wrapper Template

    Question: Custom TS Wrapper Template

    πŸ’¬ Questions and Help

    How can I create a typescript template that uses a wrapper element?

    This is what I'm trying:

    module.exports = {
      template({ template }, opts, { imports, componentName, props, jsx, exports }) {
        const typeScriptTpl = template.smart({ plugins: ['typescript'] });
        return typeScriptTpl.ast`
        import * as React from 'react';
    
        import { IconWrapper } from './IconWrapper';
        import { workers } from 'cluster';
    
        export const Icon = (props: React.SVGProps<SVGSVGElement>) => ${jsx};
    
        const ${componentName} = (props: React.SVGProps<SVGSVGElement>) => (
          <IconWrapper>
            <Icon {...props} />
          </IconWrapper>
        );
    
        export default ${componentName};
      `;
      },
    };
    

    But I'm failing misserably, getting a ton of Unexpected token, expected "</>", I'm honestly not sure how the ast workers.

    Bonus question: How can I modify componentName? It's prepending SVG and I want to remove it. Thanks everyone!

    help wanted πŸ†˜ question ❓ 
    opened by donifer 19
  • @svgr/rollup not working, possibly due to TypeScript

    @svgr/rollup not working, possibly due to TypeScript

    Heya, I'm trying to bundle some .svg, but get an error during build with rollup. Other plugins I'm using are rollup-plugin-typescript2 and rollup-plugin-postcss. Using rollup v0.58.2. The build works until I add svgr. Is this plugin incompatible with TypeScript?

    [!] (rpt2 plugin) Error: Unknown object type "asyncfunction"
    src/index.ts
    Error: Unknown object type "asyncfunction"
        at Object._object (/Users/.../node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:218:17)
        at Object._function (/Users/.../node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:319:14)
        at Object.dispatch (/Users/.../node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:185:30)
        at /Users/.../node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:246:18
        at Array.forEach (<anonymous>)
        at Object._object (/Users/.../node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:242:21)
        at Object.dispatch (/Users/.../node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:185:30)
        at /Users/.../node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:260:23
        at Array.forEach (<anonymous>)
        at Object._array (/Users/.../node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:259:20)
    
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] build: `rm -rf dist && rollup -c`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the [email protected] build script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /Users/.../.npm/_logs/2018-06-19T22_15_44_193Z-debug.log
    
    opened by killtheliterate 19
  • [v6.0.0] TypeError: this.getOptions is not a function

    [v6.0.0] TypeError: this.getOptions is not a function

    πŸ› Bug Report

    Last release v6.0.0 provoked the following issue : TypeError: this.getOptions is not a function

    Which is referring to the following call:

    https://github.com/gregberge/svgr/blob/81369db030cf9498c4438a9273816f3dd5a673f6/packages/webpack/src/index.ts#L58-L71

    To Reproduce

    Steps to reproduce the behavior:

    • Compile any React 17 web project

    Expected behavior

    The compilation process fails and throws an exception :

    Failed to compile. TypeError: this.getOptions is not a function

    This unexpected behavior appeared right after upgrading to v6.0.0, it is most likely related to an incompatibility issue with the 3.0.0+ version of loader-utils which brought the following breaking change :

    removed getOptions in favor loaderContext.getOptions (loaderContext is this inside loader function), 
    note - special query parameters like ?something=true is not supported anymore, 
    if you need this please do it on loader side, but we strongly recommend avoid it, as alternative you can use ?something=1 and handle 1 as true
    
    bug πŸ› 
    opened by korbav 18
  • TypeError: Cannot read property 'tagName' of null

    TypeError: Cannot read property 'tagName' of null

    I created React app by using npx create-react-app i then run npm run eject to add @svgr/webpack follow the docs i changed webpack.config.js file to

    {
       test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
         use: [{
             loader: '@svgr/webpack',
               options: {
                  limit: imageInlineSizeLimit,
                  name: 'static/media/[name].[hash:8].[ext]',
                 }
              },
         {
              loader: 'url-loader'
         }]
    },
    

    NotFoundPage component

    import React from 'react';
    import { ReactComponent as NotFound } from '../assets/images/404.svg';
    /** @jsx jsx */ import { jsx, css } from '@emotion/core';
    
    export default function PageNotFound() {
        return <div css={{
              width: '100vw',
              height: '100vh',
              overflow: 'auto',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
         }}>
             <NotFound/>;
        </div>
    }
    

    It was working perfectly at the time. Day after I back run the project again and the error is shown in the command

    ./src/assets/images/404.svg (./node_modules/@svgr/webpack/lib?-svgo,+titleProp,+ref!./src/assets/images/404.svg) TypeError: Cannot read property 'tagName' of null

    Have anyone had encountered this problem? and how to fix it? Thanks in advance!

    bug πŸ› wontfix 
    opened by nos-nart 18
  • How to preserve comments in a template (using @svgr/core)?

    How to preserve comments in a template (using @svgr/core)?

    Hey there,

    I wonder if there's a way to preserve the comments that are being stripped out of my template (I think by Babel, but not entirely sure).

    I use flow, and the // flow comment at the beginning of the file is mandatory to have flow validations in the file.

    Thanks a bunch!

    question ❓ 
    opened by dmatteo 18
  • Replace rehype with svg-parser

    Replace rehype with svg-parser

    Context:

    Screenshot 2019-07-05 at 14 36 10

    https://npm.anvaka.com/#/view/2d/rehype https://packagephobia.now.sh/result?p=rehype https://packagephobia.now.sh/result?p=svg-parser https://npm.anvaka.com/#/view/2d/svg-parser

    Did not notice any changes in speed. Though startup time is probably better.

    opened by TrySound 17
  • Not compatible with `parcel` package (only `parcel-bundler`)

    Not compatible with `parcel` package (only `parcel-bundler`)

    πŸ› Bug Report

    parcel is the new official name of the package, as the readme shows: https://github.com/parcel-bundler/parcel

    ⚠️  Parser "@svgr/parcel-plugin-svgr/lib/asset.js" failed to initialize when processing asset "node_modules/@primer/octicons/build/svg/reply.svg". Threw the following error:
    Error: Cannot find module 'parcel-bundler'
    Require stack:
    - ./refined-github/node_modules/@svgr/parcel-plugin-svgr/lib/asset.js
    - ./refined-github/node_modules/parcel/src/Parser.js
    - ./refined-github/node_modules/parcel/src/Pipeline.js
    - ./refined-github/node_modules/parcel/src/worker.js
    - ./refined-github/node_modules/@parcel/workers/src/child.js
        at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
        at Function.Module._load (internal/modules/cjs/loader.js:686:27)
        at Module.require (internal/modules/cjs/loader.js:848:19)
        at require (./refined-github/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
        at Object.<anonymous> (./refined-github/node_modules/@svgr/parcel-plugin-svgr/lib/asset.js:3:22)
        at Module._compile (./refined-github/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
        at Module.load (internal/modules/cjs/loader.js:811:32)
        at Function.Module._load (internal/modules/cjs/loader.js:723:14)
        at Module.require (internal/modules/cjs/loader.js:848:19) falling back to RawAsset
    

    To Reproduce

    npm i parcel @svgr/parcel-plugin-svgr
    parcel build
    

    Try on any repo. Remove parcel-bundler and install parcel

    bug πŸ› good first issue πŸ€™ 
    opened by fregante 16
  • Fix: bump `svgo` to v3.0.1

    Fix: bump `svgo` to v3.0.1

    Summary

    Upgrades svgo to v3.0.1 and updates snapshots.

    Fixes:

    • #765

    Related:

    • https://github.com/svg/svgo/pull/1681

    Test plan

    Run:

    npm i
    npm run test
    
    opened by AndresPuglia98 1
  • react-svgr.com breaking on production

    react-svgr.com breaking on production

    πŸ› Bug Report

    https://react-svgr.com/ is not loading

    To Reproduce

    • Visit https://react-svgr.com/ image

    https://user-images.githubusercontent.com/45557594/202135704-88c20a76-13fd-497a-aeb1-544ec0e03770.mov

    Expected behavior

    Website should load correctly

    Link to repl or repo (highly encouraged)

    Not applicable

    Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard

    Paste the results here:

    
    
    opened by OmkarK45 2
  • Links on https://react-svgr.com/docs/migrate page broken (Get Ready for ESM, Edit this Page)

    Links on https://react-svgr.com/docs/migrate page broken (Get Ready for ESM, Edit this Page)

    On https://react-svgr.com/docs/migrate, there are several links that are broken:

    Clicking on Get Ready for ESM opens a new page to https://blog.sindresorhus.com/get-ready-for-esm-aa53530b3f77, but that server does not exist.

    Clicking on Edit this Page on Github goes to https://github.com/gregberge/svgredit/main/website/pages/docs/migrate.mdx, which does not exist.

    docs πŸ“ 
    opened by mikeaustin 3
  • Empty lines between imports and component are removed instead of collapsed

    Empty lines between imports and component are removed instead of collapsed

    πŸ› Bug Report

    After upgrading from v5 to v6 the template no longer keeps an empty line between the imports and component.

    To Reproduce

    Steps to reproduce the behavior:

    I am using the following template:

    const tsTemplate = (
      { componentName, imports, interfaces, jsx, props },
      { tpl }
    ) => tpl`
      import React, { ReactElement, SVGProps } from 'react';
      
      ${interfaces};
      
      export const ${componentName} = (${props}: SVGProps<SVGSVGElement>): ReactElement => (
        ${jsx}
      );
    `;
    

    And the following plugins:

    plugins: [
                '@svgr/plugin-jsx'
              ],
    

    Everything seems to work fine except that the empty lines in the template are removed instead of collapsed.

    Expected behavior

    Empty line between the imports and the component as shown below.

    import React, { ReactElement, SVGProps } from 'react';
    
    export const SomeIcon = (props: SVGProps<SVGSVGElement>): ReactElement => (
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
        <path
          d="blablabla"
          fill="currentColor"
          fillRule="evenodd"
        />
      </svg>
    );
    

    Link to repl or repo (highly encouraged)

    Clone this repo and follow the instructions in the README.

    Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard

    Paste the results here:

    ## System:
     - OS: macOS 11.6.7
     - CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
     - Memory: 25.55 MB / 16.00 GB
     - Shell: 5.8 - /bin/zsh
    ## Binaries:
     - Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
     - Yarn: 1.22.19 - ~/.yarn/bin/yarn
     - npm: 7.24.2 - ~/some/path
    ## npmPackages:
     - @svgr/core: ^6.3.1 => 6.3.1 
     - @svgr/webpack: ^6.3.1 => 6.3.1 
    
    opened by bensampaio 4
  • babel-plugin-add-jsx-attribute: Property name expected type of string but got undefined

    babel-plugin-add-jsx-attribute: Property name expected type of string but got undefined

    πŸ› Bug Report

    Before adding and using the the babel-plugin-add-jsx-attribute, everything built correctly, but when I try implementing this plugin I get the following error.

    .../node_modules/@svgr/cli/dist/index.js:373
        throw error;
        ^
    
    TypeError: /Users/e6ss3/Sites/balance/packages/balance-icons/assets/AlertCircle.svg: Property name expected type of string but got undefined
        at Object.validate (.../node_modules/@babel/core/node_modules/@babel/types/lib/definitions/utils.js:159:13)
        at validateField (.../node_modules/@babel/core/node_modules/@babel/types/lib/validators/validate.js:24:9)
        at validate (.../node_modules/@babel/core/node_modules/@babel/types/lib/validators/validate.js:17:3)
        at validateNode (.../node_modules/@babel/core/node_modules/@babel/types/lib/builders/validateNode.js:16:27)
        at Object.jsxIdentifier (.../node_modules/@babel/core/node_modules/@babel/types/lib/builders/generated/index.js:1535:36)
        at getAttribute (.../node_modules/@svgr/babel-plugin-add-jsx-attribute/dist/index.js:32:47)
        at .../node_modules/@svgr/babel-plugin-add-jsx-attribute/dist/index.js:49:32
        at Array.forEach (<anonymous>)
        at PluginPass.JSXOpeningElement (.../node_modules/@svgr/babel-plugin-add-jsx-attribute/dist/index.js:41:25)
        at newFn (.../node_modules/@babel/core/node_modules/@babel/traverse/lib/visitors.js:181:21) {
      code: 'BABEL_TRANSFORM_ERROR'
    }
    error Command failed with exit code 1.
    

    webpack.config.js

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

    .svgrrc.js

    module.exports = {
      icon: true,
      ref: true,
      replaceAttrValues: {
        '#111': 'currentColor',
      },
      jsx: {
        babelConfig: {
          plugins: [
            [
              '@svgr/babel-plugin-add-jsx-attribute',
              {
                elements: ['svg'],
                attributes: [
                  {
                    'aria-hidden': true,
                  },
                ],
              },
            ],
          ],
        },
      },
    };
    

    To Reproduce

    Run svgr -d src assets.

    Expected behavior

    SVG components build without error with the aria-hidden attribute added to the SVG element.

    Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard

    Paste the results here:

    ## System:
    - OS: macOS 12.5.1
    - CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    - Memory: 76.76 MB / 16.00 GB
    - Shell: 5.8.1 - /bin/zsh
    ## Binaries:
    - Node: 14.17.4 - ~/.nvm/versions/node/v14.17.4/bin/node
    - Yarn: 1.22.19 - ~/.yarn/bin/yarn
    - npm: 6.14.14 - ~/.nvm/versions/node/v14.17.4/bin/npm
    
    opened by mikeriley131 0
Releases(v6.5.1)
Owner
Greg BergΓ©
❀️ React & JavaScript β€” Teacher, speaker. My open source projects are trusted by thousand developers around the world.
Greg BergΓ©
A React utility belt for function components and higher-order components.

A Note from the Author (acdlite, Oct 25 2018): Hi! I created Recompose about three years ago. About a year after that, I joined the React team. Today,

Andrew Clark 14.8k Nov 17, 2022
Nextjs-components: A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation Blog post from 01/09/2022 Todo's Unit tes

null 93 Nov 25, 2022
πŸ₯ A very simple way to transform antd table to xlsx

antd-table-2-xlsx antd-table-2-xlsx A very simple way to transform antd table to xlsx . Get Start! Install pnpm add @sudongyuer/antd-table-2-xlsx Usa

Frozen FIsh 18 Aug 15, 2022
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list Examples available here: http://claude

ClaudΓ©ric Demers 10.3k Nov 28, 2022
React components and hooks for creating VR/AR applications with @react-three/fiber

@react-three/xr React components and hooks for creating VR/AR applications with @react-three/fiber npm install @react-three/xr These demos are real,

Poimandres 1.4k Nov 22, 2022
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and s

Victor Dantas 9 Jun 30, 2022
we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

고슀락 6 Aug 12, 2022
Providing accessible components with Web Components & Material You

tiny-material Still on developing, DO NOT use for production environment Run well on Google Chrome, Firefox, Chrome for Android, Microsoft Edge (Chrom

HugePancake 12 Oct 5, 2022
Tina is an open source editor that brings visual editing into React websites. Tina empowers developers to give their teams a contextual and intuitive editing experience without sacrificing code quality.

Tina is an open-source toolkit for building content management directly into your website. Community Forum Getting Started Checkout the tutorial to ge

Tina 8.1k Nov 26, 2022
πŸŒ€ Insert Awesome Shapes into Your React Site with Ease

React Awesome Shapes ?? Insert Awesome Shapes into Your React Site with Ease. Loved the project? Please consider donating to help it improve! Consider

Ashutosh Hathidara 607 Nov 18, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil Β· Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18k Nov 22, 2022
πŸ““ The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.2k Nov 21, 2022
React components for efficiently rendering large lists and tabular data

React components for efficiently rendering large lists and tabular data. Check out the demo for some examples. Sponsors The following wonderful compan

Brian Vaughn 24.4k Nov 22, 2022
Bootstrap components built with React

React-Bootstrap Bootstrap 4 components built with React. Docs See the documentation with live editable examples and API documentation. To find the doc

react-bootstrap 21.3k Nov 30, 2022
⚑️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚑️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

Chakra UI 30k Dec 1, 2022
Tweak React components in real time. (Deprecated: use Fast Refresh instead.)

React Hot Loader Tweak React components in real time βš›οΈ ⚑️ Watch Dan Abramov's talk on Hot Reloading with Time Travel. Moving towards next step React-

Dan Abramov 12.2k Nov 27, 2022
React components for efficiently rendering large lists and tabular data

react-window React components for efficiently rendering large lists and tabular data React window works by only rendering part of a large data set (ju

Brian Vaughn 13.3k Nov 20, 2022
Simple React Bootstrap 4 components

reactstrap Stateless React Components for Bootstrap 4. Getting Started Follow the create-react-app instructions to get started and then follow the rea

reactstrap 10.4k Nov 25, 2022
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

downshift ?? Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. Read the docs | See

Downshift 11k Nov 26, 2022