@pdfme/schemas 5.2.5 → 5.2.7-dev.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/README.md +5 -386
  2. package/dist/cjs/src/barcodes/helper.js +9 -1
  3. package/dist/cjs/src/barcodes/helper.js.map +1 -1
  4. package/dist/cjs/src/barcodes/index.js +3 -3
  5. package/dist/cjs/src/barcodes/index.js.map +1 -1
  6. package/dist/cjs/src/checkbox/index.js +4 -2
  7. package/dist/cjs/src/checkbox/index.js.map +1 -1
  8. package/dist/cjs/src/date/date.js +3 -6
  9. package/dist/cjs/src/date/date.js.map +1 -1
  10. package/dist/cjs/src/date/dateTime.js +3 -1
  11. package/dist/cjs/src/date/dateTime.js.map +1 -1
  12. package/dist/cjs/src/date/time.js +3 -5
  13. package/dist/cjs/src/date/time.js.map +1 -1
  14. package/dist/cjs/src/graphics/image.js +2 -1
  15. package/dist/cjs/src/graphics/image.js.map +1 -1
  16. package/dist/cjs/src/graphics/svg.js +2 -1
  17. package/dist/cjs/src/graphics/svg.js.map +1 -1
  18. package/dist/cjs/src/multiVariableText/index.js +4 -2
  19. package/dist/cjs/src/multiVariableText/index.js.map +1 -1
  20. package/dist/cjs/src/radioGroup/index.js +3 -2
  21. package/dist/cjs/src/radioGroup/index.js.map +1 -1
  22. package/dist/cjs/src/select/index.js +3 -1
  23. package/dist/cjs/src/select/index.js.map +1 -1
  24. package/dist/cjs/src/shapes/line.js +2 -1
  25. package/dist/cjs/src/shapes/line.js.map +1 -1
  26. package/dist/cjs/src/shapes/rectAndEllipse.js +3 -4
  27. package/dist/cjs/src/shapes/rectAndEllipse.js.map +1 -1
  28. package/dist/cjs/src/tables/index.js +3 -1
  29. package/dist/cjs/src/tables/index.js.map +1 -1
  30. package/dist/cjs/src/text/icons/index.js +10 -8
  31. package/dist/cjs/src/text/icons/index.js.map +1 -1
  32. package/dist/cjs/src/text/index.js +3 -1
  33. package/dist/cjs/src/text/index.js.map +1 -1
  34. package/dist/cjs/src/utils.js +15 -1
  35. package/dist/cjs/src/utils.js.map +1 -1
  36. package/dist/esm/src/barcodes/helper.js +9 -1
  37. package/dist/esm/src/barcodes/helper.js.map +1 -1
  38. package/dist/esm/src/barcodes/index.js +3 -3
  39. package/dist/esm/src/barcodes/index.js.map +1 -1
  40. package/dist/esm/src/checkbox/index.js +4 -2
  41. package/dist/esm/src/checkbox/index.js.map +1 -1
  42. package/dist/esm/src/date/date.js +3 -6
  43. package/dist/esm/src/date/date.js.map +1 -1
  44. package/dist/esm/src/date/dateTime.js +3 -1
  45. package/dist/esm/src/date/dateTime.js.map +1 -1
  46. package/dist/esm/src/date/time.js +3 -5
  47. package/dist/esm/src/date/time.js.map +1 -1
  48. package/dist/esm/src/graphics/image.js +3 -2
  49. package/dist/esm/src/graphics/image.js.map +1 -1
  50. package/dist/esm/src/graphics/svg.js +3 -2
  51. package/dist/esm/src/graphics/svg.js.map +1 -1
  52. package/dist/esm/src/multiVariableText/index.js +4 -2
  53. package/dist/esm/src/multiVariableText/index.js.map +1 -1
  54. package/dist/esm/src/radioGroup/index.js +4 -3
  55. package/dist/esm/src/radioGroup/index.js.map +1 -1
  56. package/dist/esm/src/select/index.js +3 -1
  57. package/dist/esm/src/select/index.js.map +1 -1
  58. package/dist/esm/src/shapes/line.js +3 -2
  59. package/dist/esm/src/shapes/line.js.map +1 -1
  60. package/dist/esm/src/shapes/rectAndEllipse.js +4 -5
  61. package/dist/esm/src/shapes/rectAndEllipse.js.map +1 -1
  62. package/dist/esm/src/tables/index.js +3 -1
  63. package/dist/esm/src/tables/index.js.map +1 -1
  64. package/dist/esm/src/text/icons/index.js +9 -7
  65. package/dist/esm/src/text/icons/index.js.map +1 -1
  66. package/dist/esm/src/text/index.js +3 -1
  67. package/dist/esm/src/text/index.js.map +1 -1
  68. package/dist/esm/src/utils.js +13 -0
  69. package/dist/esm/src/utils.js.map +1 -1
  70. package/dist/types/src/text/icons/index.d.ts +7 -7
  71. package/dist/types/src/utils.d.ts +2 -0
  72. package/package.json +3 -2
  73. package/src/barcodes/helper.ts +10 -1
  74. package/src/barcodes/index.ts +3 -4
  75. package/src/checkbox/index.ts +4 -4
  76. package/src/date/date.ts +3 -7
  77. package/src/date/dateTime.ts +3 -2
  78. package/src/date/time.ts +3 -6
  79. package/src/graphics/image.ts +10 -3
  80. package/src/graphics/svg.ts +9 -2
  81. package/src/multiVariableText/index.ts +7 -5
  82. package/src/radioGroup/index.ts +5 -6
  83. package/src/select/index.ts +3 -2
  84. package/src/shapes/line.ts +8 -2
  85. package/src/shapes/rectAndEllipse.ts +4 -8
  86. package/src/tables/index.ts +3 -1
  87. package/src/text/icons/index.ts +18 -8
  88. package/src/text/index.ts +4 -2
  89. package/src/utils.ts +14 -1
