I would like to have a route in NextJS 13 (app router) which can serve svg images after importing it form the lucide-react package.

How can I do it ?

I tried doing this

// app/api/icon/[name]/route.js
import * as icons from 'lucide-react';
import { createElement } from 'react';
import { renderToString } from 'react-dom/server';
import { NextResponse } from 'next/server';

export async function GET(request, { params }) {
  const name = params.name;
  const Icon = icons[name];

  if (!Icon) {
    return new NextResponse('Icon not found', { status: 404 });
  }

  const svgString = renderToString(
    createElement(Icon, { color: 'currentColor', size: 24 })
  );

  return new NextResponse(svgString, {
    headers: { 'Content-Type': 'image/svg+xml' },
  });
}

but i gave me this error

⨯ ./src/app/api/icon/[name]/route.ts
Error:
  × You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
  │ Learn more: https://nextjs.org/docs/getting-started/react-essentials
   ╭─[D:Codingallweone-websitesrcappapiicon[name]route.ts:1:1]
 1 │ // app/api/icon/[name]/route.js
 2 │ import * as icons from "lucide-react";
 3 │ import { createElement } from "react";
 4 │ import { renderToString } from "react-dom/server";
   · ──────────────────────────────────────────────────
 5 │ import { NextResponse } from "next/server";
 6 │
 6 │ export async function GET(request, { params }: { params: { name: string } }) {
   ╰────
Import trace for requested module:
./src/app/api/icon/[name]/route.ts
 GET /api/icon/HOME 500 in 16327ms

How can I solve this ?