lucide 原生 JS 图标在 Web Components 的 Shadow DOM 中如何渲染【免费下载链接】lucideBeautiful consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.项目地址: https://gitcode.com/GitHub_Trending/lu/lucide在 Web Component 中Shadow DOM 的内容与宿主页面隔离直接往 document 上做的图标替换看不到它。Lucide 官方文档Shadow DOM明确说明Lucide 图标可以在 shadow DOM 内使用。文档给出了原生 JavaScript无框架下的两种做法用createElement创建单个图标并插入 shadow root以及用createIcons批量替换 shadow root 内的i>npm install lucide等价的包管理命令同一文档给出pnpm add lucide、yarn add lucide、bun add lucide。方式一用createElement创建单个图标官方示例代码来自文档的在线沙箱沙箱内置了lucide依赖和打包器index.html!DOCTYPE html html body div idcontainer/div script srcindex.js/script /body /htmlindex.js在本地项目里即你的入口 JS 文件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);步骤含义attachShadow({ mode: open })在#container元素上取得 shadow rootcreateElement(Home)生成Home图标对应的图标元素shadowRoot.appendChild(iconElement)把它插入 shadow DOM。两处说明文档原代码中的import ./styles.css;一行是沙箱模板自带的样式文件引入与图标渲染无关本地复现时删除即可lucide/dist/cjs/lucide是文档沙箱使用的 CJS 入口在常规打包项目里按 Getting started 文档推荐用 ESM 形式导入import { Home, createElement } from lucide;。方式二用createIcons批量渲染多个图标要一次在 shadow DOM 里渲染多个图标用createIcons的root选项指定 shadow root 作为替换范围。官方示例的index.html与方式一相同#container结构index.js为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 contenteditable="false">【免费下载链接】lucideBeautiful consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.项目地址: https://gitcode.com/GitHub_Trending/lu/lucide创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考