svg-react-loader - Webpack SVG to React Component Loader

  •        478

A webpack loader allowing for inline usage of a SVG as a React component, or for composing individual SVGs into larger ones. The latest version has been refactored to allow for receiving an SVG/XML string or an JSON object-tree representing an SVG. This allows for other loaders before svg-react to alter/update/remove nodes before reaching svg-react.

https://github.com/jhamlet/svg-react-loader#readme

Dependencies:

css : 2.2.1
loader-utils : 1.1.0
ramda : 0.21.0
rx : 4.1.0
traverse : 0.6.6
xml2js : 0.4.17

Tags
Implementation
License
Platform

   




Related Projects

svg-inline-loader - Inline SVG loader with cleaning-up functionality

  •    Javascript

This Webpack loader inlines SVG as module. If you use Adobe suite or Sketch to export SVGs, you will get auto-generated, unneeded crusts. This loader removes it for you, too. Simply add configuration object to module.loaders like this.

react-inlinesvg - An SVG loader component for ReactJS

  •    Javascript

But there's an alternative that sidesteps these issues: load the SVG with an XHR request and then embed it in the document. That's what this component does. The SVG <use> element can be used to achieve something similar to this component. See this article for more information and this table for browser support and caveats.

svg-sprite-loader - Webpack loader for creating SVG sprites.

  •    Javascript

Webpack loader for creating SVG sprites. 🎉 2.0 is out, please read the migration guide & overview.


vue-content-loader - SVG component to create placeholder loading, like Facebook cards loading.

  •    Javascript

SVG component to create placeholder loading, like Facebook cards loading. This is a Vue port for react-content-loader.

react-proxy-loader - Wraps a react component in a proxy component to enable Code Splitting.

  •    Javascript

Wraps a react component in a proxy component to enable Code Splitting, which loads a react component and its dependencies on demand. This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

react-transform-boilerplate - A new Webpack boilerplate with hot reloading React components, and error handling on module and component level

  •    Javascript

React Hot Loader 3 is on the horizon, and you can try it today (boilerplate branch, upgrade example). It fixes some long-standing issues with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, this commit is a good reference. This is highly experimental tech. If you’re enthusiastic about hot reloading, by all means, give it a try, but don’t bet your project on it. Either of the technologies it relies upon may change drastically or get deprecated any day. You’ve been warned 😉 .

bootstrap-loader - Load Bootstrap styles and scripts in your Webpack bundle

  •    Javascript

If your team might need my help, please email me for a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products. Intersted in optimizing your webpack setup for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable? Contact me.

react-simple-maps - An svg map component built with and for React

  •    Javascript

An svg map component built with and for React. It allows the creation of pure react svg maps. React-simple-maps aims to make working with svg maps in react easier. It handles tasks such as panning, zooming and simple rendering optimization, and takes advantage of parts of d3-geo and topojson-client instead of relying on the entire d3 library.

react-native-svg-charts - 📈 One library to rule all charts for React Native 📊

  •    Javascript

A much improved decorator system has been introduced, allowing for greater flexibility and less complexity. See releases for more information. In order to not bloat this README to much we've moved some examples over to react-native-svg-charts-examples. There we will try to showcase the really cool things you can do with this library. This README will try to keep things as simple as possible so that everybody can get up and running as fast as possible.

react-transform-hmr - A React Transform that enables hot reloading React classes using Hot Module Replacement API

  •    Javascript

React Hot Loader 3 is on the horizon, and you can try it today (boilerplate branch, upgrade example). It fixes some long-standing issues with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, this commit is a good reference. A React Transform that enables hot reloading React classes using Hot Module Replacement API. Hot module replacement is supported natively by Webpack and available in Browserify with browserify-hmr.

react-native-shadow - A SVG shadow component powered with react-native-svg,which can provide shadow on Android like iOS ^_^

  •    Javascript

A SVG shadow component powered with react-native-svg,which can provide shadow on Android like iOS ^_^

react-native-svg - SVG library for React Native.

  •    Java

react-native-svg is built to provide a SVG interface to react native on both iOS and Android. Check out the demo Source.

isomorphic-style-loader - CSS style loader for Webpack that is optimized for isomorphic (universal) web apps

  •    Javascript

CSS style loader for Webpack that works similarly to style-loader, but is optimized for critical path CSS rendering and also works great in the context of isomorphic apps. It provides two helper methods on to the styles object - ._insertCss() (injects CSS into the DOM) and ._getCss() (returns a CSS string).Note: Configuration is the same for both client-side and server-side bundles. For more information visit https://webpack.js.org/configuration/module/.

react-mt-svg-lines - A React.js wrapper component to animate the line stroke in SVGs

  •    Javascript

The component wraps your SVG and animates the stroke-dashoffset property on every path element within. To accomplish this, it injects a style tag with a generated string of CSS. For a description of the technique, see this article. Require MtSvgLines into your component (you can import it under any name)...

react-calendar-heatmap - an svg calendar heatmap component, inspired by github's contribution graph

  •    Javascript

A calendar heatmap component built on SVG, inspired by github's commit calendar graph. The component expands to size of container and is super configurable. See a live demo. See full configuration options on the live demo page.

pixo - Convert SVG icons into React components

  •    Javascript

Pass a directory or SVG file path as the first argument. Each SVG icon will be automatically optimized and renamed to a pascal case filename for the component. Icon components can then be imported into a React application.

react-hot-loader - Tweak React components in real time.

  •    Javascript

Watch Dan Abramov's talk on Hot Reloading with Time Travel. Note: You can safely install react-hot-loader as a regular dependency instead of a dev dependency as it automatically ensures it is not executed in production and the footprint is minimal.

react-svg-morph - :crystal_ball: morph your svg component one into another other

  •    Javascript

Everything else is the same only you need to include MorphReplaceNative and MorphTransitionNative from react-svg-morph/native. For now it works with normal svg tags/components like in example top.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.