Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details

All Projects → gregberge → Svgr

gregberge / Svgr

Licence: mit

Transform SVGs into React components 🦁

Programming Languages

184084 projects - #8 most used programming language

32286 projects

77523 projects

Labels

react react-native webpack svg loader webpack-loader svgo inline-svg react-svg react-svg-creator svg2react svg-to-react svg-react react-svg-loader

Projects that are alternatives of or similar to Svgr

Vue Svg Inline Loader

Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.

Stars: ✭ 105 (-98.73%)

Mutual labels: webpack, webpack-loader, svgo, svg, loader

Style Loader

Stars: ✭ 1,572 (-80.98%)

Mutual labels: webpack, webpack-loader, loader

React Svg Loader

A loader for webpack, rollup, babel that loads svg as a React Component

Stars: ✭ 570 (-93.1%)

Mutual labels: webpack-loader, svgo, svg

Pug As Jsx Loader

Stars: ✭ 168 (-97.97%)

Mutual labels: webpack, webpack-loader, loader

Svg Sprite Loader

Webpack loader for creating SVG sprites.

Stars: ✭ 1,822 (-77.95%)

Mutual labels: webpack, webpack-loader, svg

Sass Vars Loader

Use Sass variables defined in Webpack config or in external Javascript or JSON files

Stars: ✭ 112 (-98.64%)

Mutual labels: webpack, webpack-loader, loader

✨ WASM webpack loader

Stars: ✭ 604 (-92.69%)

Mutual labels: webpack, webpack-loader, loader

Markdown Loader

markdown loader for webpack

Stars: ✭ 335 (-95.95%)

Mutual labels: webpack, webpack-loader, loader

Stylefmt Loader

Webpack-loader. Fixes stylelint issues automatically while bundling with Webpack.

Stars: ✭ 24 (-99.71%)

Mutual labels: webpack, webpack-loader, loader

Convert SVG icons to React components eg.: https://ambar.li/reiconify/md.icons/#/Browse

Stars: ✭ 17 (-99.79%)

Mutual labels: svgo, svg2react, svg-to-react

Open source browser extension that makes designing and developing easier by finding, processing, exporting, optimizing, and managing SVG content.

Stars: ✭ 272 (-96.71%)

Mutual labels: svgo, inline-svg, svg2react

CSS Loader

Stars: ✭ 4,067 (-50.78%)

Mutual labels: webpack, webpack-loader, loader

Compiles Sass to CSS

Stars: ✭ 3,718 (-55%)

Mutual labels: webpack, webpack-loader, loader

Runs the following loaders in a worker pool

Stars: ✭ 945 (-88.56%)

Mutual labels: webpack, webpack-loader, loader

Svg Inline Loader

Inline SVG loader with cleaning-up functionality

Stars: ✭ 490 (-94.07%)

Mutual labels: webpack-loader, svg

🔥 Angular Hot Module Replacement for Hot Module Reloading

Stars: ✭ 490 (-94.07%)

Mutual labels: webpack, loader

🔨 webpack loader that lets you use SVG files as Vue components

Stars: ✭ 514 (-93.78%)

Mutual labels: webpack, svg

📦 Babel loader for webpack

Stars: ✭ 4,570 (-44.69%)

Mutual labels: webpack, loader

React Imported Component

✂️📦Bundler-independent solution for SSR-friendly code-splitting

Stars: ✭ 525 (-93.65%)

Mutual labels: webpack, loader

Webpack loader to offload modules to Worker threads seamlessly using Comlink.

Stars: ✭ 535 (-93.53%)

Mutual labels: webpack, webpack-loader

View All Similar Projects ➔

Transform SVGs into React components 🦁

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:

Become a backer or sponsor on OpenCollective.

Gold Sponsors

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

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 8,263

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (10) 🔗