Typescript 如何在LucideAngular 添加自定义图标以及如何使用它们

我让你的要求起作用了，但有个问题.我们只能有视框大小为0 0 24 24的SVG，除此之外的任何东西都是不可见的(例如，字体(512)，谷歌字体等).

之所以会发生这种情况，是因为在这个包中，SVG大小是硬编码的，并且在源代码中没有定制它的选项.

我已经用了iconsvg.xyz最终让它工作，一定要参考下面的工作代码，希望你的问题得到解决！

完整代码

import { Component } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {
  LucideAngularModule,
  File,
  Home,
  Menu,
  UserCheck,
  LUCIDE_ICONS,
  LucideIconProvider,
} from 'lucide-angular';

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import 'zone.js';
const routes: Routes = [];
import { LucideIcons, LucideIconData } from 'lucide-angular/icons/types';
import { parseSync } from 'svgson';

function svgToLucideIconData(svgString: string): LucideIconData {
  const parsed = parseSync(svgString);
  console.log(parsed);
  return parsed.children.map((n: any) => [n.name, n.attributes]);
}

function getLucideIcons(data: LucideIconData): LucideIcons {
  return { Qwerty: data }; // this is the icon name! must be uppercase!
}

const icons = getLucideIcons(
  svgToLucideIconData(
    `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V6M5 12l7-7 7 7"/></svg>`
  )
);

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

@Component({
  selector: 'app-root',
  template: `
    <span-lucide name="qwerty" class="my-icon"></span-lucide>
    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg>
  `,
})
export class App {
  name = 'Angular';
}

@NgModule({
  declarations: [App],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LucideAngularModule.pick({ File, Home, Menu, UserCheck }),
  ],
  providers: [
    {
      provide: LUCIDE_ICONS,
      multi: true,
      useValue: new LucideIconProvider(icons),
    },
  ],
  bootstrap: [App],
})
export class AppModule {}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err: any) => console.error(err));

Working stackblitz个