如何为React图标AiFillHeart添加红色填充与黑色边框？

完全可以使用 AiFillHeart 实现你的需求，无需更换图标。以下是几种最优实现方式：

1. 内联样式快速实现 #

适合快速测试或单个组件内的简单样式需求：

import { AiFillHeart } from 'react-icons/ai';

function HeartIcon() {
  return (
    <AiFillHeart 
      style={{
        fill: '#ff0000', // 红色填充色
        stroke: '#000000', // 黑色边框色
        strokeWidth: 2, // 边框宽度
        strokeLinejoin: 'round' // 优化边框转角圆润度
      }} 
      size={24}
    />
  );
}

2. CSS类名控制（推荐复用场景） #

适合需要在多个组件中复用相同样式的场景，便于统一维护：

/* HeartIcon.css */
.heart-icon {
  fill: #ff0000;
  stroke: #000000;
  stroke-width: 2;
  stroke-linejoin: round;
}

import { AiFillHeart } from 'react-icons/ai';
import './HeartIcon.css';

function HeartIcon() {
  return <AiFillHeart className="heart-icon" size={24} />;
}

3. CSS-in-JS（styled-components 示例） #

如果项目使用CSS-in-JS方案，可直接创建样式化组件：

import { AiFillHeart } from 'react-icons/ai';
import styled from 'styled-components';

const StyledHeartIcon = styled(AiFillHeart)`
  fill: #ff0000;
  stroke: #000000;
  stroke-width: 2;
  stroke-linejoin: round;
`;

function HeartIcon() {
  return <StyledHeartIcon size={24} />;
}

额外提示 #

若需要更粗的边框且避免图标变形，可尝试用阴影模拟边框效果：

.heart-icon {
  fill: #ff0000;
  filter: drop-shadow(0 0 2px #000000);
}

内容的提问来源于stack exchange，提问作者prax1telis