组合图标

🌐 Combining icons

你可以通过嵌套 SVG 元素将多个图标合并为单个图标。如果你想通过组合现有图标来创建自定义图标，这非常有用。

🌐 You can combine multiple icons into a single icon by nesting SVG elements. This is useful if you want to create custom icons icons by combining existing ones.

import { Scan, User } from "lucide-react";

function App() {
  return (
    <div className="app">
      <Scan size={48}>
        <User
          size={12}
          x={6}
          y={6}
          absoluteStrokeWidth
        />
      </Scan>
    </div>
  );
}

export default App;

Open Sandbox

这是有效的，因为SVG 可以嵌套，并且图标上支持所有 SVG 属性。 可以调整 x 和 y 坐标来按你喜欢的位置放置图标。

🌐 This is valid, since SVGs can be nested, 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 native SVG elements

你也可以将 Lucide 图标与原生 SVG 元素结合，以构建自定义图标变体。

🌐 You can also combine Lucide icons with native SVG elements to build custom icon variations.

带通知徽章的示例

🌐 Example with notification badge

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

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

import { Mail } from "lucide-react";

function App() {
  const hasUnreadMessages = true;

  return (
    <div className="app">
      <Mail size={48}>
        {hasUnreadMessages && (
          <circle
            r="3"
            cx="21"
            cy="5"
            stroke="none"
            fill="#F56565"
          />
        )}
      </Mail>
    </div>
  );
}

export default App;

Open Sandbox

带有文本元素的示例

🌐 Example with text element

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

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

import { File } from "lucide-react";

function App() {
  return (
    <div className="app">
      <File size={48}>
        <text
          x={7.5}
          y={19}
          fontSize={8}
          fontFamily="Verdana,sans-serif"
          strokeWidth={1}
        >
          JS
        </text>
      </File>
    </div>
  );
}

export default App;

Open Sandbox