Appearance
Are you an LLM? You can read better optimized documentation at /guide/angular/advanced/filled-icons.md for this page in Markdown format
填充图标
🌐 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 { }