Use ?url imports on svgs to fix production build issue with rich text component icons (#27)

Fixes #24

Author: danielnaab

packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx

@@ -2,13 +2,13 @@ import React, { useState, useRef, useEffect } from 'react';
 import { defaultFormConfig, type PatternConfig } from '@flexion/forms-core';
 import { useFormManagerStore } from '../store.js';
 import styles from './formEditStyles.module.css';
-import blockIcon from './images/block-icon.svg';
-import checkboxIcon from './images/checkbox-icon.svg';
-import longAnswerIcon from './images/long-answer-icon.svg';
-import pageIcon from './images/page-icon.svg';
-import shortAnswerIcon from './images/short-answer-icon.svg';
-import multipleChoiceIcon from './images/radio-options-icon.svg';
-import templateIcon from './images/template-icon.svg';
+import blockIcon from './images/block-icon.svg?url';
+import checkboxIcon from './images/checkbox-icon.svg?url';
+import longAnswerIcon from './images/long-answer-icon.svg?url';
+import pageIcon from './images/page-icon.svg?url';
+import shortAnswerIcon from './images/short-answer-icon.svg?url';
+import multipleChoiceIcon from './images/radio-options-icon.svg?url';
+import templateIcon from './images/template-icon.svg?url';
 
 import classNames from 'classnames';
 import { enLocale as message } from '@flexion/forms-common';

packages/design/src/FormManager/FormEdit/components/RichTextPatternEdit/RichTextPatternEdit.tsx

@@ -21,15 +21,14 @@ import { useFormManagerStore } from '../../../store.js';
 import { PatternEditComponent } from '../../types.js';
 import styles from './richTextPatternEditStyles.module.css';
 
-import boldSvg from './images/format_bold.svg';
-import italicSvg from './images/format_italic.svg';
-import bulletListSvg from './images/format_list_bulleted.svg';
-import orderedListSvg from './images/format_list_numbered.svg';
-import headingSvg from './images/format_h2.svg';
-import subheadingSvg from './images/format_h3.svg';
+import boldSvg from './images/format_bold.svg?url';
+import italicSvg from './images/format_italic.svg?url';
+import bulletListSvg from './images/format_list_bulleted.svg?url';
+import orderedListSvg from './images/format_list_numbered.svg?url';
+import headingSvg from './images/format_h2.svg?url';
+import subheadingSvg from './images/format_h3.svg?url';
 
-// eslint-disable-next-line  @typescript-eslint/no-explicit-any
-const icons: Record<string, string | any> = {
+const icons: Record<string, string> = {
   'format_h2.svg': headingSvg,
   'format_h3.svg': subheadingSvg,
   'format_bold.svg': boldSvg,
@@ -39,7 +38,7 @@ const icons: Record<string, string | any> = {
 };
 
 const getIconPath = (iconPath: string) => {
-  return Object.values(icons[iconPath])[0] as string;
+  return icons[iconPath];
 };
 
 interface MenuBarProps {