When making updates, create a branch and commit to that. You should not bump package.json
manually, or update the CHANGELOG.md within your branch. Once complete, issue a PR to merge into master. Instead, once the PR has been approved and merged, do the following...
git checkout master
git pull origin master
Next, you'll need to determine what type of version bump you're going to do, patch
, minor
or major
, based off semver. Update the CHANGELOG.md with your new version number and description of changes.
vim CHANGELOG.md // or atom, subl, etc.
git commit -am "Update CHANGELOG for <version>"
Then you'll need to actually bump the version using npm. You can do either a patch
, minor
, or major
version bump. This step will automatically create the git tag for you, as well as update the package.json
version number.
npm version patch
# or
npm version minor
# or
npm version major
Next, you'll need to push your changes to Github.
git push && git push --tags
Lastly, in order for other project's to pull this, we'll need to publish the package to Gemfury, our private gem/npm registry.
npm publish
After checking out the repo locally, you can run
# run the full suite
npm test
# run specific test(s)
npm test test/lib/(formatters_test.js)
# or to continually watch for changes and rerun
npm test (path to test) -- --watch
- v2.0.0-alpha.1 - master branch
- Drops Node 0.12 support (use at your own risk)
npm i react-svg-loader
// without webpack loader config
import Image1 from 'react-svg-loader!./image1.svg';
// or if you're passing all .svg files via react-svg-loader,
import Image2 from './image1.svg';
// and use it like any other React Component
<Image1 width={50} height={50}/>
<Image2 width={50} height={50}/>
By default the loader outputs ES2015 code (with JSX compiled to JavaScript using babel-preset-react). You can combine it with babel-loader to compile it down to ES5.
// In your webpack config
{
test: /\.svg$/,
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
loader: 'react-svg-loader',
query: {
jsx: true
}
}
]
}
Pass loader query jsx=true
.
// In your webpack config
{
test: /\.svg$/,
loader: 'react-svg-loader?jsx=1'
}
{
test: /\.svg$/,
loader: 'react-svg-loader',
query: {
svgo: {
// svgo options
plugins: [{removeTitle: false}],
floatPrecision: 2
}
}
}
or if you're using with babel-loader, you can
{
test: /\.svg$/,
loader: 'babel-loader!react-svg-loader?' + JSON.stringify({
svgo: {
// svgo options
plugins: [{removeTitle: false}],
floatPrecision: 2
}
}),
}
{
test: /\.svg$/,
use: [
{
loader: 'babel-loader'
},
{
loader: 'react-svg-loader',
query: {
svgo: {
plugins: [{removeTitle: false}],
floatPrecision: 2
}
}
}
]
}
Input SVG
โ
SVG Optimize using SVGO
โ
Babel Transform with preset=react
and plugin=svgToComponent
Going from bottom up, the following transformations are applied and the same can be checked in the partly annotated source - babel-plugin
<svg pointer-events="none">
<path stroke-width="5"/>
</svg>
is transformed to
<svg pointerEvents="none">
<path strokeWidth="5"/>
</svg>
React expects style attribute value to be an object. Also, Hyphenated style names are converted to camel case.
<svg style="text-align: center">
<circle style="width: 10px"/>
</svg>
is transformed to
<svg style={{textAlign: 'center'}}>
<circle style={{width: '10px'}}/>
</svg>
The props passed to the output component is passed on to the root SVG node and the props already defined are overridden by the props passed.
<svg width="50">
...
</svg>
is transformed to
<svg width="50" {...this.props}>
...
</svg>
<svg class="hello"/>
is transformed to
<svg className="hello"/>
The loader should now export the svg component. And this is done by wrapping it in a Component Class.
<svg>...</svg>
is transformed to
import React from 'react';
export default class SVG extends React.Component {
render() {
return <svg>...</svg>;
}
}
<svg style='text-align: center; width: 100px' pointer-events="stroke">
<circle cx="50" cy="50" r="25" style="text-align: center;" stroke-width="5" />
</svg>
import React from "react";
export default class SVG extends React.Component {
render() {
return <svg
style={{ textAlign: "center", width: "100px" }}
pointerEvents={this.props.pointerEvents ? this.props.pointerEvents : "stroke"}
{...this.props} >
<circle cx="50" cy="50" r="25" style={{textAlign: "center"}} strokeWidth="5" />
</svg>;
}
}
The react-svg-loader comes with a cli (svg2react
) that you can use to convert svg files to react components. Use this tool when you'd want to customize your svg component by hand. Otherwise the loader just works.
`npm bin`/svg2react file1.svg file2.svg
and the following files will be emitted
file1.svg.react.js
file2.svg.react.js
in the SAME directory as the files
--jsx
: Outputs JSX code instead of compiling it to JavaScript using babel-preset-react--stdout
: Outputs to STDOUT--svgo <config_file>
: Supports SVGO Config YAML / JSON / JS--svgo.plugins <...plugins>
: Takes in an array of plugins that need to be enabled--svgo.plugins.<plugin> <true|false>
: - Enable/Disable the plugin--svgo.floatPrecision $N
: Set floatPrecision toN
for SVGO. SVGO supports 1-8.
`npm bin`/svg2react file1.svg --es5 -0
- Root element is always
<svg>
- SVG is optimized using SVGO
MIT License - https://boopathi.mit-license.org/2015