如何在 Next.js 中使用 Svg Icon？

Svg Icon 是一种常用于前端开发的图标格式，它具有矢量化、可缩放、体积小等特点，在不同分辨率的设备上都能保持清晰度。在 Next.js 中使用 Svg Icon 可以优化页面性能，提高用户体验。本文将介绍如何在 Next.js 中使用 Svg Icon。

1. 创建 Svg Icon 组件

首先，我们需要创建一个 Svg Icon 组件，用于在页面中渲染 Svg 图标。这个组件可以接受一个名为 name 的属性，表示要渲染的 Svg 图标的名称。

import React from 'react';
import { ReactComponent as Icon } from './icons.svg';

const SvgIcon = ({ name, ...rest }) => {
  return <Icon {...rest} title={name} />;
};

export default SvgIcon;

上面的代码中，ReactComponent as Icon 表示将整个 Svg 文件作为一个组件导入，title={name} 表示将 name 作为 title 属性传递给 Svg 图标，以便在浏览器中显示图标名称。

2. 导入 Svg Icon 文件

接下来，我们需要将所有的 Svg 图标打包成一个文件，并将其导入到项目中。可以使用 svgr 工具将 Svg 图标转换为 React 组件，然后使用 file-loader 将其打包到项目中。

在 Next.js 项目中，可以在 next.config.js 中配置 svgr 和 file-loader：

// javascriptcn.com 代码示例
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            svgoConfig: {
              plugins: [{ removeViewBox: false }],
            },
          },
        },
        {
          loader: 'file-loader',
          options: {
            name: '[name].[hash].[ext]',
            outputPath: 'static/media',
            publicPath: '/_next/static/media',
          },
        },
      ],
    });

    return config;
  },
};

上面的配置中，@svgr/webpack 表示使用 svgr 工具将 Svg 图标转换为 React 组件，file-loader 将其打包到 static/media 目录下，并在页面中使用 /static/media 路径访问。

3. 使用 Svg Icon 组件

现在，我们就可以在页面中使用 Svg Icon 组件了。假设我们有一个名为 search 的 Svg 图标，可以这样使用 Svg Icon 组件：

// javascriptcn.com 代码示例
import SvgIcon from '../components/SvgIcon';

const SearchButton = () => {
  return (
    <button>
      <SvgIcon name="search" className="icon" />
      Search
    </button>
  );
};

export default SearchButton;

上面的代码中，name="search" 表示要渲染的 Svg 图标的名称为 search，className="icon" 表示为 Svg 图标添加一个名为 icon 的类名，以便在样式表中对其进行样式设置。

4. 总结

本文介绍了如何在 Next.js 中使用 Svg Icon，包括创建 Svg Icon 组件、导入 Svg Icon 文件、以及在页面中使用 Svg Icon 组件。使用 Svg Icon 可以优化页面性能，提高用户体验，希望本文能对你有所帮助。完整的示例代码可以在 GitHub 上查看。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65657587d2f5e1655deb44ec