@@ -4,7 +4,14 @@ import type { Plugin } from '@pdfme/common';
4
4
  import type { PDFRenderProps, Schema } from '@pdfme/common';
5
5
  import type * as CSS from 'csstype';
6
6
  import { UIRenderProps, px2mm } from '@pdfme/common';
7
- import { convertForPdfLayoutProps, addAlphaToHex, isEditable, readFile } from '../utils.js';
7
+ import { Image } from 'lucide';
8
+ import {
9
+ convertForPdfLayoutProps,
10
+ addAlphaToHex,
11
+ isEditable,
12
+ readFile,
13
+ createSvgStr,
14
+ } from '../utils.js';
8
15
  import { DEFAULT_OPACITY } from '../constants.js';
9
16
  import { getImageDimension } from './imagehelper.js';
10
17
  import { isPdf, pdfToImage } from './pdfHelper.js';
@@ -193,7 +200,7 @@ const imageSchema: Plugin<ImageSchema> = {
193
200
  opacity: DEFAULT_OPACITY,
194
201
  },
195
202
  },
196
- icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',
203
+ icon: createSvgStr(Image),
197
204
  };
198
205
 
199
- export default imageSchema;
206
+ export default imageSchema;
@@ -1,6 +1,13 @@
1
1
  import { Plugin, Schema } from '@pdfme/common';
2
2
  import { XMLValidator } from 'fast-xml-parser';
3
- import { convertForPdfLayoutProps, isEditable, addAlphaToHex, createErrorElm } from '../utils.js';
3
+ import {
4
+ convertForPdfLayoutProps,
5
+ isEditable,
6
+ addAlphaToHex,
7
+ createErrorElm,
8
+ createSvgStr,
9
+ } from '../utils.js';
10
+ import { Route } from 'lucide';
4
11
 
5
12
  const isValidSVG = (svgString: string) => XMLValidator.validate(svgString) === true;
6
13
 
@@ -80,7 +87,7 @@ const svgSchema: Plugin<SVGSchema> = {
80
87
  height: 50,
81
88
  },
