A loader for webpack, rollup, babel that loads svg as a React Component
MIT License
Bot releases are visible (Hide)
Published by boopathi over 5 years ago
Published by boopathi about 7 years ago
Two new packages -
.svg
files as react componentsPublished by boopathi about 7 years ago
Tests are run on Node 4, 6, and 8
Previously, the output of the react-svg-loader was -
import React from "react";
export default class SVG extends React.Component {
render() {
return <svg {...this.props}>{svgContent}</svg>;
}
}
and now it is -
import React from "react";
export default props => <svg {...props}>{svgContent}</svg>;
Previously, class values are NOT transformed. Now they are transformed such that the output component can be used with css-modules
<svg class="foo bar">
is transformed to
<svg className={ (styles["foo"] || "foo") + " " + (styles["bar"] || "bar") }>
So, you can pass/override some styles in the svg, for example -
import Image from "react-svg-loader!./image.svg";
import styles from "./styles.css"; // with css-modules
const imageStyles = {
foo: styles.foo,
bar: styles.bar
}
let component = <Image styles={imageStyles} />
es5
Previously, you could do,
{
loader: "react-svg-loader",
options: {
es5: true
}
}
and get output transpiled to ES5 using babel-preset-es2015.
This is now deprecated and the recommended way to use react-svg-loader is to use it with babel-loader
{
test: /\.svg$/,
use: [
"babel-loader",
"react-svg-loader"
]
}
and with babel-preset-env in .babelrc
:
{
"presets": [
[
"env",
{
"target": {
"browsers": "IE > 11"
}
}
]
]
}
Now react-svg-loader is split into 3 packages
Published by boopathi about 7 years ago
Published by boopathi over 7 years ago
Published by boopathi about 8 years ago
--jsx
to get jsx outputPublished by boopathi about 8 years ago
Published by boopathi over 8 years ago
Published by boopathi over 8 years ago
npm install react-svg-loader@beta
Published by boopathi over 8 years ago
Published by boopathi about 9 years ago
It all starts here.
Kind of stable API.
The bug reports and other suggestions start here.