组合图标

🌐 Combining icons

你可以通过在 SVG 中使用 SVG 将多个图标合并为一个图标。这在你想要发挥创意，通过组合现有图标来制作自己的自定义图标时非常有用。

🌐 You can combine multiple icons into a single icon by using SVG in SVG. This is useful for if you want to be creative and make your own custom icons by combining existing icons.

import { Component, ViewEncapsulation } from "@angular/core";
import { LucideScan, LucideUser } from "@lucide/angular";

@Component({
  selector: 'app',
  imports: [LucideScan, LucideUser],
  template: `
      <svg lucideScan [size]="48">
        <svg lucideUser
          [size]="12"
          x="6"
          y="6"
          [strokeWidth]="4"
          [absoluteStrokeWidth]="true"
        />
      </svg>`,
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {
}

Open Sandbox

这是有效的 SVG，所有 SVG 属性都支持在图标上使用。 x 和 y 坐标可以调整，以按你喜欢的方式定位图标。

🌐 This is valid SVG and all SVG properties are supported on the icons. The x and y coordinates can be adjusted to position the icons as you like.

限制

在组合图标时，你需要确保 x 和 y 坐标在外部图标（24x24）的 viewBox 范围内。

使用自定义 SVG 元素

🌐 With custom SVG elements

你也可以使用 SVG 元素来创建你自己的图标。

🌐 You can also use SVG elements to create your own icons.

带通知徽章的示例

🌐 Example with notification badge

例如，你可以使用 circle SVG 元素向图标添加通知徽章。

🌐 For example, you can add a notification badge to an icon by using the circle SVG element.

import { Component, ViewEncapsulation, signal } from "@angular/core";
import { LucideMail } from "@lucide/angular";

@Component({
  selector: 'app',
  imports: [LucideMail],
  template: `
      <svg lucideMail [size]="48">
        @if (hasUnreadMessages()) {
          <circle
            r="3"
            cx="21"
            cy="5"
            stroke="none"
            fill="#F56565"
          />
        }
      </svg>`,
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {
  protected readonly hasUnreadMessages = signal<boolean>(true);
}

Open Sandbox

带有文本元素的示例

🌐 Example with text element

你也可以使用 text SVG 元素向你的图标添加文本。

🌐 You can also use the text SVG element to add text to your icon.

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

@Component({
  selector: 'app',
  imports: [LucideFile],
  template: `
      <svg lucideFile [size]="48">
        <text
          x="7.5"
          y="19"
          font-size="8"
          font-family="Verdana,sans-serif"
          stroke-width="1"
        >
          JS
        </text>
      </svg>`,
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {
}

Open Sandbox