How to add custom icons in lucide angular and how to use them

I'm using lucide-angular for icons and I'm trying to add some custom icons for which i already have svgs. The documentation is very brief on how to add custom icons and has nothing on how to actually use them after they're added.

Here's what i tried:

This is in a separate custom-icons.ts file:

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

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

function getLucideIcons(data: LucideIconData): LucideIcons {
    return { data };
}

const icon = getLucideIcons(svgToLucideIconData('someSvg'));

export const myIcons = icon;

and i have this in my module:

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

@NgModule({
    imports: [
        LucideAngularModule.pick({ icons... })
    ],
    exports: [
        LucideAngularModule
    ],
    providers: [
        {
          provide: LUCIDE_ICONS,
          multi: true,
          useValue: new LucideIconProvider(myIcons)
        }
    ]
})
export class SharedModule { }

I have no idea if my custom icon is even added, much less how to use it afterwards as there is no documentation on how the icon name is provided. I've been browsing for answers for the past few days and always hit a dead end so any help will be highly appreciated.

Solution

I got your requirement working, but there is a catch. We can only have svg's with a viewbox size of 0 0 24 24 anything other than that is not visible (e.g fontawesome (512) google fonts, etc).

Why this happens is because in this package the SVG size is hardcoded and in the source code there is no option to customize it.

I have used iconsvg.xyz to get it working:

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