Angular 项目如何从 lucide-angular 迁移到 lucide/angular 并替换动态图标选择器【免费下载链接】lucideBeautiful consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.项目地址: https://gitcode.com/GitHub_Trending/lu/lucide如果你的 Angular 项目还在使用旧包lucide-angularLucideAngularModule.pick(...)注册图标、lucide-angular/lucide-icon渲染图标需要迁移到 Lucide v1 提供的现代实现lucide/angular把图标注册从 NgModule 改为信号化的 standalone 方案并把所有旧选择器替换为svg元素其中运行时才确定图标的动态选择器lucide-icon [name]...要换成svg [lucideIcon]...。本文依据仓库中的迁移文档 docs/guide/angular/migration.md 给出完整操作路径。前提条件来自 docs/guide/angular/getting-started.md已有一个可用的 Angular 项目lucide/angular要求Angular 17库本身使用 standalone components、signals 和 zoneless change detection。第一步更新依赖移除lucide-angular安装lucide/angular。安装命令按你的包管理器任选其一# npm npm install lucide/angular # pnpm pnpm add lucide/angular # yarn yarn add lucide/angular # bun bun add lucide/angular同时记得从package.json中删掉lucide-angular并清理所有from lucide-angular的导入。第二步用provideLucideIcons(...)替换LucideAngularModule.pick(...)旧代码里LucideAngularModule.pick(...)的职责是把图标注册进应用新包用provideLucideIcons(...)完成同样的事且导入名从AirVent/AlarmClock这类改为LucideAirVent/LucideAlarmClock。迁移前NgModule 方式import { BrowserModule, NgModule } from angular/core; import { LucideAngularModule, AirVent, AlarmClock } from lucide-angular; NgModule({ imports: [ BrowserModule, LucideAngularModule.pick({ AirVent, AlarmClock }), ], }) export class AppModule {}迁移前standalone /ApplicationConfig方式import { ApplicationConfig } from angular/core; import { LucideAngularModule, AirVent, AlarmClock } from lucide-angular; export const appConfig: ApplicationConfig { providers: [ // ... importProvidersFrom(LucideAngularModule.pick({ AirVent, AlarmClock })), ] };迁移后import { ApplicationConfig } from angular/core; import { provideLucideIcons, LucideAirVent, LucideAlarmClock } from lucide/angular; export const appConfig: ApplicationConfig { providers: [ // ... provideLucideIcons( LucideAirVent, LucideAlarmClock, ), ] };注意provideLucideIcons(...)主要服务于按名称渲染的动态图标。如果你的项目几乎全是静态图标在模板里直接写死svg lucideXxx/svg迁移文档说明这种情况下可能完全不需要调用provideLucideIcons。第三步替换旧图标选择器旧包通过单一组件渲染所有图标lucide-angular、lucide-icon、i-lucide、span-lucide这些选择器在新包中都不再存在全部要迁移到svg用法。按使用方式分三类处理。A. 编译期确定的静态图标图标名在构建期已知时直接使用静态导入的 per-icon 组件可 tree-shaking!-- Before -- lucide-angular namecircle-check/lucide-angular!-- After -- svg lucideCircleCheck/svgB. 旧模板通过[img]绑定图标数据// Before import { CircleCheck } from lucide-angular;lucide-icon [img]CircleCheck/lucide-icon// After import { LucideCircleCheck } from lucide/angular;svg lucideCircleCheck/svg即把数据绑定改回静态导入 静态 directive 的写法。C. 动态图标替换动态选择器当图标在运行时才确定比如菜单列表、根据状态切换时使用动态组件旧绑定表达式保持不变!-- Before -- lucide-icon [name]item.icon/lucide-icon!-- After -- svg [lucideIcon]item.icon/svg这里有两个文档明确的适用条件模板中使用svg [lucideIcon]需要在所在组件的imports中引入LucideDynamicIcon组件见 docs/guide/angular/getting-started.md 的 Dynamic icon component 示例import { Component, computed, signal } from angular/core; import { LucideDynamicIcon, LucideCircleCheck, LucideCircleX } from lucide/angular; Component({ selector: app, template: svg [lucideIcon]icon()/svg, imports: [LucideDynamicIcon], }) export class App { protected readonly model signalboolean(true); protected readonly icon computed(() (this.model() ? LucideCircleCheck : LucideCircleX)); }如果你的表达式产生的是图标名字符串而不是图标组件引用该图标必须先通过provideLucideIcons(...)注册。按名称解析的规则见 docs/guide/angular/advanced/icon-provider.md内置图标通常以 kebab-case 名称可用例如注册LucideSquareCheck后即可写svg lucideIconsquare-check/svg图标定义的别名也会自动注册。可选分支如果你手里有旧格式的自定义图标节点数据匹配lucide-angular或lucide/lab的 legacy node 格式可以用lucideLegacyIcon/lucideLegacyIconMap转换后注册例如import { ApplicationConfig } from angular/core; import { provideLucideIcons, lucideLegacyIcon } from lucide/angular; import { CirclePlayIcon } from lucide-angular; import { burger } from lucide/lab; export const appConfig: ApplicationConfig { providers: [ provideLucideIcons( lucideLegacyIcon(circle-play, CirclePlayIcon, [play-circle]), lucideLegacyIcon(burger, burger, [hamburger]), ), ], };品牌图标需要手动替换Lucide v1 已移除全部品牌图标Chromium、Codepen、Codesandbox、Dribbble、Facebook、Figma、Framer、Github、Gitlab、Instagram、LinkedIn、Pocket、RailSymbol、Slack。如果你的项目用到了其中任何一个迁移时没有自动对应项需要替换为自定义 SVG 或其他图标迁移文档建议优先使用各品牌官网/品牌指南提供的官方 SVG或使用 Simple Icons文档同时提到有支持 standalone component 的 Simple Icons Angular 包可用。第四步全局默认值改用provideLucideConfig()旧的LucideIconConfig注入方式改为 provider 配置// Before import { inject } from angular/core; import { LucideIconConfig } from lucide-angular; inject(LucideIconConfig).size 12;// After import { provideLucideConfig } from lucide/angular; providers: [ provideLucideConfig({ size: 12 }), ]放置位置按生效范围选择应用级放在AppModule.providers或bootstrapApplication(...providers)功能模块级放在 feature module 的 providers组件级standalone放在组件的providers中。验证与排查迁移完成的判断标准是所有图标仍按预期渲染现在渲染为svg元素且不再有任何来自lucide-angular的导入。迁移文档 docs/guide/angular/migration.md 给出了三类常见问题的检查方法图标不显示使用 per-icon 组件时确认对应图标组件已被导入且图标名完全匹配区分大小写。使用动态组件时如果按字符串名称引用确认该图标已通过provideLucideIcons()提供并确认图标是从lucide/angular而非旧包导入。TypeScript 报错检查导入来源是否为lucide/angular而不是lucide-angular。图标渲染使用了错误的全局默认值检查provideLucideConfig()是否放在了正确的层级应用级 / 功能级 / 组件级。迁移速查迁移文档给出的映射总表TL;DR旧lucide-angular新lucide/angularLucideAngularModule静态图标移除改用 per-icon standalone 组件LucideAngularModule动态图标LucideIcon动态组件LucideAngularModule.pick(...)provideLucideIcons(...)lucide-angular namefoo-barsvg lucideFooBarlucide-icon [name]exprsvg [lucideIcon]exprlucide-icon [img]exprsvg [lucideIcon]exprLucideIconConfigprovideLucideConfig(...)品牌图标替换为simple-icons等来源补充背景lucide/angular是 Lucide v1 引入的现代化 Angular 实现v1 的完整变更移除品牌图标、aria-hidden默认开启、包结构等见 docs/guide/version-1.md。【免费下载链接】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），仅供参考