影子 DOM

🌐 Shadow DOM

可以在 shadow DOM 中使用 Lucide 图标。

🌐 It's possible to use Lucide icons within a shadow DOM.

使用 createElement 函数的示例

🌐 Example using createElement function

使用 createElement 函数创建一个图标并将其附加到 shadow DOM。

🌐 Using the createElement function to create a single icon and append it to a shadow DOM.

import "./styles.css";
import { Home, createElement } from 'lucide/dist/cjs/lucide';

const container = document.getElementById('container');
const shadowRoot = container.attachShadow({ mode: 'open' });

const iconElement = createElement(Home)
shadowRoot.appendChild(iconElement);

Open Sandbox

使用 createIcons 函数的示例

🌐 Example using createIcons function

如果你想在 shadow DOM 中创建多个图标，你可以使用 createIcons 函数。使用 root 选项，你可以指定 shadow 根作为图标应渲染的根元素。

🌐 If you want to create multiple icons within a shadow DOM, you can use the createIcons function. With the root option, you can specify the shadow root as the root element where the icons should be rendered.

import "./styles.css";
import { TreePalm, Volleyball, Waves, createIcons } from 'lucide/dist/cjs/lucide';

const container = document.getElementById('container');
const shadowRoot = container.attachShadow({ mode: 'open' });

const iconWrapper = document.createElement('div');
iconWrapper.innerHTML = `
<i data-lucide="tree-palm"></i>
<i data-lucide="volleyball"></i>
<i data-lucide="waves"></i>
`;
shadowRoot.appendChild(iconWrapper);

createIcons({
  root: shadowRoot,
  icons: {
    TreePalm,
    Volleyball,
    Waves,
  }
})

Open Sandbox