lucide 原生 JS 如何替换 模板元素里的 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/lucidelucide 的createIcons默认只处理文档中直接渲染的元素template标签内部的data-lucide占位图标默认不会被替换成 SVG。如果你的业务里用template存放重复的卡片、列表行等模板片段再配合document.importNode克隆使用就需要额外开启createIcons的inTemplates选项让占位图标在模板内容template.content中先被替换后续克隆出来的节点才会带上真正的图标。以下内容适用于 Vanilla JavaScript 项目lucide 文档的 Getting started 指南面向的就是原生 JS 环境项目本身可以用 Vite、Parcel 等脚手架创建。完成后的结果template内容里的i>pnpm add lucideyarn add lucidenpm install lucidebun add lucide在 HTML 中放置占位图标按文档示例把data-lucide占位元素放进template内并准备一个用来挂载克隆结果的容器!DOCTYPE html html body template idtemplate i>import { createIcons, Backpack } from lucide/dist/cjs/lucide; import ./styles.css; createIcons({ icons: { Backpack, }, inTemplates: true });文档推荐只引入用到的图标而不是import { createIcons, icons } from lucide后把icons全量传入——后者会把所有图标打进 bundle。icons对象中的键Backpack对应模板里data-lucidebackpack的图标名占位图标需要用到的图标都要包含在这个对象里。inTemplates是createIcons的四个附加选项之一文档原文说明其作用是 also replace icons insidetemplatetags。把替换后的图标带进页面替换完成后图标位于template.content这个片段中template本身不会渲染。文档示例用document.importNode深度克隆内容并挂到容器上const container document.getElementById(container); const template document.getElementById(template); const firstClone document.importNode(template.content, true); container.appendChild(firstClone); const secondClone document.importNode(template.content, true); container.appendChild(secondClone);示例连续克隆两次是为了展示同一段模板内容可以被复用为多个实例——因为替换发生在template.content上后续每次克隆拿到的都是已包含 SVG 的版本。结果验证按上面文档示例的代码运行页面后预期表现为#container内出现两份从模板克隆出的节点节点中原本写着i>script srchttps://unpkg.com/lucidelatest/script script lucide.createIcons(); /script同样的需要覆盖template时把选项传进去即可例如lucide.createIcons({ inTemplates: true });CDN 构建自带全部图标无需手动传入icons映射。与当前场景相关的其他createIcons选项按文档说明nameAttr调整用于查找图标的属性名默认就是data-lucideroot指定替换所发生的 DOM 元素适合只处理大 DOM 中的小区域或 Shadow DOM 内的元素——如果你只在某个局部容器内操作可以通过它限定替换范围attrs为生成的 SVG 附加自定义属性例如 CSS class 或 stroke 相关配置。这些选项与inTemplates互不冲突可以在同一次createIcons调用中一起传入。更多细节见仓库中的 Content Template element 文档 和 Getting started 文档。【免费下载链接】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），仅供参考
