React优雅的封装SvgIcon组件示例

让我详细讲解一下“React优雅的封装SvgIcon组件示例”的完整攻略。

什么是SvgIcon组件

SVG 是一种基于 XML 语言的矢量图形。在 web 中，SVG 图形可以通过一组 SVG 标记和属性来定义。SvgIcon 组件是一种常见的 React 组件，它可以用于在网站中使用 SVG 图标。

通常情况下，我们需要在网站中使用很多的 SVG 图标。如果每次需要展示 SVG 图标时都要手动输入对应的代码，这将是一件很麻烦的事情。因此，我们需要对 SVG 图标进行封装，以简化使用流程，提高代码复用性。

封装SvgIcon组件

编写基础组件

首先，我们需要编写一个基础的 SvgIcon 组件，这个组件应该至少包含以下代码：

import React from 'react';
import PropTypes from 'prop-types';

function SvgIcon(props) {
  const { icon, className, width, height, fill, ...rest } = props;
  return (
    <svg
      className={className}
      width={width}
      height={height}
      viewBox={`0 0 ${icon.width} ${icon.height}`}
      {...rest}
    >
      <path fill={fill} d={icon.path} />
    </svg>
  );
}

SvgIcon.propTypes = {
  icon: PropTypes.object.isRequired,
  className: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number,
  fill: PropTypes.string,
};

export default SvgIcon;

这里的 SvgIcon 组件有一个 icon 属性，这个属性代表需要展示的 SVG 图标。它使用了 PropTypes 验证传入的参数类型，并使用了解构赋值来简化代码。

编写示例组件

接下来，我们需要编写一个封装了具体 svg 图标的组件，例如：

import React from 'react';
import SvgIcon from './SvgIcon';

const TwitterIcon = (props) => {
  const { size, className, style } = props;

  return (
    <SvgIcon
      icon={{
        width: 24,
        height: 24,
        path:
          'M21.98 7.998c-.755.335-1.56.56-2.398.663a4.27 4.27 0 0 0 1.854-2.355 8.483 8.483 0 0 1-2.695 1.03 4.241 4.241 0 0 0-7.23 3.86 12.064 12.064 0 0 1-8.766-4.452A4.25 4.25 0 0 0 4.27 10.98a4.235 4.235 0 0 1-1.924-.53v.054a4.247 4.247 0 0 0 3.409 4.156 4.273 4.273 0 0 1-1.918.07c.56 1.742 2.17 3.008 4.094 3.042a8.506 8.506 0 0 1-5.24 1.803 8.457 8.457 0 0 1-1.036-.064 12.027 12.027 0 0 0 6.53 1.92c7.817 0 12.105-6.672 11.798-12.675.81-.57 1.536-1.28 2.107-2.086z',
      }}
      className={className}
      style={{
        width: size,
        height: size,
        ...style,
      }}
    />
  );
};

TwitterIcon.defaultProps = {
  size: '24px',
  className: '',
  style: {},
};

export default TwitterIcon;

这里的 TwitterIcon 组件就是一个封装了具体 SVG 图标的组件，它通过引入和使用我们之前编写的 SvgIcon 组件来实现 SVG 图标的展示。

在网站中使用

使用封装好的组件非常简单，你只需要在需要使用 SVG 图标的地方引入对应的封装好的组件，就可以轻松地展示 SVG 图标了。例如：

import TwitterIcon from './icons/TwitterIcon';

function App() {
  return (
    <div>
      <TwitterIcon />
    </div>
  );
}

export default App;

上面的代码引入了我们之前编写的 TwitterIcon 组件，并在网站中展示了该组件对应的 SVG 图标。使用其他封装好的图标也同样简单，只需要引入对应的组件并在需要展示 SVG 图标的地方使用即可。

示例说明

示例一

在这个示例中，我们封装了一个 ShowIcon 组件，用于展示一个眼睛的 SVG 图标。这个图标有两个状态，一个是打开状态，一个是关闭状态。

我们可以通过这个组件非常方便地展示这个 SVG 图标，并且可以通过改变状态来切换 SVG 图标的展示。

import React, { useState } from 'react';
import SvgIcon from './SvgIcon';

const ShowIcon = (props) => {
  const [isHidden, setIsHidden] = useState(true);
  const { size, className, style } = props;

  const handleShowClick = () => {
    setIsHidden(!isHidden);
  };

  const icon = isHidden
    ? {
        width: 24,
        height: 24,
        path:
          'M19.38 4.627a1.262 1.262 0 0 0-1.793 0L12 10.207 6.413 4.627A1.263 1.263 0 0 0 4.62 6.42l5.58 5.581L4.62 17.585a1.262 1.262 0 0 0 1.792 1.792l5.58-5.581 5.58 5.581a1.262 1.262 0 0 0 1.792-1.792l-5.58-5.581 5.58-5.58a1.262 1.262 0 0 0 0-1.793z',
      }
    : {
        width: 24,
        height: 24,
        path:
          'M12 5.25c-4.098 0-7.714 2.12-9.808 5.324a1.502 1.502 0 0 0 0 1.67c2.094 3.205 5.71 5.325 9.808 5.325 4.099 0 7.814-2.12 9.908-5.324a1.502 1.502 0 0 0 0-1.67C19.814 7.37 16.198 5.25 12 5.25zm0 8.612a2.438 2.438 0 1 1 0-4.876 2.438 2.438 0 0 1 0 4.876z',
      };

  return (
    <SvgIcon
      icon={icon}
      className={className}
      style={{
        width: size,
        height: size,
        ...style,
      }}
      onClick={handleShowClick}
    />
  );
};

ShowIcon.defaultProps = {
  size: '24px',
  className: '',
  style: {},
};

export default ShowIcon;

示例二

在这个示例中，我们封装了一个 ReloadIcon 组件，用于展示一个刷新的 SVG 图标。这个图标可以带上动画效果，使得整个 SVG 图标在页面中呈现出较为动态的效果。

import React from 'react';
import SvgIcon from './SvgIcon';

const ReloadIcon = (props) => {
  const { size, className, style, isAni } = props;

  return (
    <SvgIcon
      icon={{
        width: 24,
        height: 24,
        path:
          'M17.78 3.355c-3.27-2.265-7.555-2.548-11.017-.8-3.46 1.745-6.164 4.95-7.237 8.694-.95 3.316-.576 6.902.937 9.855l.476.824h-2.71c-.64 0-1.16.52-1.16 1.16v3.04c0 .68.6 1.16 1.16.98l14.49-2.2c.56-.08 1.04-.6 1.04-1.24v-1.7c0-.68-.6-1.16-1.16-.98l-2.31.35c-1.428-3.274-4.12-6.016-7.503-7.646 3.09-1.168 6.47-.804 9.13 1.04 2.66 1.845 4.297 4.95 4.297 8.22v2.268c0 .68.52 1.16 1.16 1.04l3.66-.555c.68 0 1.16-.6.98-1.24L18.98 3.833c-.16-.64-.92-1.3-1.2-.478z',
      }}
      className={className}
      style={{
        width: size,
        height: size,
        animation: isAni ? 'spin 2s linear infinite' : '',
        ...style,
      }}
    />
  );
};

ReloadIcon.defaultProps = {
  size: '24px',
  className: '',
  style: {},
  isAni: false,
};

export default ReloadIcon;

这里的 ReloadIcon 组件还包含了一个动画效果 —— 每当用户点击 SVG 图标时，图标会旋转一圈。这里我们借助了 CSS 中的 animation 属性来实现这个动画效果。

我们也可以根据具体的实际需求来控制动画是否启动，实现 SVG 图标在不同场景下的动态展示效果。