Transforms imports to SVG files into React Components, and optimizes the SVGs with SVGO.
For example, the following code...
import React from 'react';
import CloseSVG from './close.svg';
const MyComponent = () => <CloseSVG />;will be transformed into...
import React from 'react';
const CloseSVG = () => <svg>{/* ... */}</svg>;
const MyComponent = () => <CloseSVG />;npm install --save-dev babel-plugin-inline-react-svg
.babelrc
{
"plugins": [
"inline-react-svg"
]
}ignorePattern- A pattern that imports will be tested against to selectively ignore imports.caseSensitive- A boolean value that if true will require file paths to match with case-sensitivity. Useful to ensure consistent behavior if working on both a case-sensitive operating system like Linux and a case-insensitive one like OS X or Windows.svgo- svgo options (falseto disable). Example:
{
"plugins": [
[
"inline-react-svg",
{
"svgo": {
"plugins": [
{
"name": "removeAttrs",
"params": { "attrs": "(data-name)" }
},
"cleanupIDs"
]
}
}
]
]
}
Note: If plugins field is specified the default enabled svgo plugins will be overrided. Alternatively, if your Babel config is in JavaScript, the default list of plugins can be extended by making use of the extendDefaultPlugins utility provided by svgo.
const { extendDefaultPlugins } = require('svgo');
module.exports = {
plugins: [
[
'inline-react-svg',
{
svgo: {
plugins: extendDefaultPlugins([
{
name: 'removeAttrs',
params: { attrs: '(data-name)' }
},
'cleanupIDs',
])
}
}
]
]
}$ babel --plugins inline-react-svg script.jsrequire('@babel/core').transform('code', {
plugins: [
['inline-react-svg', { filename: 'filename representing the code' }],
]
}) // => { code, map, ast };Inspired by and code foundation provided by react-svg-loader.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent