如何在lucide-angular中添加并使用自定义SVG图标

1. 修正自定义图标解析与导出代码 #

你的custom-icons.ts存在格式不匹配问题，LucideIcons要求是键值对结构（图标名称: 图标数据），且SVG解析需要完整处理节点层级。修正后的代码如下：

import { LucideIconData, LucideIcons } from "lucide-angular/icons/types";
import { parseSync } from "svgson";

// 递归解析SVG节点，适配LucideIconData的结构要求
function parseSvgNode(node: any): LucideIconData[number] {
  const children = node.children?.map(parseSvgNode) || [];
  return [node.name, node.attributes, children.length > 0 ? children : undefined];
}

function svgToLucideIconData(svgString: string): LucideIconData {
  const parsed = parseSync(svgString);
  // 取SVG根节点的子元素作为图标核心内容
  return parsed.children.map(parseSvgNode);
}

// 给自定义图标命名，示例名称为"my-custom-icon"，可自行修改
export const myIcons: LucideIcons = {
  "my-custom-icon": svgToLucideIconData(`
    <!-- 替换成你的实际SVG代码 -->
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10"></circle>
      <line x1="12" y1="8" x2="12" y2="12"></line>
      <line x1="12" y1="16" x2="12.01" y2="16"></line>
    </svg>
  `)
};

2. 修正模块注册逻辑 #

确保LucideIconProvider传入正确的图标对象，模块注册代码调整如下：

import { LucideAngularModule, icons } from 'lucide-angular';
import { myIcons } from './custom-icons';
import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';

@NgModule({
  imports: [
    // 导入需要的官方图标，示例导入search和home
    LucideAngularModule.pick({ search: icons.search, home: icons.home })
  ],
  exports: [LucideAngularModule],
  providers: [
    {
      provide: LUCIDE_ICONS,
      multi: true,
      useValue: new LucideIconProvider(myIcons)
    }
  ]
})
export class SharedModule { }

3. 调用自定义图标 #

注册完成后，直接通过你定义的图标名称在模板中使用：

<!-- 基础用法 -->
<lucide-icon name="my-custom-icon"></lucide-icon>

<!-- 自定义尺寸、颜色 -->
<lucide-icon name="my-custom-icon" size="32" color="#ff0000"></lucide-icon>

验证图标是否成功注册 #

可以在任意组件中注入LucideIconsRegistry验证：

import { Component, OnInit } from '@angular/core';
import { LucideIconsRegistry } from 'lucide-angular';

@Component({
  selector: 'app-test',
  template: '<lucide-icon name="my-custom-icon"></lucide-icon>'
})
export class TestComponent implements OnInit {
  constructor(private iconRegistry: LucideIconsRegistry) {}

  ngOnInit(): void {
    // 控制台输出true则表示注册成功
    console.log('自定义图标注册状态:', this.iconRegistry.has('my-custom-icon'));
  }
}

内容的提问来源于stack exchange，提问作者rotarm