
Product
Rubygems Ecosystem Support Now Generally Available
Socket's Rubygems ecosystem support is moving from beta to GA, featuring enhanced security scanning to detect supply chain threats beyond traditional CVEs in your Ruby dependencies.
babel-plugin-inline-react-svg
Advanced tools
A babel plugin that optimizes and inlines SVGs for your react components.
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.
v2.0.2 - 2023-02-22
#120
#119
#117
#74
auto-changelog
0137651
63611b5
@babel/cli
, @babel/node
, @babel/preset-react
, eslint
, eslint-config-airbnb
, eslint-plugin-import
, eslint-plugin-jsx-a11y
, eslint-plugin-react
b839b94
e37c29b
a4c1c4c
npmignore
to autogenerate an npmignore file aeb3ddf
resolve
, svgo
b29d6a6
safe-publish-latest
and use prepublishOnly
982144b
@babel/cli
, @babel/plugin-transform-typescript
815bb4a
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 127,010 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.
Product
Socket's Rubygems ecosystem support is moving from beta to GA, featuring enhanced security scanning to detect supply chain threats beyond traditional CVEs in your Ruby dependencies.
Research
The Socket Research Team investigates a malicious npm package that appears to be an Advcash integration but triggers a reverse shell during payment success, targeting servers handling transactions.
Security Fundamentals
The Socket Threat Research Team uncovers how threat actors weaponize shell techniques across npm, PyPI, and Go ecosystems to maintain persistence and exfiltrate data.