随着前端技术的发展，我们越来越需要各种工具和库来简化我们的工作。今天我们要介绍的是npm包 @svgr/webpack，它可以将您的SVG图像转换为React组件。
如果您在React项目中使用了许多SVG图片，这会很有用。此外，该工具还具有优化代码和减小文件大小的功能，使您的应用程序更加高效。
在本文中，我们将介绍如何使用@svgr/webpack，以及如何使用它为您的React项目生成优化的SVG组件。
安装
首先，我们需要将@svgr/webpack安装到我们的项目中，您可以使用npm或者yarn来安装：
npm install @svgr/webpack --save-dev
或者
yarn add @svgr/webpack --dev
使用
一旦安装完成，我们就可以开始使用它了。让我们看一个常见的使用场景：将SVG文件转换为React组件。
在我们的webpack配置中，我们需要添加一个loader：
module: {
rules: [
{
test: /\.svg$/,
use: ['@svgr/webpack'],
},
],
},现在我们可以使用SVG文件来创建React组件了。只需导入SVG文件并将其呈现为一个组件：
import React from 'react';
import Icon from './icons/icon.svg';
const App = () => {
return <Icon />;
};
export default App;这里我们使用了名为“Icon”的组件，并使用了我们的SVG文件作为内容。这可以使您在应用程序中任意重用SVG，而无需在代码中使用复杂的呈现代码。
配置选项
@svgr/webpack允许您执行许多自定义选项。你可以查看官方文档获得更多详细信息，这里我们将简要介绍几个常用选项：
dimension
dimension选项指定是否将svg的尺寸信息嵌入到生成的组件中。如果设置为false，则仅输出路径数据，组件将使用默认宽度和高度。
use: [
{
loader: '@svgr/webpack',
options: {
dimension: true,
},
},
],svgoConfig
svgoConfig允许我们指定要应用的SVGO配置。这是一项非常有用的特性，因为它允许我们优化SVG文件并自动应用最佳实践。
-- -------------------- ---- -------
---- -
-
------- ----------------
-------- -
----------- -
-------- -
- -------------- ----- --
- --------------------------- ----- --
- ------------ - ------ --------------- - --
--
--
--
--
--svgo
svgo选项允许我们手动启用或禁用单个SVGO插件：
use: [
{
loader: '@svgr/webpack',
options: {
svgo: false,
},
},
],结论
使用@svgr/webpack，您可以轻松地将SVG文件转换为优化的React组件，并在您的React应用程序中方便地重用它们。我们希望，您看完本文后，对SVG和React之间的转换有了更深的理解，并开始在您的项目中使用这个强大的工具。
完整示例代码：https://codesandbox.io/s/svgrwebpack-demo-3ekaj
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/90343