82
89
  },
83
- icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-route"><circle cx="6" cy="19" r="3"/><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"/><circle cx="18" cy="5" r="3"/></svg>',
90
+ icon: createSvgStr(Route),
84
91
  };
85
92
 
86
93
  export default svgSchema;
@@ -3,12 +3,14 @@ import { pdfRender } from './pdfRender.js';
3
3
  import { propPanel } from './propPanel.js';
4
4
  import { uiRender } from './uiRender.js';
5
5
  import type { MultiVariableTextSchema } from './types';
6
+ import { Type } from 'lucide';
7
+ import { createSvgStr } from '../utils.js';
6
8
 
7
9
  const schema: Plugin<MultiVariableTextSchema> = {
8
- pdf: pdfRender,
9
- ui: uiRender,
10
- propPanel,
11
- icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-type"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>',
12
- uninterruptedEditMode: true
10
+ pdf: pdfRender,
11
+ ui: uiRender,
12
+ propPanel,
13
+ icon: createSvgStr(Type),
14
+ uninterruptedEditMode: true,
13
15
  };
14
16
  export default schema;
@@ -1,15 +1,14 @@
1
1
  import { Plugin } from '@pdfme/common';
2
2
  import { Schema } from '@pdfme/common';
3
+ import { Circle, CircleDot } from 'lucide';
3
4
  import svg from '../graphics/svg';
4
- import { isEditable } from '../utils.js';
5
+ import { isEditable, createSvgStr } from '../utils.js';
5
6
  import { HEX_COLOR_PATTERN } from '../constants.js';
6
7
 
7
8
  const defaultStroke = 'currentColor';
8
9
 
9
- const getCheckedIcon = (color = defaultStroke) =>
10
- `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/></svg>`;
11
- const getUncheckedIcon = (color = defaultStroke) =>
12
- `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle"><circle cx="12" cy="12" r="10"/></svg>`;
10
+ const getCheckedIcon = (stroke = defaultStroke) => createSvgStr(CircleDot, { stroke });
11
+ const getUncheckedIcon = (stroke = defaultStroke) => createSvgStr(Circle, { stroke });
13
12
 
