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/lucide
lucide 的createIcons默认只处理文档中直接渲染的元素：<template>标签内部的data-lucide占位图标默认不会被替换成 SVG。如果你的业务里用<template>存放重复的卡片、列表行等模板片段，再配合document.importNode克隆使用，就需要额外开启createIcons的inTemplates选项，让占位图标在模板内容（template.content）中先被替换，后续克隆出来的节点才会带上真正的图标。
以下内容适用于 Vanilla JavaScript 项目（lucide 文档的 Getting started 指南面向的就是原生 JS 环境，项目本身可以用 Vite、Parcel 等脚手架创建）。完成后的结果：<template>内容里的<i>pnpm add lucide
yarn add lucidenpm install lucidebun add lucide在 HTML 中放置占位图标
按文档示例，把data-lucide占位元素放进<template>内，并准备一个用来挂载克隆结果的容器：
<!DOCTYPE html> <html> <body> <template id="template"> <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-lucide="backpack"的图标名，占位图标需要用到的图标都要包含在这个对象里。
inTemplates是createIcons的四个附加选项之一，文档原文说明其作用是 "also replace icons inside<template>tags"。
把替换后的图标带进页面
替换完成后，图标位于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 src="https://unpkg.com/lucide@latest"></script> <script> lucide.createIcons(); </script>
同样的，需要覆盖<template>时把选项传进去即可，例如lucide.createIcons({ inTemplates: true });（CDN 构建自带全部图标，无需手动传入icons映射）。
与当前场景相关的其他createIcons选项，按文档说明：
nameAttr：调整用于查找图标的属性名，默认就是data-lucide；root：指定替换所发生的 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），仅供参考
