Security News
Internet Archive Hacked, 31 Million Record Compromised
The Internet Archive's "Wayback Machine" has been hacked and defaced, with 31 millions records compromised.
@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>
)
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. Using it you can specify two different configurations for JavaScript and the rest of your files.
{
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
issuer: {
test: /\.jsx?$/
},
use: ['babel-loader', '@svgr/webpack', 'url-loader']
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader'
},
}
MIT
FAQs
SVGR webpack loader.
The npm package @svgr/webpack receives a total of 3,483,542 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 Internet Archive's "Wayback Machine" has been hacked and defaced, with 31 millions records compromised.
Security News
TC39 is meeting in Tokyo this week and they have approved nearly a dozen proposals to advance to the next stages.
Security News
Our threat research team breaks down two malicious npm packages designed to exploit developer trust, steal your data, and destroy data on your machine.