14
13
  interface RadioGroup extends Schema {
15
14
  group: string;
@@ -35,7 +34,7 @@ const schema: Plugin<RadioGroup> = {
35
34
  const container = document.createElement('div');
36
35
  container.style.width = '100%';
37
36
  container.style.height = '100%';
38
-
37
+
39
38
  if (onChange) {
40
39
  radioButtonStates.set(schema.name, { value, onChange });
41
40
  }
@@ -3,9 +3,10 @@ import { propPanel as parentPropPanel } from '../text/propPanel';
3
3
  import { Plugin, PropPanelWidgetProps, SchemaForUI } from '@pdfme/common';
4
4
  import text from '../text';
5
5
  import { TextSchema } from '../text/types';
6
+ import { ChevronDown } from 'lucide';
7
+ import { createSvgStr } from '../utils.js';
6
8
 
7
- const selectIcon =
8
- '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>';
9
+ const selectIcon = createSvgStr(ChevronDown);
9
10
 
10
11
  interface Select extends TextSchema {
11
12
  options: string[];
@@ -1,6 +1,12 @@
1
1
  import type { Schema, Plugin, PDFRenderProps, UIRenderProps } from '@pdfme/common';
2
- import { rotatePoint, convertForPdfLayoutProps, hex2PrintingColor } from '../utils.js';
2
+ import {
3
+ rotatePoint,
4
+ convertForPdfLayoutProps,
5
+ hex2PrintingColor,
6
+ createSvgStr,
7
+ } from '../utils.js';
3
8
  import { HEX_COLOR_PATTERN } from '../constants.js';
9
+ import { Minus } from 'lucide';
4
10
 
5
11
  const DEFAULT_LINE_COLOR = '#000000';
6
12
 
@@ -60,6 +66,6 @@ const lineSchema: Plugin<LineSchema> = {
60
66
  color: DEFAULT_LINE_COLOR,
61
67
  },
62
68
  },
63
- icon:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"><path d="M5 12h14"/></svg>',
69
+ icon: createSvgStr(Minus),
64
70
  };
65
71
  export default lineSchema;
@@ -1,6 +1,7 @@
1
1
  import { Plugin, Schema, mm2pt } from '@pdfme/common';
2
2
  import { HEX_COLOR_PATTERN } from '../constants.js';
3
- import { hex2PrintingColor, convertForPdfLayoutProps } from '../utils.js';
3
+ import { hex2PrintingColor, convertForPdfLayoutProps, createSvgStr } from '../utils.js';
4
+ import { Circle, Square } from 'lucide';
4
5
 
5
6
  interface ShapeSchema extends Schema {
6
7
  type: 'ellipse' | 'rectangle';
@@ -102,11 +103,6 @@ const shape: Plugin<ShapeSchema> = {
102
103
  },
103
104
  };
104
105
 
105
- const rectangleIcon =
106
- '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square"><rect width="18" height="18" x="3" y="3" rx="2"/></svg>';
107
- const ellipseIcon =
108
- '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle"><circle cx="12" cy="12" r="10"/></svg>';
109
-
110
106
  const getPropPanelSchema = (type: 'rectangle' | 'ellipse') => ({
111
107
  ...shape.propPanel,
112
108
  defaultSchema: {
@@ -118,11 +114,11 @@ const getPropPanelSchema = (type: 'rectangle' | 'ellipse') => ({
118
114
  export const rectangle = {
119
115
  ...shape,
120
116
  propPanel: getPropPanelSchema('rectangle'),
121
- icon: rectangleIcon
117
+ icon: createSvgStr(Square),
122
118
  };
123
119
 
124
120
  export const ellipse = {
125
121
  ...shape,
126
122
  propPanel: getPropPanelSchema('ellipse'),
127
- icon: ellipseIcon
123
+ icon: createSvgStr(Circle),
128
124
  };
@@ -3,11 +3,13 @@ import type { TableSchema } from './types.js';
3
3
  import { pdfRender } from './pdfRender.js';
4
4
  import { uiRender } from './uiRender.js';
5
5
  import { propPanel } from './propPanel.js';
6
+ import { Table } from 'lucide';
7
+ import { createSvgStr } from '../utils.js';
6
8
 
7
9
  const tableSchema: Plugin<TableSchema> = {
8
10
  pdf: pdfRender,
9
11
  ui: uiRender,
10
12
  propPanel,
11
- icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-table"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>',
13
+ icon: createSvgStr(Table),
12
14
  };
13
15
  export default tableSchema;
@@ -1,17 +1,27 @@
1
- // svg icons are material icons from https://www.xicons.org
1
+ import {
2
+ Strikethrough,
3
+ Underline,
4
+ AlignLeft,
5
+ AlignCenter,
6
+ AlignRight,
7
+ ArrowUpToLine,
8
+ ArrowDownToLine,
9
+ } from 'lucide';
10
+ import { createSvgStr } from '../../utils.js';
2
11
 
3
- export const TextStrikethroughIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M6.85 7.08C6.85 4.37 9.45 3 12.24 3c1.64 0 3 .49 3.9 1.28c.77.65 1.46 1.73 1.46 3.24h-3.01c0-.31-.05-.59-.15-.85c-.29-.86-1.2-1.28-2.25-1.28c-1.86 0-2.34 1.02-2.34 1.7c0 .48.25.88.74 1.21c.38.25.77.48 1.41.7H7.39c-.21-.34-.54-.89-.54-1.92zM21 12v-2H3v2h9.62c1.15.45 1.96.75 1.96 1.97c0 1-.81 1.67-2.28 1.67c-1.54 0-2.93-.54-2.93-2.51H6.4c0 .55.08 1.13.24 1.58c.81 2.29 3.29 3.3 5.67 3.3c2.27 0 5.3-.89 5.3-4.05c0-.3-.01-1.16-.48-1.94H21V12z" fill="currentColor"></path></svg>`;
12
+ export const TextStrikethroughIcon = createSvgStr(Strikethrough);
4
13
 
5
- export const TextUnderlineIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" fill="currentColor"></path></svg>`;
14
+ export const TextUnderlineIcon = createSvgStr(Underline);
6
15
 
7
- export const TextAlignLeftIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" fill="currentColor"></path></svg>`;
16
+ export const TextAlignLeftIcon = createSvgStr(AlignLeft);
8
17
 
9
- export const TextAlignCenterIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" fill="currentColor"></path></svg>`;
18
+ export const TextAlignCenterIcon = createSvgStr(AlignCenter);
10
19
 
11
- export const TextAlignRightIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" fill="currentColor"></path></svg>`;
20
+ export const TextAlignRightIcon = createSvgStr(AlignRight);
12
21
 
13
- export const TextVerticalAlignTopIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M8 11h3v10h2V11h3l-4-4l-4 4zM4 3v2h16V3H4z" fill="currentColor"></path></svg>`;
22
+ export const TextVerticalAlignTopIcon = createSvgStr(ArrowUpToLine);
14
23
 
24
+ // svg icons are material icons from https://www.xicons.org
15
25
  export const TextVerticalAlignMiddleIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M8 19h3v4h2v-4h3l-4-4l-4 4zm8-14h-3V1h-2v4H8l4 4l4-4zM4 11v2h16v-2H4z" fill="currentColor"></path></svg>`;
16
26
 
17
- export const TextVerticalAlignBottomIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M16 13h-3V3h-2v10H8l4 4l4-4zM4 19v2h16v-2H4z" fill="currentColor"></path></svg>`;
27
+ export const TextVerticalAlignBottomIcon = createSvgStr(ArrowDownToLine);
package/src/text/index.ts CHANGED
@@ -3,12 +3,14 @@ import { pdfRender } from './pdfRender.js';
3
3
  import { propPanel } from './propPanel.js';
4
4
  import { uiRender } from './uiRender.js';
5
5
  import type { TextSchema } from './types';
6
+ import { TextCursorInput } from 'lucide';
7
+ import { createSvgStr } from '../utils.js';
6
8
 
7
9
  const textSchema: Plugin<TextSchema> = {
8
10
  pdf: pdfRender,
9
11
  ui: uiRender,
10
12
  propPanel,
11
- icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text-cursor-input"><path d="M5 4h1a3 3 0 0 1 3 3 3 3 0 0 1 3-3h1"/><path d="M13 20h-1a3 3 0 0 1-3-3 3 3 0 0 1-3 3H5"/><path d="M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"/><path d="M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"/><path d="M9 7v10"/></svg>',
13
+ icon: createSvgStr(TextCursorInput),
12
14
  };
13
15
 
14
- export default textSchema;
16
+ export default textSchema;
package/src/utils.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import type * as CSS from 'csstype';
2
2
  import { cmyk, degrees, degreesToRadians, rgb } from '@pdfme/pdf-lib';
3
3
  import { Schema, mm2pt, Mode, isHexValid, ColorType } from '@pdfme/common';
4
+ import { IconNode, createElement } from 'lucide';
4
5
  import { getDynamicHeightsForTable as _getDynamicHeightsForTable } from './tables/dynamicTemplate.js';
5
-
6
6
  export const convertForPdfLayoutProps = ({
7
7
  schema,
8
8
  pageHeight,
@@ -208,3 +208,16 @@ export const createErrorElm = () => {
208
208
 
209
209
  return container;
210
210
  };
211
+
212
+ export const createSvgStr = (icon: IconNode, attrs?: Record<string, string>): string => {
213
+ if (typeof window === 'undefined') {
214
+ return '';
215
+ }
216
+ const svg = createElement(icon);
217
+ if (attrs) {
218
+ Object.entries(attrs).forEach(([key, value]) => {
219
+ svg.setAttribute(key, value);
220
+ });
221
+ }
222
+ return new XMLSerializer().serializeToString(svg);
223
+ };