babel-plugin-inline-react-svg
Advanced tools
A babel plugin that optimizes and inlines SVGs for your react components.
Package description
The babel-plugin-inline-react-svg package is a Babel plugin that allows you to import SVG files directly as React components. This can be particularly useful for including SVGs in your React applications without having to manually convert them to JSX.
Importing SVG as React Component
This feature allows you to import an SVG file and use it as a React component. The SVG content is inlined into the component, which can then be used like any other React component.
import Logo from './logo.svg';
const App = () => (
<div>
<Logo />
</div>
);Customizing SVG Attributes
You can customize the attributes of the imported SVG component, such as width, height, and fill color, directly in your JSX.
import Logo from './logo.svg';
const App = () => (
<div>
<Logo width="100" height="100" fill="red" />
</div>
);Inlining SVGs for Performance
Inlining SVGs can improve performance by reducing the number of HTTP requests and allowing for better control over the SVG content.
import Icon from './icon.svg';
const App = () => (
<div>
<Icon />
</div>
);The react-svg package allows you to import SVG files and use them as React components. It provides similar functionality to babel-plugin-inline-react-svg but does not require a Babel plugin. Instead, it uses a React component to load and render the SVG.
SVGR is a tool that transforms SVGs into React components. It can be used as a CLI tool, a webpack loader, or a Node.js library. SVGR offers more customization options and can be integrated into various build processes, making it a more flexible option compared to babel-plugin-inline-react-svg.
The react-inlinesvg package allows you to load and inline SVGs in your React components. It provides a React component that fetches the SVG file and inlines its content. This package is useful if you prefer to keep your SVGs as separate files and load them dynamically.
Changelog
v2.0.2 - 2023-02-22
#120#119#117#74auto-changelog 013765163611b5@babel/cli, @babel/node, @babel/preset-react, eslint, eslint-config-airbnb, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react b839b94e37c29ba4c1c4cnpmignore to autogenerate an npmignore file aeb3ddfresolve, svgo b29d6a6safe-publish-latest and use prepublishOnly 982144b@babel/cli, @babel/plugin-transform-typescript 815bb4aReadme
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 (Recommended).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 (false to 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.js
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.
FAQs
A babel plugin that optimizes and inlines SVGs for your react components.
The npm package babel-plugin-inline-react-svg receives a total of 111,988 weekly downloads. As such, babel-plugin-inline-react-svg popularity was classified as popular.
We found that babel-plugin-inline-react-svg demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Git dependencies in open source packages can introduce significant risks, including lack of version control, stability issues, dependency drift, and difficulty in auditing, making them potential targets for supply chain attacks.
Security News
Node.js has added experimental support for TypeScript, a move that highlights the growing importance of TypeScript in modern development.
Product
Check out what's new at Socket with our Product Changelog. It tracks all public-facing updates, improvements, and fixes so you can take full advantage of our features.