Skip to content

Commit 4b947d3

Browse files
bdukesbdukes
committed
Use SVGR for remaining icons
1 parent 55861bb commit 4b947d3

48 files changed

Lines changed: 179 additions & 134 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Tooltip/CustomIcon.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from "react";
22
import PropTypes from "prop-types";
33

4-
5-
const CustomIcon = props => (
6-
<div dangerouslySetInnerHTML={{ __html: props.icon }} />
7-
);
4+
const CustomIcon = props => {
5+
let Icon = props.icon;
6+
return <div><Icon /></div>;
7+
};
88
CustomIcon.propTypes = {
99
icon: PropTypes.string
1010
};

‎Dnn.AdminExperience/ClientSide/Extensions.Web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"@babel/preset-env": "^7.28.3",
1515
"@babel/preset-react": "^7.27.1",
1616
"@dnnsoftware/dnn-react-common": "10.1.0",
17+
"@svgr/webpack": "^8.1.0",
1718
"babel-loader": "10.0.0",
1819
"babel-plugin-transform-object-assign": "6.22.0",
1920
"babel-plugin-transform-object-rest-spread": "6.26.0",

‎Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/Body/AvailableExtensions/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ExtensionActions, VisiblePanelActions, InstallationActions } from "acti
55
import Localization from "localization";
66
import { GridCell, DropdownWithError } from "@dnnsoftware/dnn-react-common";
77
import ExtensionList from "./ExtensionList";
8+
import FetchingIcon from "../../../img/fetching.svg";
89
import "./style.less";
910

1011
class AvailableExtensions extends Component {
@@ -99,11 +100,10 @@ class AvailableExtensions extends Component {
99100
}
100101

101102
renderLoading() {
102-
/* eslint-disable no-undef */
103103
return <div className="loading-extensions">
104104
<h2>{Localization.get("Loading")}</h2>
105105
<p>{Localization.get("Loading.Tooltip")}</p>
106-
<div dangerouslySetInnerHTML={{ __html: require("!raw-loader!./../../../img/fetching.svg").default }} />
106+
<div><FetchingIcon /></div>
107107
</div>;
108108
/* eslint-enable no-undef */
109109
}

‎Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/Body/InstalledExtensions/index.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ExtensionActions, PaginationActions, VisiblePanelActions } from "action
55
import Localization from "localization";
66
import ExtensionList from "./ExtensionList";
77
import { GridCell, DropdownWithError } from "@dnnsoftware/dnn-react-common";
8+
import FetchingIcon from "../../../img/fetching.svg";
89
import "./style.less";
910

