Use SVGR for icons

Dnn.AdminExperience/ClientSide/AdminLogs.Web/src/components/LogSettings/LogSettingRow/index.jsx

@@ -68,7 +68,8 @@ class LogSettingRow extends Component {
                         {props.fileName}&nbsp; </GridCell>
                     {!props.readOnly &&
                         <GridCell columnSize={5} >
-                            <div className={"edit-icon " + !opened} dangerouslySetInnerHTML={{ __html: SvgIcons.EditIcon }} onClick={this.toggle.bind(this) }>
+                            <div className={"edit-icon " + !opened} onClick={this.toggle.bind(this) }>
+                                <SvgIcons.EditIcon />
                             </div>
                         </GridCell>
                     }

Dnn.AdminExperience/ClientSide/AdminLogs.Web/src/components/LogSettings/index.jsx

@@ -122,7 +122,7 @@ class LogSettingsPanel extends Component {
                     {canEdit &&
                         <div className="add-setting-row" onClick={this.toggle.bind(this, opened ? "" : "add") }>
                             <div className={"add-setting-box " + !opened}>
-                                <div className={"add-icon"} dangerouslySetInnerHTML={{ __html: SvgIcons.AddIcon }}>
+                                <div className={"add-icon"}><SvgIcons.AddIcon />
                                 </div> {Localization.get("AddContent.Action") }
                             </div>
                         </div>

Dnn.AdminExperience/ClientSide/Bundle.Web/src/components/BackTo/BackTo.jsx

@@ -9,7 +9,7 @@ const BackToMain = ({onClick, label}) => {
         <div         
             className={styles.backTo} 
             onClick={onClick}>
-            <div className="icon" dangerouslySetInnerHTML={{ __html: ArrowBack }} />
+            <div className="icon"><ArrowBack /></div>
             <span>{label}</span>
         </div>
     );

Dnn.AdminExperience/ClientSide/Dnn.React.Common/dist.webpack.config.js

@@ -41,7 +41,7 @@ module.exports = {
             { test: /\.(ttf|woff)$/, use: ["url-loader?limit=8192"] },
             { test: /\.css$/, use: ["style-loader!css-loader"] },
             { test: /\.(gif|png)$/, use: ["url-loader?mimetype=image/png"] },
-            { test: /\.(svg)$/, use: ["raw-loader"] },
+            { test: /\.(svg)$/, issuer: /\.[jt]sx?$/, use: ["@svgr/webpack"], },
             { test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/, use: ["url-loader?mimetype=application/font-woff"] },
             { test: /\.(ttf|eot)(\?v=[0-9].[0-9].[0-9])?$/, use: ["file-loader?name=[name].[ext]"] }
         ]

Dnn.AdminExperience/ClientSide/Dnn.React.Common/package.json

@@ -57,6 +57,7 @@
     "@storybook/addon-onboarding": "9.1.13",
     "@storybook/addon-webpack5-compiler-swc": "4.0.1",
     "@storybook/react-webpack5": "9.1.13",
+    "@svgr/webpack": "^8.1.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^10.0.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/BackToLink/index.jsx

@@ -7,7 +7,7 @@ import "./style.less";
 const BackToLink = ({text, children, className, onClick, style, arrowStyle}) => { 
     return (
         <a className={"dnn-back-to-link" + (className ? (" " + className) : "")} style={style} onClick={onClick}>
-            <div style={arrowStyle} className="dnn-back-to-arrow" dangerouslySetInnerHTML={{__html: ArrowBack }} />
+            <div style={arrowStyle} className="dnn-back-to-arrow"><ArrowBack /></div>
             <span>{text}</span>
             {children}
         </a> 

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/ContentLoadWrapper/contentloadwrapper.stories.js

@@ -18,7 +18,7 @@ class MyContentLoadWrapper extends Component {
         return (
             <ContentLoadWrapper
                 loadComplete={this.state.loaded}
-                svgSkeleton={<div dangerouslySetInnerHTML={{ __html: TableEmptyState }} />}
+                svgSkeleton={<div><TableEmptyState /></div>}
             >
                 <div>
                     <div className="auditCheckItems">
@@ -41,7 +41,7 @@ export default {
 export const WithLoading = () => (
     <ContentLoadWrapper
         loadComplete={false}
-        svgSkeleton={<div dangerouslySetInnerHTML={{ __html: TableEmptyState }} />}
+        svgSkeleton={<div><TableEmptyState /></div>}
     >
         <div>
             <div className="auditcheck-topbar">Loading...</div>
@@ -60,7 +60,7 @@ export const WithLoading = () => (
 export const WithContent = () => (
     <ContentLoadWrapper
         loadComplete={true}
-        svgSkeleton={<div dangerouslySetInnerHTML={{ __html: TableEmptyState }} />}
+        svgSkeleton={<div><TableEmptyState /></div>}
     >
         <div>
             <div className="auditcheck-topbar">

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/ContentLoadWrapper/index.jsx

@@ -93,7 +93,7 @@ export default class ContentLoadWrapper extends Component {
             {this.props.loadError &&
                 <div className="try-load-again">
                     <div>
-                        <div className="upload-icon" dangerouslySetInnerHTML={{ __html: ErrorStateIcon }} />
+                        <div className="upload-icon">ErrorStateIcon</div>
                         <p>{this.props.failedToLoadText}</p>
                         <span onClick={this.onTryAgain.bind(this)}>[{this.props.tryAgainText}]</span>
                     </div>

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DatePicker/index.jsx

@@ -6,6 +6,9 @@ import TimePicker from "./TimePicker";
 import TimezonePicker from "./TimezonePicker";
 import timeZones from "./timeZones";
 import DateInput from "./DateInput";
+import CalendarIcon from "./img/calendar.svg";
+import CalendarEndIcon from "./img/calendar_end.svg";
+import CalendarStartIcon from "./img/calendar_start.svg";
 import "./style.less";
 
 const DefaultControllerClassName = "calendar-controller";
@@ -352,10 +355,9 @@ class DatePicker extends Component {
         const showIcon = this.props.showIcon !== false;
         const showInput = this.props.showInput !== false;
 
-        const mode = this.props.mode ? "_" + this.props.mode : "";
-        let icon = require(`./img/calendar${mode}.svg`).default;
+        let Icon = this.props.mode === "start" ? CalendarStartIcon : this.props.mode === "end" ? CalendarEndIcon : CalendarIcon;
         if (this.props.icon) {
-            icon = this.props.icon;
+            Icon = this.props.icon;
         }
 
         const style = this.props.isDateRange && this.props.hasTimePicker ? {width: 380} : {}; 
@@ -380,9 +382,8 @@ class DatePicker extends Component {
                 </div>}
             </div>}
             {showIcon && <div
-                dangerouslySetInnerHTML={{ __html: icon }}
                 className={"calendar-icon" + (this.state.isCalendarVisible ? " active" : "") }
-                onClick={this.toggleCalendar.bind(this) }>
+                onClick={this.toggleCalendar.bind(this) }><Icon />
             </div>}
             <div className={calendarClassName} style={this.getStyle() } ref={element => this.calendarContainer = element}>
                 <div>

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Dropdown/index.jsx

@@ -309,8 +309,7 @@ class Dropdown extends Component {
                     }}
                     aria-label="Search"
                 />
-                {props.withIcon && <div className="dropdown-icon" dangerouslySetInnerHTML={{__html: ArrowDownIcon}}
-                    onClick={this.toggleDropdown.bind(this)}></div>}
+                {props.withIcon && <div className="dropdown-icon" onClick={this.toggleDropdown.bind(this)}><ArrowDownIcon /></div>}
                 <div className={"collapsible-content" + (state.dropDownOpen ? " open" : "")}>
                     <Collapse
                         isOpened={state.dropDownOpen}>

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/EditableField/index.jsx

@@ -137,7 +137,7 @@ class EditableField extends Component {
 
 
     getEditButton() {
-        return <div className="edit-button" onClick={this.toggleEditMode.bind(this)} dangerouslySetInnerHTML={{ __html: EditIcon }}></div>;
+        return <div className="edit-button" onClick={this.toggleEditMode.bind(this)}><EditIcon /></div>;
     }
 
     getUrl(text) {

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/FileUpload/Browse/FilePicker.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-const searchIcon = require("!raw-loader!./img/search.svg").default;
-const fileIcon = require("!raw-loader!./img/pages.svg").default;
+import SearchIcon from "./img/search.svg";
+import FileIcon from "./img/pages.svg";
 import { Scrollbars } from "react-custom-scrollbars";
 
 export default class FilePicker extends Component {
@@ -73,7 +73,7 @@ export default class FilePicker extends Component {
         if (isMatchSearch) {
 
             return <li>
-                <div className="icon" dangerouslySetInnerHTML={{ __html: fileIcon }} onClick={this.onFileNameClick.bind(this, child) }/>
+                <div className="icon" onClick={this.onFileNameClick.bind(this, child) }><FileIcon /></div>
                 <div className="item-name" onClick={this.onFileNameClick.bind(this, child) }>{child.data.value}</div>
             </li>;
         }
@@ -91,7 +91,7 @@ export default class FilePicker extends Component {
         });
         return <ul>
             <li>
-                <div className="icon" dangerouslySetInnerHTML={{ __html: fileIcon }} onClick={this.onFileNameClick.bind(this) }/>
+                <div className="icon" onClick={this.onFileNameClick.bind(this) }><FileIcon /></div>
                 <div className="item-name none-specified" onClick={this.onFileNameClick.bind(this) }>{this.props.notSpecifiedText}</div>
             </li>
             {files}
@@ -114,7 +114,7 @@ export default class FilePicker extends Component {
                     <div className="search">
                         <input type="text" value={this.state.searchFileText} onChange={this.onChangeSearchFileText.bind(this) } placeholder={this.props.searchFilesPlaceHolderText} aria-label="Search" />
                         {this.state.searchFileText && <div onClick={this.clearSearch.bind(this) } className="clear-button">×</div>}
-                        <div className="search-icon" dangerouslySetInnerHTML={{ __html: searchIcon }} />
+                        <div className="search-icon"><SearchIcon /></div>
                     </div>
                     <div className="items">
                         <Scrollbars className="scrollArea content-vertical"

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/FileUpload/Browse/FolderPicker.jsx

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import Folders from "./Folders";
 import { Scrollbars } from "react-custom-scrollbars";
-const searchIcon = require("!raw-loader!./img/search.svg").default;
+import SearchIcon from "./img/search.svg";
 
 export default class FolderPicker extends Component {
 
@@ -74,7 +74,7 @@ export default class FolderPicker extends Component {
                     <div className="search">
                         <input type="text" value={this.state.searchFolderText} onChange={this.onChangeSearchFolderText.bind(this) } placeholder={this.props.searchFoldersPlaceHolderText} aria-label="Search" />
                         {this.state.searchFolderText && <div onClick={this.clearSearch.bind(this)} className="clear-button">×</div>}
-                        <div className="search-icon" dangerouslySetInnerHTML={{ __html: searchIcon }} />
+                        <div className="search-icon"><SearchIcon /></div>
                     </div>
                     <div className="items">
                         <Scrollbars className="scrollArea content-vertical"

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/FileUpload/Browse/Folders.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-const folderIcon = require("!raw-loader!./img/folder.svg").default;
+import FolderIcon from "./img/folder.svg";
 
 export default class Folders extends Component {
 
@@ -60,7 +60,7 @@ export default class Folders extends Component {
             return <li className={className} key={child.data.key}>
                 {child.data.hasChildren && <div className="has-children" onClick={this.onParentClick.bind(this, child) }></div>}
                 <div onClick={this.onFolderNameClick.bind(this, child)}>
-                    <div className="icon" dangerouslySetInnerHTML={{ __html: folderIcon }} />
+                    <div className="icon"><FolderIcon /></div>
                     <div className="item-name">{child.data.value}</div>
                 </div>
                 {child.data.hasChildren && this.getFolders(child) }

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/FileUpload/UploadBar.jsx

@@ -1,9 +1,9 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 
-const upload = require("!raw-loader!./img/upload.svg").default;
-const checkmark = require("!raw-loader!./img/checkmark.svg").default;
-const errorIcon = require("!raw-loader!./img/x.svg").default;
+import Upload from "./img/upload.svg";
+import Checkmark from "./img/checkmark.svg";
+import ErrorIcon from "./img/x.svg";
 
 export default class UploadBar extends Component {
     constructor() {
@@ -44,14 +44,14 @@ export default class UploadBar extends Component {
         let percent = this.props.errorText ? 0 : this.state.percent;
         let text = this.props.uploadComplete ? this.props.uploadCompleteText : this.props.uploadingText;
         text = this.props.errorText ? this.props.errorText : text;
-        let svg = this.props.uploadComplete ? checkmark : upload;
-        svg = this.props.errorText ? errorIcon : svg;
+        let Svg = this.props.uploadComplete ? Checkmark : Upload;
+        Svg = this.props.errorText ? ErrorIcon : Svg;
         const className = "file-upload-container dnn-upload-bar" + (!this.props.errorText && this.props.uploadComplete ? " complete" : "") + (this.props.errorText ? " upload-error" : "");
 
         return <div className={className}>
             <div className="upload-bar-container">
                 <div className="upload-file-name">{this.props.fileName || this.props.uploadDefaultText}</div>
-                <div className="upload-icon" dangerouslySetInnerHTML={{ __html: svg }} />
+                <div className="upload-icon"><Svg /></div>
                 <h4>{text}</h4>
                 <div className="upload-percent">{percent + "%"}</div>
                 <div className="upload-bar-box">

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/FileUpload/index.jsx

@@ -2,12 +2,14 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import Browse from "./Browse";
 import UploadBar from "./UploadBar";
+import BrowseIcon from "./img/browse.svg";
+import UploadIcon from "./img/upload.svg";
 
 import "./style.less";
 
 const Buttons = [
-    { name: "browse" },
-    { name: "upload" }
+    { name: "browse", icon: BrowseIcon, },
+    { name: "upload", icon: UploadIcon },
 ];
 
 export default class FileUpload extends Component {
@@ -319,7 +321,7 @@ export default class FileUpload extends Component {
         }
 
         buttons = buttons.map((button) => {
-            const svg = require(`!raw-loader!./img/${button.name}.svg`).default;
+            const ButtonIcon = button.icon;
             const isUpload = button.name === "upload";
 
             const accept = props.fileFormats.join(",");
@@ -329,7 +331,7 @@ export default class FileUpload extends Component {
                 onMouseLeave={this.onMouseLeave.bind(this) }
                 onClick={this.onButtonClick.bind(this, button.name) }
                 key={button.name}>
-                <div dangerouslySetInnerHTML={{ __html: svg }} />
+                <div><ButtonIcon /></div>
                 {isUpload && accept && <input type="file" ref={this.fileInput1Ref} accept={accept} onChange={this.onFileUpload.bind(this) } aria-label="File" />}
                 {isUpload && !accept && <input type="file" ref={this.fileInput2Ref} onChange={this.onFileUpload.bind(this) } aria-label="File" />}
             </div>;

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/FolderPicker/FolderSelector.jsx

@@ -2,10 +2,9 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import Folders from "./Folders";
 import { Scrollbars } from "react-custom-scrollbars";
+import SearchIconImage from "./img/search.svg";
 import "./style.less";
 
-const searchIconImage = require("!raw-loader!./img/search.svg").default;
-
 export default class FolderSelector extends Component {
 
     constructor() {
@@ -64,9 +63,7 @@ export default class FolderSelector extends Component {
     }
 
     getSearchIcon() {
-
-        return (<div className="search-icon" dangerouslySetInnerHTML={{ __html: searchIconImage }} />);
-
+        return <div className="search-icon"><SearchIconImage /></div>;
     }
 
     render() {

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/FolderPicker/Folders.jsx

@@ -1,9 +1,8 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
+import FolderIcon from "./img/folder.svg";
 import "./style.less";
 
-const folderIcon = require("!raw-loader!./img/folder.svg").default;
-
 export default class Folders extends Component {
 
     constructor() {
@@ -54,9 +53,7 @@ export default class Folders extends Component {
     }
 
     getFolderIcon() {
-
-        return (<div className="icon" dangerouslySetInnerHTML={{ __html: folderIcon }} />);
-
+        return (<div className="icon"><FolderIcon /></div>);
     }
 
     getFolders(folder) {

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/IconButton/index.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { AddIcon,
+import {
+    AddIcon,
     EditIcon,
     CardViewIcon,
     ListViewIcon,
@@ -114,11 +115,12 @@ export default class IconButton extends Component {
 
     render() {
         const {props} = this;
+        const Icon = this.getIcon();
 
         if (typeof props.onClick === "function") {
-            return <a href="#" className={this.getClassName() } style={this.getStyle() } dangerouslySetInnerHTML={{ __html: this.getIcon() }} onClick={this.onClick.bind(this) }  aria-label={props.type} />;
+            return <a href="#" className={this.getClassName()} style={this.getStyle()} onClick={this.onClick.bind(this)} aria-label={props.type}><Icon /></a>;
         } else {
-            return <span className="icon-flat"  style={this.getStyle() } dangerouslySetInnerHTML={{ __html: this.getIcon() }} />;
+            return <span className="icon-flat" style={this.getStyle()}><Icon /></span>;
         }
     }
 }

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Modal/index.jsx

@@ -64,10 +64,8 @@ class Modal extends Component {
                     <div className="modal-header">
                         <h3>{props.header}</h3>
                         {props.headerChildren}
-                        <div
-                            className="close-modal-button"
-                            dangerouslySetInnerHTML={{ __html: XThinIcon }}
-                            onClick={props.onRequestClose}>
+                        <div className="close-modal-button" onClick={props.onRequestClose}>
+                            <XThinIcon />
                         </div>
                     </div>
                 }