https://github.com/airbnb/babel-plugin-inline-react-svg
A babel plugin that optimizes and inlines SVGs for your React Components.
https://github.com/airbnb/babel-plugin-inline-react-svg
Last synced: 6 months ago
JSON representation
A babel plugin that optimizes and inlines SVGs for your React Components.
- Host: GitHub
- URL: https://github.com/airbnb/babel-plugin-inline-react-svg
- Owner: airbnb
- License: mit
- Created: 2016-09-19T16:55:26.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2024-07-22T18:23:52.000Z (about 1 year ago)
- Last Synced: 2025-03-25T07:03:56.612Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 121 KB
- Stars: 475
- Watchers: 19
- Forks: 93
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-inline-react-svg
Transforms imports to SVG files into React Components, and optimizes the SVGs with [SVGO](https://github.com/svg/svgo/).
For example, the following code...
```jsx
import React from 'react';
import CloseSVG from './close.svg';
const MyComponent = () => ;
```
will be transformed into...
```jsx
import React from 'react';
const CloseSVG = () => {/* ... */};
const MyComponent = () => ;
```
## Installation
```
npm install --save-dev babel-plugin-inline-react-svg
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": [
"inline-react-svg"
]
}
```
#### Options
- `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 (`false` to disable). Example:
```json
{
"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`.
```js
const { extendDefaultPlugins } = require('svgo');
module.exports = {
plugins: [
[
'inline-react-svg',
{
svgo: {
plugins: extendDefaultPlugins([
{
name: 'removeAttrs',
params: { attrs: '(data-name)' }
},
'cleanupIDs',
])
}
}
]
]
}
```
### Via CLI
```sh
$ babel --plugins inline-react-svg script.js
```
### Via Node API
```javascript
require('@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](https://github.com/boopathi/react-svg-loader).