@svgr/webpack
Advanced tools
Package description
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.
Readme
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-loaderIt 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 3,916,740 weekly downloads. As such, @svgr/webpack popularity was classified as popular.
We found that @svgr/webpack demonstrated a healthy version release cadence and project activity because the last version was released less than 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.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Company News
Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.