轻松搞定React SvgIcon组件封装，图标管理从此无忧

2023-07-04 17:52:28

用 SVG 图标提升你的 React 项目

在 React 项目中，SVG 图标以其可缩放性、轻量性和灵活性而备受青睐。为了让管理和使用这些图标更加容易，我们建议将 SVG 图标封装成一个组件，使我们能够按需轻松地将它们引入我们的应用程序。

第一步：安装必要的依赖项

使用 svg-sprite-loader 管理 SVG 图标，我们需要安装它：

npm install svg-sprite-loader

第二步：配置 Webpack

在 webpack 配置文件中添加以下配置：

module: {
  rules: [
    {
      test: /\.svg$/,
      use: [
        {
          loader: 'svg-sprite-loader',
          options: {
            symbolId: 'icon-[name]'
          }
        }
      ]
    }
  ]
}

第三步：准备你的 SVG 图标

创建一个目录来存储你的 SVG 图标，并将它们复制到该目录中。

mkdir -p src/icons/svg
cp *.svg src/icons/svg

第四步：创建 SvgIcon 组件

现在，我们创建一个 React 组件 SvgIcon，它将加载并渲染我们的 SVG 图标：

import React from "react";
import { SVGLoader } from "react-svg-loader";

const SvgIcon = ({ name, width = 24, height = 24 }) => {
  return <SVGLoader src={require(`@/icons/svg/${name}.svg`)} width={width} height={height} />;
};

export default SvgIcon;

第五步：在你的项目中使用 SvgIcon

现在，我们可以在应用程序中轻松地使用 SvgIcon 组件来渲染 SVG 图标：

import SvgIcon from "@/components/SvgIcon";

const App = () => {
  return (
    <div>
      <SvgIcon name="home" />
      <SvgIcon name="user" width={32} height={32} />
    </div>
  );
};

export default App;