Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@svgr/webpack
Advanced tools
The @svgr/webpack package is a webpack loader that allows you to import SVG files as React components. This enables you to manipulate SVGs in your React applications with ease, such as changing colors or sizes, and integrating them as if they were regular React components.
Import SVGs as React Components
This feature allows you to import an SVG file directly into a React component file and use it as a React component. The SVG file is transformed into a React component, which can then be rendered in the JSX.
import React from 'react';
import { ReactComponent as Logo } from './logo.svg';
const App = () => (
<div>
<h1>Welcome to React</h1>
<Logo />
</div>
);
export default App;
Customize SVGs with Props
This feature allows you to pass props to the imported SVG component to customize its appearance. You can change the fill color, size, and other properties by passing props as you would to any other React component.
import React from 'react';
import { ReactComponent as Star } from './star.svg';
const App = () => (
<div>
<Star fill="#FFD700" width={100} height={100} />
</div>
);
export default App;
Use with CSS Modules
This feature integrates with CSS Modules, allowing you to apply scoped CSS to the SVG component. You can style the SVG using a CSS module and pass the generated class name as a prop to the SVG component.
import React from 'react';
import styles from './App.module.css';
import { ReactComponent as Logo } from './logo.svg';
const App = () => (
<div className={styles.app}>
<Logo className={styles.logo} />
</div>
);
export default App;
react-svg-loader is another webpack loader that provides similar functionality to @svgr/webpack. It also allows you to import SVG files as React components. However, @svgr/webpack offers additional features such as SVGO optimization and JSX transformation.
svg-inline-loader is a webpack loader that inlines SVG as module exports. Unlike @svgr/webpack, it does not convert SVGs into React components but rather provides the SVG content directly, which can be useful for different use cases.
svg-sprite-loader compiles all SVGs into an SVG sprite, which can be beneficial for performance as it reduces the number of HTTP requests. This is different from @svgr/webpack's approach of handling SVGs as individual React components.
Webpack loader for SVGR.
npm install @svgr/webpack --save-dev
In your webpack.config.js
:
{
test: /\.svg$/,
use: ['@svgr/webpack'],
}
In your code:
import Star from './star.svg'
const App = () => (
<div>
<Star />
</div>
)
{
test: /\.svg$/,
use: [
{
loader: '@svgr/webpack',
options: {
native: true,
},
},
],
}
url-loader
or file-loader
It is possible to use it with url-loader
or file-loader
.
In your webpack.config.js
:
{
test: /\.svg$/,
use: ['@svgr/webpack', 'url-loader'],
}
In your code:
import starUrl, { ReactComponent as Star } from './star.svg'
const App = () => (
<div>
<img src={starUrl} alt="star" />
<Star />
</div>
)
The named export defaults to ReactComponent
, but can be customized with the namedExport
option.
Please note that by default, @svgr/webpack
will try to export the React Component via default export if there is no other loader handling svg files with default export. When there is already any other loader using default export for svg files, @svgr/webpack
will always export the React component via named export.
If you prefer named export in any case, you may set the exportType
option to named
.
By default, @svgr/webpack
includes a babel-loader
with an optimized configuration. In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying babel: false
in options.
// Example using preact
{
test: /\.svg$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['preact', 'env'],
},
},
{
loader: '@svgr/webpack',
options: { babel: false },
}
],
}
It is possible to detect the module that requires your SVG using Rule.issuer
in Webpack 5. Using it you can specify two different configurations for JavaScript and the rest of your files.
;[
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
issuer: /\.[jt]sx?$/,
use: ['babel-loader', '@svgr/webpack', 'url-loader'],
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
},
]
Rule.issuer in Webpack 4 has additional conditions which are not available in Webpack 5.
MIT
FAQs
SVGR webpack loader.
The npm package @svgr/webpack receives a total of 4,825,582 weekly downloads. As such, @svgr/webpack popularity was classified as popular.
We found that @svgr/webpack demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.