NextJS开发:shadcn/ui中Button组件扩展增加图标

shadcn/ui组件比较灵活,但是功能相比ant之类组件还是缺少太多功能,本文为shadcn/ui为button组件增加图标,加载中动画等效果。

  1. 安装Lucide
bash 复制代码
npm install lucide
  1. Lucide组件
typescript 复制代码
import { cn } from '@/lib/utils';
import { icons } from 'lucide-react';

const LcIcon = ({ name, color, size, className }: { name: string, color?: string, size: number, className?: string}) => {
  const LucideIcon = (icons as any)[name];
  if(LucideIcon == null) {
    return <></>
  }
  if(color != null) {
    return <LucideIcon color={color} size={size} />
  } else {
    return <LucideIcon size={size} className={cn("", className)}/>
  }
};

export default LcIcon;
  1. 创建组件CustomButton
typescript 复制代码
"use client"
import React, { MouseEventHandler } from "react";
import { Button } from "../ui/button";
import LcIcon from "./lc-icon";

/** 
 * Button扩展,增加图标功能 
 * <CustomButton icon="Loader" onClick={handleSubmit}>Button</CustomButton>
 * */
export const CustomButton = (props: {
  className?: string, 
  icon?: string, 
  loading?: boolean
  disabled?: boolean,
  type?: string,
  onClick?: MouseEventHandler<HTMLButtonElement>,
  children?: any
}) => {

  const buildIcon = () => {
    if(props.loading != null && props.loading) {
      return <LcIcon name="Loader" size={16} className="mr-1 animate-spin"/>
    }
    else if(props.icon != null) {
      return <LcIcon name={props.icon} size={16} className="mr-1"/>
    }
    return ""
  }

  return (
    <Button type={props.type ?? 'button' as any} className={props.className} disabled={props.disabled} onClick={props.onClick}>
      { buildIcon() }
      { props.children }
    </Button>
  )
}
  1. 组件使用,

显示加载中

typescript 复制代码
import { CustomButton } from "@/components/app/custom-button";

<CustomButton loading={true} disabled={true} >测试</CustomButton>

显示图标

typescript 复制代码
import { CustomButton } from "@/components/app/custom-button";

<CustomButton icon="Home">测试</CustomButton>
相关推荐
用户7678797737328 分钟前
后端转全栈之Next.js SEO优化
react.js·next.js
遂心_4 小时前
深入浅出 querySelector:现代DOM选择器的终极指南
前端·javascript·react.js
遂心_4 小时前
DOM元素内容修改全攻略:从innerHTML到现代API的最佳实践
前端·javascript·react.js
YiHanXii5 小时前
React.memo 小练习题 + 参考答案
前端·javascript·react.js
知识分享小能手16 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
虫虫rankourin19 小时前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js
开心不就得了20 小时前
React 状态管理
react.js·typescript
天天进步201521 小时前
掌握React状态管理:Redux Toolkit vs Zustand vs Context API
linux·运维·react.js
冷冷的菜哥21 小时前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
用户76787977373221 小时前
后端转全栈之Next.js文件约定
react.js·next.js