Skip to content

填充图标

¥Filled Icons

官方不支持填充功能。但是,所有 SVG 属性都适用于所有图标。填充功能仍然可以使用,并且在某些图标上可以正常工作。

¥Fills are officially not supported. However, all SVG properties are available on all icons. Fill can still be used and will work fine on certain icons.

星星示例:

¥Example with stars:

import { Star, StarHalf } from "lucide-react";
import "./icon.css";

function App() {
  return (
    <div className="app">
      <div className="star-rating">
        <div className="stars">
          { Array.from({ length: 5 }, () => (
              <Star fill="#111" strokeWidth={0} />
          ))}
        </div>
        <div className="stars rating">
          <Star fill="yellow" strokeWidth={0} />
          <Star fill="yellow" strokeWidth={0} />
          <StarHalf fill="yellow" strokeWidth={0} />
        </div>
      </div>
    </div>
  );
}

export default App;

Lucide 将来会支持填充吗?

¥Will Lucide have fills in the future?

此功能已被多次请求,#458 正在进行讨论。

¥This feature has been requested several times and discussion is happening at #458.