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 图标在不同场景下的动态展示效果。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:React优雅的封装SvgIcon组件示例 - Python技术站

(0)
上一篇 2023年6月25日
下一篇 2023年6月25日

相关文章

  • uniapp实现a标签跳转

    以下是“uniapp实现a标签跳转”的完整攻略: uniapp实现a标签跳转 在uniapp中,我们可以使用<navigator>标签来实现页面跳转。以下是两种常见的实现a标签跳转的方法: 1. 使用<navigator>标签 我们可以使用<navigator>标签来实现a标签跳转。以下是一个示例: <templat…

    other 2023年5月7日
    00
  • Java数据结构和算法之冒泡,选择和插入排序算法

    Java数据结构和算法之冒泡、选择和插入排序算法 冒泡排序算法 算法思路 冒泡排序是一种基础的排序算法,它通过比较相邻元素的大小并交换位置,将最大(或最小)的元素逐步“冒泡”到序列的最后,从而完成排序。 具体地,冒泡排序的过程如下: 从序列的第一个元素开始,依次比较相邻的两个元素,如果前面的元素大于后面的元素,则交换它们的位置。 继续依次比较相邻的元素,直到…

    other 2023年6月27日
    00
  • npoi教程-2.1单元格合并

    npoi教程-2.1 单元格合并 在NPOI库中,提供了合并单元格的功能。合并单元格是指将多个单元格合并成一个单元格,这样可以获得更加美观的表格布局。 1. 调用合并单元格的方法 使用NPOI库合并单元格非常简单,只需要调用单元格的Merge方法即可。 ICellRange mergedCell = sheet.AddMergedRegion(new Cel…

    其他 2023年3月29日
    00
  • C++实现LeetCode(143.链表重排序)

    对于C++实现LeetCode题目,一般需要注意以下几个方面: 1.理解题目,找出其中的规律和特点。2.选择适当的数据结构和算法,实现解题思路。3.编写代码实现解题思路。4.提交代码并检查题目结果。 下面我们来详细讲解如何用C++实现LeetCode(143.链表重排序)的完整攻略。首先,我们可以查看题目描述: 给定一个单链表 L 的头节点 head ,单链…

    other 2023年6月27日
    00
  • 如何快速制作app应用软件

    当制作一个app应用软件时,以下是一些需要考虑和遵循的步骤: 1.明确目标和用户 在开始制作app之前,需要明确制作app的目标和用户。这将有助于你了解需要包含哪些功能以及如何为用户提供最佳的使用体验。 例如,假设你要开发一个订餐app,那么你需要考虑以下问题: 用户能否浏览菜单? 用户能否下订单? 用户能否支付订单? 用户能否跟踪订单状态? 关于目标和用户…

    other 2023年6月25日
    00
  • Anaconda的安装及其环境变量的配置详解

    Anaconda的安装及其环境变量的配置详解 1. 下载并安装Anaconda 1.1 下载Anaconda 在Anaconda官网中下载对应的Anaconda版本,官网地址为 https://www.anaconda.com/download/,建议下载最新版的Anaconda3。 1.2 安装Anaconda 下载完毕后,运行安装程序进行安装。Anaco…

    other 2023年6月27日
    00
  • 聊聊boost python3依赖安装问题

    接下来我将详细讲解“聊聊boost python3依赖安装问题”的完整攻略。 首先了解boost python3 Boost Python3 是将 C++ 库和 Python 解释器连接的一种工具。使用 Boost Python3 可以使得 C++ 来开发 Python 模块。在 boost.python 第一版中,一些 Python/C API 都封装成了…

    other 2023年6月26日
    00
  • Win11系统文件名或扩展名太长的四种解决方法

    下面是详细讲解“Win11系统文件名或扩展名太长的四种解决方法”的完整攻略: 一、问题描述 在 Win11 系统中,有一些文件名或扩展名比较长,在复制、移动或打开时可能会出现“文件名太长”的提示,导致无法正常操作文件。这个问题在日常使用中非常常见,那么应该如何解决呢? 二、解决方法 Win11 系统文件名或扩展名太长的问题,一般有以下几种解决方法: 1. 修…

    other 2023年6月26日
    00
合作推广
合作推广
分享本页
返回顶部