Skip to content

填充图标

🌐 Filled Icons

Lucide 官方不支持填充。

🌐 Fills are not officially supported by Lucide.

然而,由于这些图标是标准的 SVG 元素,因此仍然可以应用 SVG 属性,例如 fill。根据图标的不同,这可能会产生可接受的效果。

🌐 However, since the icons are standard SVG elements, SVG attributes such as fill can still be applied. Depending on the icon, this may produce acceptable results.

星星示例:

🌐 Example with stars:

import { Component, ViewEncapsulation } from "@angular/core";
import { LucideStar, LucideStarHalf } from "@lucide/angular";

@Component({
  selector: 'app',
  imports: [LucideStar, LucideStarHalf],
  template: `
<div class="star-rating">
  <div class="stars">
    <svg lucideStar fill="#111" strokeWidth="0" />
    <svg lucideStar fill="#111" strokeWidth="0" />
    <svg lucideStar fill="#111" strokeWidth="0" />
    <svg lucideStar fill="#111" strokeWidth="0" />
    <svg lucideStar fill="#111" strokeWidth="0" />
  </div>
  <div class="stars rating">
    <svg lucideStar fill="yellow" strokeWidth="0" />
    <svg lucideStar fill="yellow" strokeWidth="0" />
    <svg lucideStarHalf fill="yellow" strokeWidth="0" />
  </div>
</div>
`,
  styleUrls: ['./app.component.css', './icon.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {
}