React中Heroicons轮廓与实心图标切换的导入及实现问题咨询

核心问题解决：重命名导入避免冲突 #

从outline和solid目录导入的组件同名，直接导入会导致命名覆盖报错。React支持导入时用as关键字重命名组件，区分两个图标：

import { HeartIcon as HeartOutlineIcon } from "@heroicons/react/24/outline";
import { HeartIcon as HeartSolidIcon } from "@heroicons/react/24/solid";

修正状态切换与渲染逻辑 #

原代码存在JSX语法错误（标签未闭合、条件渲染写法错误），且状态切换逻辑可简化。以下是完整实现代码：

import { useState } from 'react';
import { HeartIcon as HeartOutlineIcon } from "@heroicons/react/24/outline";
import { HeartIcon as HeartSolidIcon } from "@heroicons/react/24/solid";

function LikeButton() {
  const [isLiked, setIsLiked] = useState(false);

  // 点击时直接翻转状态，无需写多个事件处理函数
  const toggleLike = () => {
    setIsLiked(prevState => !prevState);
  };

  return (
    // 根据状态渲染对应图标，共用同一个点击事件
    isLiked ? 
      <HeartSolidIcon onClick={toggleLike} className="h-6 w-6 text-red-500" /> : 
      <HeartOutlineIcon onClick={toggleLike} className="h-6 w-6 text-gray-500" />
  );
}

export default LikeButton;

关键说明 #

• 重命名后两个图标组件拥有独立标识，彻底解决命名冲突
• 用setIsLiked(prevState => !prevState)直接翻转布尔值，简化状态切换逻辑
• 通过三元运算符根据状态渲染对应图标，避免不必要的DOM叠加
• 可通过className设置图标的大小、颜色，优化交互视觉反馈

内容的提问来源于stack exchange，提问作者Hnin Lamin Thar