Merge pull request #6808 from bdukes/svgr-for-icons

Use SVGR for icons

Author: valadas

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}>