用 React + TypeScript + Webpack 造一个 Icon 组件：手把手带你搭建！

前端

2023-11-29 10:14:12

打造你的第一个 React 自定义图标组件

初学者的福音：打造无经验项目经验

对于初出茅庐的开发者而言，求职之路往往充满艰辛。缺乏项目经验成为简历中的软肋，阻碍你获得梦寐以求的工作机会。

本教程的使命：掌握 React 组件开发

为了帮助你打破僵局，我们倾情推出「React 造轮子」系列，旨在通过手把手教你打造实用组件，填补你的简历空白。本期轮子——React 自定义图标组件 ，将带你领略 React、TypeScript 和 Webpack 的魅力。

项目简介：轻松玩转 SVG 图标

我们的自定义图标组件，让你在 React 项目中轻松引入 SVG 图标。它提供了丰富的功能：

导入并使用 SVG 图标
自定义图标尺寸、颜色和填充色
旋转、翻转和添加阴影
增添动感十足的动画效果

搭建教程：一步一步打造组件

1. 创建 React 项目

使用 npx create-react-app 命令创建一个新的 React 项目。

2. 安装依赖包

安装 react-svg，它是让 React 拥抱 SVG 图标的桥梁。

3. 创建图标组件

编写 Icon 组件，它接受各种属性，控制图标的呈现。

4. 使用图标组件

将 Icon 组件融入你的项目，打造充满个性的界面。

5. 打包项目

打包你的组件，让它成为可发布的独立个体。

代码示例：深入浅出

// 图标组件
import React from "react";
import { Svg } from "react-svg";

const Icon = ({ name, size, color, fillColor, rotation, flip, shadow, animation }) => {
  // 图标属性
  const svgProps = {
    src: `./icons/${name}.svg`,
    width: size,
    height: size,
    fill: fillColor,
    style: {
      // ... 省略
    },
  };

  // 根据属性调整图标样式
  // ... 省略

  return <Svg {...svgProps} />;
};

export default Icon;

// 使用图标组件
import Icon from "./Icon";

const App = () => {
  return (
    <div>
      // ... 省略
      <Icon name="heart" size={48} color="pink" fillColor="white" flip={true} />
      // ... 省略
    </div>
  );
};

export default App;