1011
class InstalledExtensions extends Component {
@@ -74,7 +75,7 @@ class InstalledExtensions extends Component {
7475
return <div className="loading-extensions">
7576
<h2>{Localization.get("Loading")}</h2>
7677
<p>{Localization.get("Loading.Tooltip")}</p>
77-
<div dangerouslySetInnerHTML={{ __html: require("!raw-loader!./../../../img/fetching.svg").default }} />
78+
<div><FetchingIcon /></div>
7879
</div>;
7980
/* eslint-enable no-undef */
8081
}

‎Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/InstallExtensionModal/FileUpload/UploadBar.jsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import React, { Component } from "react";
22
import PropTypes from "prop-types";
3-
4-
/* eslint-disable no-undef */
5-
const upload = require("!raw-loader!./img/upload.svg").default;
6-
const checkmark = require("!raw-loader!./img/checkmark.svg").default;
7-
const errorIcon = require("!raw-loader!./img/x.svg").default;
8-
/* eslint-enable no-undef */
3+
import Upload from "./img/upload.svg";
4+
import Checkmark from "./img/checkmark.svg";
5+
import ErrorIcon from "./img/x.svg";
96

107
export default class UploadBar extends Component {
118
constructor() {
@@ -58,14 +55,14 @@ export default class UploadBar extends Component {
5855
let percent = props.errorText ? 0 : this.state.percent;
5956
let text = props.uploadComplete ? props.uploadCompleteText : props.uploadingText;
6057
text = props.errorText ? props.errorText : text;
61-
let svg = props.uploadComplete ? checkmark : upload;
62-
svg = props.errorText ? errorIcon : svg;
58+
let UploadIcon = props.uploadComplete ? Checkmark : Upload;
59+
UploadIcon = props.errorText ? ErrorIcon : UploadIcon;
6360
const className = "file-upload-container dnn-upload-bar" + (props.uploadComplete ? " complete" : "") + (props.errorText ? " upload-error" : "");
6461

6562
return <div className={className}>
6663
<div className="upload-bar-container">
6764
<div className="upload-file-name">{this.props.fileName || "myImage.jpg"}</div>
68-
<div className="upload-icon" dangerouslySetInnerHTML={{ __html: svg }} />
65+
<div className="upload-icon"><UploadIcon /></div>
6966
<h4>{text}</h4>
7067
{props.errorInPackage &&
7168
<p className="view-log-or-try-again">

‎Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/InstallExtensionModal/FileUpload/index.jsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import AlreadyInstalled from "./AlreadyInstalled";
55
import Localization from "localization";
66
import LogDisplay from "./LogDisplay";
77
import { RadioButtons } from "@dnnsoftware/dnn-react-common";
8+
import UploadIcon from "./img/upload.svg";
89
import "./style.less";
910

1011
export default class FileUpload extends Component {
@@ -150,10 +151,6 @@ export default class FileUpload extends Component {
150151
this.onDragLeave();
151152
}
152153
render() {
153-
/* eslint-disable quotes */
154-
// eslint-disable-next-line no-undef
155-
const svg = require(`!raw-loader!./img/upload.svg`).default;
156-
157154
const buttonsStyle = { width: 67 };
158155
let className = "overlay" + (this.state.draggedOver ? " hover" : "");
159156

@@ -172,7 +169,7 @@ export default class FileUpload extends Component {
172169
className="button upload"
173170
onMouseEnter={this.onMouseEnter.bind(this, Localization.get("InstallExtension_UploadAFile"))}
174171
onMouseLeave={this.onMouseLeave.bind(this)}>
175-
<div dangerouslySetInnerHTML={{ __html: svg }} />
172+
<div><UploadIcon /></div>
176173
<input type="file" onChange={this.onFileUpload.bind(this)} aria-label="File" />
177174
</div>
178175
</div>

‎Dnn.AdminExperience/ClientSide/Extensions.Web/webpack.config.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,9 +110,14 @@ module.exports = (env, argv) => {
110110
use: {
111111
loader: "url-loader?mimetype=application/font-woff",
112112
},
113+
},
114+
{
115+
test: /\.svg$/i,
116+
issuer: /\.[jt]sx?$/,
117+
use: ["@svgr/webpack"],
113118
},
114119
{
115-
test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/,
120+
test: /\.(ttf|eot)(\?v=[0-9].[0-9].[0-9])?$/,
116121
use: {
117122
loader: "file-loader?name=[name].[ext]",
118123
},

‎Dnn.AdminExperience/ClientSide/Licensing.Web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"@babel/preset-env": "^7.28.3",
1515
"@babel/preset-react": "^7.27.1",
1616
"@dnnsoftware/dnn-react-common": "10.1.0",
17+
"@svgr/webpack": "^8.1.0",
1718
"array.prototype.find": "2.2.3",
1819
"array.prototype.findindex": "2.2.4",
1920
"babel-loader": "10.0.0",

‎Dnn.AdminExperience/ClientSide/Licensing.Web/src/components/platform/index.jsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
import React, { Component } from "react";
22
import PropTypes from "prop-types";
33
import { connect } from "react-redux";
4-
import {
5-
licensing as LicensingActions
6-
} from "../../actions";
4+
import { licensing as LicensingActions } from "../../actions";
75
import resx from "../../resources";
86
import styles from "./style.module.less";
97

10-
import dnnTechnologyEditorialIcon from "./../svg/dnn_technology_editorial.svg?raw";
11-
import githubIcon from "./../svg/github.svg?raw";
12-
import dnnIcon from "./../svg/dnn_logo_primary.svg?raw";
13-
import docsIcon from "./../svg/dnn_docs_logo.svg?raw";
8+
import DnnTechnologyEditorialIcon from "./../svg/dnn_technology_editorial.svg";
9+
import GithubIcon from "./../svg/github.svg";
10+
import DnnIcon from "./../svg/dnn_logo_primary.svg";
11+
import DocsIcon from "./../svg/dnn_docs_logo.svg";
1412

1513
class Platform extends Component {
1614
constructor() {
@@ -39,21 +37,21 @@ class Platform extends Component {
3937
<div className="links-wrapper">
4038
<div className="link-docs-wrapper" title={resx.get("Docs.Header")} onClick={this.onDocsClick.bind(this) }>
4139
<div className="link-docs">
42-
<div className="docs-icon" dangerouslySetInnerHTML={{ __html: docsIcon }} />
40+
<div className="docs-icon"><DocsIcon /></div>
4341
<div className="link-docs-header">{resx.get("Docs.Header") }</div>
4442
<div className="link-docs-desc">{resx.get("Docs") }</div>
4543
</div>
4644
</div>
4745
<div className="link-community-wrapper">
4846
<div className="link-community" title={resx.get("Community.Header")} onClick={this.onCommunityClick.bind(this) }>
49-
<div className="dnn-icon" dangerouslySetInnerHTML={{ __html: dnnIcon }} />
47+
<div className="dnn-icon"><DnnIcon /></div>
5048
<div className="link-community-header">{resx.get("Community.Header") }</div>
5149
<div className="link-community-desc">{resx.get("Community") }</div>
5250
</div>
5351
</div>
5452
<div className="link-github-wrapper">
5553
<div className="link-github" title={resx.get("GitHub.Header")} onClick={this.onGitHubClick.bind(this)}>
56-
<div className="github-icon" dangerouslySetInnerHTML={{ __html: githubIcon }} />
54+
<div className="github-icon"><GithubIcon /></div>
5755
<div className="link-github-header">{resx.get("GitHub.Header")}</div>
5856
<div className="link-github-desc">{resx.get("GitHub")}</div>
5957
</div>
@@ -74,7 +72,7 @@ class Platform extends Component {
7472
<div>
7573
{this.renderVersion()}
7674
<div className="intro">
77-
<div className="dnn-technology-editorial-icon" dangerouslySetInnerHTML={{ __html: dnnTechnologyEditorialIcon }} />
75+
<div className="dnn-technology-editorial-icon"><DnnTechnologyEditorialIcon /></div>
7876
<div className="intro-header">{resx.get("Intro.Header") }</div>
7977
<div className="intro-body">{resx.get("Intro") }</div>
8078
</div>

‎Dnn.AdminExperience/ClientSide/Licensing.Web/webpack.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,8 @@ module.exports = (env, argv) => {
8181
},
8282
{
8383
test: /\.svg$/i,
84-
resourceQuery: /raw/, // *.svg?raw
85-
use: "raw-loader",
84+
issuer: /\.[jt]sx?$/,
85+
use: ["@svgr/webpack"],
8686
},
8787
],
8888
},

0 commit comments

Comments
 (0)