news 2026/9/13 12:59:09

lucide 原生 JavaScript 如何混用 Lucide Lab 图标与自定义图标？

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
lucide 原生 JavaScript 如何混用 Lucide Lab 图标与自定义图标？

lucide 原生 JavaScript 如何混用 Lucide Lab 图标与自定义图标？

【免费下载链接】lucideBeautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.项目地址: https://gitcode.com/GitHub_Trending/lu/lucide

在只有 HTML + 原生 JavaScript（Vanilla JavaScript）的项目里，页面需要同时显示 Lucide 主库图标、主库之外收录在 Lucide Lab 的图标，以及自己编写的自定义 SVG 图标。Lucide Lab 是“不属于 Lucide 主库”的图标集合，通过@lucide/lab包引入；原生 JavaScript 版本的做法是：HTML 中写<i>pnpm add lucide @lucide/lab

yarn add lucide @lucide/lab
npm install lucide @lucide/lab
bun add lucide @lucide/lab

以上四条任选其一，按你项目实际使用的包管理器执行即可。

写 HTML 占位元素

Lucide 是 ES Modules 构建的，完全可 tree-shaking。createIcons的工作方式是查找带data-lucide属性的元素，并将其替换成给定图标名对应的 SVG。在 HTML 中为每个图标写一个占位元素：

<!DOCTYPE html> <html> <body> <i>import { createIcons, Smile } from 'lucide/dist/cjs/lucide'; import { avocado as Avocado } from '@lucide/lab'; createIcons({ icons: { Avocado, } });

icons参数接收一个“图标 key → iconNode”的对象。Lab 图标从@lucide/lab按名字导入（例如avocado），自定义图标则是你自己构造的 iconNode 数据结构。官方文档在框架版本（如 Astro、Preact、React）的示例中展示了自定义 iconNode 的写法，即以IconNode类型描述的二维数组，元素形如["circle", { cx: "12", cy: "8", r: "5" }]：

--- const customIcon: IconNode = [ ["circle", { cx: "12", cy: "8", r: "5" }] ]; --- <Icon iconNode={customIcon} size="24" color="blue" />

在原生 JavaScript 中，同样的二维数组就是传给icons的值。把 Lab 图标和自定义图标放进同一个icons对象，即可在一次createIcons调用中混用：

import { createIcons } from 'lucide'; import { avocado as Avocado } from '@lucide/lab'; // 自定义图标的 iconNode：二维数组，元素为 [SVG 标签名, 属性对象] const myRocket = [ ["path", { d: "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" }], ["path", { d: "M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" }], ["path", { d: "M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" }], ["path", { d: "M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" }] ]; createIcons({ icons: { Avocado, 'my-rocket': myRocket, } });

两点说明：

  • 官方 Vanilla JS 文档只完整示范了 Lab 图标的注册；自定义 iconNode 的数组结构来自框架版文档示例，原生 JavaScript 中写法去掉类型标注、直接作为普通对象传入即可。
  • 自定义图标的d、cx、cy等属性值必须是你自己设计的 SVG 路径，官方示例中的值（如cx: "12", cy: "8", r: "5"）只用于展示结构，不要原样当作最终图形使用。

用 attrs 给混合图标统一设置样式

createIcons支持额外参数，其中attrs用于传递附加自定义属性（例如 CSS 类或描边选项），对所有被替换的图标生效。官方完整示例：

import { createIcons } from 'lucide'; createIcons({ attrs: { class: ['my-custom-class', 'icon'], 'stroke-width': 1, stroke: '#333' }, nameAttr: 'data-lucide', // attribute for the icon name. root: element, // DOM element to replace icons in. inTemplates: true // Also replace icons inside <template> tags. });

其中attrs控制颜色、描边宽度这类统一外观；nameAttr可调整用于替换图标的属性名（默认即data-lucide）；root指定在哪个 DOM 元素范围内替换图标（适合操作大型 DOM 的局部区域或 Shadow DOM 内的元素）；inTemplates: true表示连<template>标签里的图标也一并替换。只需默认行为时，传icons一个参数即可。Lab 图标与常规 lucide 图标一样，可接收调整外观的属性参数。

如何验证替换成功

createIcons的行为定义是：搜索data-lucide属性元素并替换为 SVG。因此验证方式是检查 DOM：

  • 页面加载并执行createIcons后，原来写<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），仅供参考

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/9/13 12:57:43

MATLAB车牌识别GUI：可调试的传统图像处理工作流

简介&#xff1a;这是一份基于MATLAB实现的车牌识别GUI应用资源&#xff0c;面向计算机视觉初学者、图像处理课程学习者及智能交通系统入门开发者&#xff0c;旨在提供一个开箱即用的可视化车牌识别工具&#xff0c;解决无编程基础用户快速体验字符识别全流程的需求。压缩包共3…

作者头像 李华
网站建设 2026/9/13 12:55:04

用Python和Pillow构建艺术签名生成器：从字体渲染到API封装

简介&#xff1a;这是一份面向Python初中级开发者的艺术签名生成器项目源码&#xff0c;解决用户输入姓名后自动生成个性化签名并导出图片的需求。项目基于Tkinter搭建图形界面&#xff0c;借助Pillow库处理字体与图像&#xff0c;支持加载不同字体文件&#xff0c;并综合运用字…

作者头像 李华
网站建设 2026/9/13 12:49:58

面向开发者的LLM实战入门：从API调用到中文RAG搭建

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华