babel-plugin-jsx-svg-inject
v5.0.2
Published
Add SVG file imports for React components
Downloads
82
Maintainers
Readme
babel-plugin-jsx-svg-inject
Add SVG file imports for React components
This plugin can transform this:
<Icon svgName="eye" />
into this:
var _svgContents = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="100"/></svg>;
<Icon svgName="eye" svgContents={_svgContents} />;
The main benefit here is that explicit imports for the images are not needed and instead a single component can be used.
The plugin includes the contents of the file as a JSX element, so there is no need for additional plugins or loaders.
There is also an option to have the imports added instead (useImports
).
How does it work?
The plugin searches for a specific prop on JSX Elements (by default it's 'svgName'
) and adds the contents of the file as a JSX element (or a file import) for each one.
The exported value is put in an additional prop (by default it's 'svgContents'
).
Upgrading to v.5
The plugin now outputs JSX elements instead of text.
This has the benefit of not needing to use dangerouslySetInnerHTML
, which in turn solves a problem React has with swapping SVGs in IE 11.
The plugin encourages a use of very few (in most cases one) image components, so the changes should be minimal.
For example, if you previously had a component like this:
export default function Image({ svgName, svgContents, ...props }) {
return <svg {...props} dangerouslySetInnerHTML={{ __html: svgContents }} />;
}
Image.propTypes = {
svgContents: PropTypes.string.isRequired,
svgName: PropTypes.string.isRequired,
};
it could be rewritten like so:
export default function Image({ svgName, svgContents, ...props }) {
return <svg {...props}>{svgContents}</svg>; // svgContents is used the same as React children
}
Image.propTypes = {
svgContents: PropTypes.node.isRequired, // The type has changed
svgName: PropTypes.string.isRequired,
};
Upgrading to v.4
The plugin now inlines the source of the image by default. Previously another plugin or loader was needed for that (an import was added instead), which could be quite bothersome.
The upgrade should be painless if no complicated logic was used for importing the files.
In case the imports are preferred, please use the useImports
option.
Upgrading to v.3
In version 2.x and below the plugin looked for a JSX element with a specific name. This was less flexible - there was no simple way of having SVG injected into different tags. This was changed in version 3.0.0 and the JSX property now has the role that the tag previously had.
Usage
Install from the npm and then add this to .babelrc
:
{
"plugins": [
"jsx-svg-inject"
]
}
Options
root
Default: '.'
The path to the icons.
In case root is a relative path (e.g. ./some-path
), it will be resolved using the current working directory.
nameProp
Default: 'svgName'
The value of the prop with this name will be used for getting the SVG path.
contentsProp
Default: 'svgContents'
The value of the prop with this name will be used for passing the SVG contents.
unwrap
Default: false
If set to true
, the <svg>
element will be stripped and its props will be passed to the resulting element.
For example, with this option enabled and a file like this:
<SVG svgName="some-path/foo" />
the output might be something similar to this:
var _svgContents = <rect x=\"10\" y=\"10\" width=\"100\" height=\"100\" />;
<SVG svgName="some-path/foo" svgContents={_svgContents} viewBox="0 0 120 120" height="120" width="120" xmlns="http://www.w3.org/2000/svg" />;
When the <svg>
element has multiple children, they have keys provided automatically.
useImports
Default: false
If true
, a relative import will be added instead of an inlined content.
This was the default behavior before v.4.
License
Copyright (c) 2017 Rafał Ruciński. Licensed under the MIT license.