如何使用 React 和 Webpack 加载 SVG

2019-11-20 08:00:00 · 飞浪

介绍作为开发人员，我们希望所有图片看起来清晰美观，即使放大后也是如此。为了使使用位图图像（例如JPEG、GIF和PNG）的网站达到我们想要的清晰度，我们必须增加文件大小，这会极大地影响

介绍

作为开发人员，我们希望所有图片看起来清晰美观，即使放大后也是如此。为了使使用位图图像（例如 JPEG、GIF 和 PNG）的网站达到我们想要的清晰度，我们必须增加文件大小，这会极大地影响网站的性能。然而，无论屏幕分辨率如何，矢量图像看起来都很清晰，而且尺寸相对较小。

在本指南中，我们将了解可缩放矢量图形（SVG），并探索在与Webpack捆绑的React应用程序中导入 SVG 的标准方法。

什么是 SVG？

SVG 是一种基于 XML 的标记语言，用于描述二维矢量图形。SVG 之于图形本质上就如同 HTML 之于文本。

SVG 图像基本上取代了其他格式的传统图像，如 JPEG、PNG、TIFF 或 GIF。

与其他图像格式相比，使用 SVG 的优点是：

SVG 图像可以被搜索、索引、脚本化和压缩
SVG 图像可缩放
可以使用任何文本编辑器创建和编辑 SVG
即使调整大小或缩放，SVG 图像也不会损失质量
与其他传统图像格式不同，SVG 图像可以动画化

让我们仔细看看如何使用 SVG 图像。下面的 xml 代码创建一个矩形：

矩形.svg

      <svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="green" />
</svg>
    

通过<img>元素嵌入 SVG 的最基本方法是在 src 属性中引用它，正如您所期望的那样。您将需要一个高度或宽度属性（或者如果您的 SVG 没有固有的宽高比，则需要两者）。

      <img src="rectangle.svg" alt="A Rectangle Image with SVG" height="45px" width="45px" />
    

与 React 结合使用

在 React 应用程序中实现 SVG 的最简单方法如下：

      const App = () => <img src="/images/rectangle.svg" alt="A Rectangle Image with SVG" />;
    

然而，在大多数情况下，SVG 通常非常小，在这些情况下，我们最好将图像内联为数据 URL，以限制浏览器为了呈现网页而向服务器发出的请求数量。

要将 SVG 图像转换为数据 URL，我们需要在打包器中安装合适的 webpack 加载器。最常见的 webpack 加载器是svg-url-loader，可以按如下所示添加：

      npm i svg-url-loader --save-dev

添加到webpack.config.js：

      const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              limit: 10000,
            },
          },
        ],
      },
    ],
  },
  ...
};
    

将文件导入到你的 React 应用中：

      import rectangle from 'images/rectangle.svg';

const App = () => <img src={rectangle} alt="" />;

DOM 中的输出将是这样的：

      <img src="ebbc8779488b4073081931bd519478e8.svg" alt="" />

您可以查看svg-url-loader了解更多配置信息。

在上面的例子中，svg-url-loader只能以传统方式使用，包括 Web 应用程序中的图像（例如background-image或content ）。下一个问题是如何将 SVG 图像用作 React 组件。

SVG 作为 React 组件

这个解决方案并不牵强。我们需要另一个很棒的 webpack 加载器svgr的帮助，根据网站介绍，它可以将 SVG 转换为可立即使用的 React 组件。

那么我们如何使用这个很棒的工具呢？让我们从更新webpack.config.js开始：

      const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
  ...
};
    

然后我们可以按照通常的方式将其安装为开发依赖项：

      npm install @svgr/webpack --save-dev

启动应用程序后，Webpack 会开始工作，您无需再担心 SVG。您可以将 SVG 文件放在 src/ 文件夹中的任何位置，并将它们作为 React 组件导入到任何需要的地方。

最后，在你的 React 应用中导入该文件：

      import Image from 'path/image.svg';

const App = () => (
  <div>
    <Image />
  </div>
)
    

这种方法通常被称为inline-svg。

svgr的一个轻量级替代解决方案是react-svg-loader。

      const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        loader: 'react-svg-loader',
        options: {
          jsx: true // true outputs JSX tags
        }
      }
    ],
  },
  ...
};
    

并照常安装：

      npm install react-svg-loader --save-dev

大多数情况下，我们不希望所有 SVG 文件都作为 React 组件加载。我们可以根据用例组合上述方法。我们所要做的就是更新我们的 webpack 配置。

下面的示例使用了svgr和url-loader，这是一个将文件转换为 base64 URI 的 webpack 加载器。

      const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack', 'url-loader'],
      },
    ],
  },
  ...
};
    

您的应用程序中的用法将如下所示：

      import imageUrl { ReactComponent as Image } from 'path/image.svg';

const App = () => (
  <div>
    <img src={imageUrl} alt="" />
    <Image />
  </div>
)
    

结论

本指南快速介绍了如何使用 webpack 作为捆绑器将 SVG 导入到您的 React 应用程序中。

以下是有关 SVG 及其众多应用的其他一些资源：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何使用 React 和 Webpack 加载 SVG

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

const webpack = require('webpack'); module.exports = { entry: './src/index.js', module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'], }, { test: /\.svg$/, use: [ { loader: 'svg-url-loader', options: { limit: 10000, }, }, ], }, ], }, ... };

const webpack = require('webpack'); module.exports = { entry: './src/index.js', module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'], }, { loader: 'react-svg-loader', options: { jsx: true // true outputs JSX tags } } ], }, ... };