replace icon font with svg (#4192)

* add @svgr/webpack

* replace gitter icon

* replace icons in Navigation

* replace close icon

* replace edit icon

* replace bar icon

* replace icons in sidebarItem

* replace close icon

* update gitter icon

* clean icon.font.js

* bye fontgen-loader

Author: chenxsan

package.json

@@ -87,6 +87,7 @@
     "@mdx-js/loader": "^1.6.16",
     "@octokit/rest": "^18.0.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
+    "@svgr/webpack": "^5.5.0",
     "alex": "^5.1.0",
     "autoprefixer": "^9.8.6",
     "babel-loader": "^8.1.0",
@@ -103,7 +104,6 @@
     "eslint-plugin-cypress": "^2.10.3",
     "eslint-plugin-markdown": "^1.0.2",
     "file-loader": "^6.1.0",
-    "fontgen-loader": "git://github.com/chenxsan/fontgen-loader.git#bugfix/fix-this-exec",
     "front-matter": "^4.0.2",
     "gh-pages": "^3.1.0",
     "html-loader": "^1.3.0",

src/components/Gitter/Gitter.jsx

@@ -7,6 +7,8 @@ import isClient from '../../utilities/is-client';
 // Load Styling
 import '../Gitter/Gitter.scss';
 
+import GitterIcon from '../../styles/icons/gitter.svg';
+
 let sidecar = null;
 let sidecarLoadTriggered = false;
 
@@ -18,7 +20,7 @@ export default class Gitter extends React.Component {
         <div
           className="gitter__button"
           onClick={this._handleIconClick}>
-          <i className="gitter__icon icon-gitter" />
+          <GitterIcon className="gitter__icon" fill="#fff" />
         </div>
       </div>
     );

src/components/Navigation/Navigation.jsx

@@ -15,6 +15,10 @@ import 'docsearch.js/dist/cdn/docsearch.css';
 import './Navigation.scss';
 import './Search.scss';
 
+import GithubIcon from '../../styles/icons/github.svg';
+import TwitterIcon from '../../styles/icons/twitter.svg';
+import StackOverflowIcon from '../../styles/icons/stack-overflow.svg';
+
 const onSearch = () => {};
 
 export default class Navigation extends React.Component {
@@ -33,19 +37,19 @@ export default class Navigation extends React.Component {
             title: 'GitHub Repository',
             url: 'https://github.com/webpack/webpack',
             className: 'navigation__item--icon',
-            content: <i aria-hidden="true" className="icon-github" />
+            content: <GithubIcon aria-hidden="true" fill="#fff" width={16} />
           },
           {
             title: 'webpack on Twitter',
             url: 'https://twitter.com/webpack',
             className: 'navigation__item--icon',
-            content: <i aria-hidden="true" className="icon-twitter" />
+            content: <TwitterIcon aria-hidden="true" fill="#fff" width={16} />
           },
           {
             title: 'webpack on Stack Overflow',
             url: 'https://stackoverflow.com/questions/tagged/webpack',
             className: 'navigation__item--icon',
-            content: <i aria-hidden="true" className="icon-stack-overflow" />
+            content: <StackOverflowIcon aria-hidden="true" fill="#fff" width={16} />
           },
           {
             className: 'navigation__item--icon',

src/components/Navigation/Navigation.scss

@@ -61,7 +61,8 @@
 
 .navigation__item {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   font-size: getFontSize(-1);
   padding-bottom: 0.1em;
   margin-right: 18px;
@@ -77,8 +78,8 @@
 
   &--icon {
     font-size: 16px;
-    margin-top: 2px;
     -webkit-font-smoothing: antialiased;
+    padding-bottom: 0;
   }
 
   &--active {

src/components/NotificationBar/NotificationBar.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Container from '../Container/Container';
 import testLocalStorage from '../../utilities/test-local-storage';
 import './NotificationBar.scss';
+import CloseIcon from '../../styles/icons/cross.svg';
 
 const version = '3';
 const localStorageIsEnabled = testLocalStorage() !== false;
@@ -22,11 +23,14 @@ class MessageBar extends React.Component {
             Webpack 5 has been officially released. Read our <a href="/blog/2020-10-10-webpack-5-release/">announcement</a>. Not ready yet? Read <a href="https://v4.webpack.js.org/">webpack 4 documentation here</a>.
           </p>
           {localStorageIsEnabled ? (
-            <button
+            <CloseIcon
               aria-label="Dismiss"
-              className="notification-bar__close icon-cross"
+              className="notification-bar__close"
+              fill="#fff"
+              width={16}
               onClick={this.close.bind(this)}
-            />
+              role="button"
+              />
           ) : null}
         </Container>
       </div>

src/components/PageLinks/PageLinks.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Url from 'url';
 import './PageLinks.scss';
 import icon from '../../assets/icon-print.svg';
+import EditIcon from '../../styles/icons/edit.svg';
 
 const baseURL = 'https://github.com/webpack/webpack.js.org/edit/master/';
 
@@ -26,12 +27,12 @@ export default ({
 
       <a className="page-links__link" href={ editLink }>
         Edit Document
-        <i className="page-links__icon icon-edit" />
+        <EditIcon className="page-links__icon" width={12} fill="#1a6bac" />
       </a>
       <span className="page-links__gap">|</span>
       <button className="page-links__link page-links__print as-link" onClick={_handlePrintClick} title="Print this page">
         Print Document
-        <img src={icon} />
+        <img src={icon} alt="" />
       </button>
     </div>
   );

src/components/Print/Print.js

@@ -2,6 +2,7 @@ import React from 'react';
 // Load Styling
 import './Print.scss';
 import icon from '../../assets/icon-print.svg';
+import BarIcon from '../../styles/icons/vertical-bar.svg';
 
 const PRINTABLE_SECTIONS = [
   'api',
@@ -25,7 +26,7 @@ export default function Print (props) {
 
   return (
     <div className="sidebar-item sidebar-item--disabled`">
-      <i className="sidebar-item__toggle icon-vertical-bar" />
+      <BarIcon className="sidebar-item__toggle" width={15} fill="#175d96" />
       <a className="sidebar-item__title sidebar-link__print"
         href={printUrl}
         rel="nofollow"

src/components/SidebarItem/SidebarItem.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import Link from '../Link/Link';
 import './SidebarItem.scss';
 import list2Tree from '../../utilities/list2Tree';
+import ChevronRightIcon from '../../styles/icons/chevron-right.svg';
+import BarIcon from '../../styles/icons/vertical-bar.svg';
 
 const block = 'sidebar-item';
 
@@ -42,11 +44,13 @@ export default class SidebarItem extends React.Component {
     return (
       <div className={`${block} ${openMod} ${disabledMod}`}>
         {anchors.length > 0 ? (
-          <i
-            className={`${block}__toggle icon-chevron-right`}
+          <ChevronRightIcon
+            width={15}
+            fill="#175d96"
+            className={`${block}__toggle`}
             onClick={this._toggle.bind(this)} />
         ) : (
-          <i className={`${block}__toggle icon-vertical-bar`} />
+          <BarIcon className={`${block}__toggle`} width={15} fill="#175d96" />
         )}
 
         <Link

src/components/SidebarMobile/SidebarMobile.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Link from '../Link/Link';
 import './SidebarMobile.scss';
+import CloseIcon from '../../styles/icons/cross.svg';
 
 // TODO: Check to make sure all pages are shown and properly sorted
 export default class SidebarMobile extends React.Component {
@@ -29,9 +30,12 @@ export default class SidebarMobile extends React.Component {
           onTouchEnd={this._handleTouchEnd} />
 
         <div className="sidebar-mobile__content">
-          <i
-            className="sidebar-mobile__close icon-cross"
-            onClick={toggle.bind(null, false)} />
+          <span
+            role="button"
+            className="sidebar-mobile__close"
+            onClick={toggle.bind(null, false)}>
+              <CloseIcon fill="#fff" width={20} />
+          </span>
 
           {this._getSections()}
         </div>

src/components/Site/Site.jsx

@@ -26,7 +26,6 @@ import StarterKits from '../StarterKits/StarterKits';
 
 // Load Styling
 import '../../styles/index';
-import '../../styles/icon.font.js';
 import './Site.scss';
 
 // Load Content Tree

src/styles/icon.font.js

@@ -79,17 +79,6 @@ module.exports = (env = {}) => ({
           }
         ]
       },
-      {
-        test: /\.font.js$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          'css-loader',
-          {
-            loader: 'fontgen-loader',
-            options: { embed: true }
-          }
-        ]
-      },
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,
@@ -141,8 +130,18 @@ module.exports = (env = {}) => ({
         }
       },
       {
-        test: /\.(jpg|jpeg|png|svg|ico)$/i,
+        test: /\.(jpg|jpeg|png|ico)$/i,
         type: 'asset/resource'
+      },
+      {
+        test: /\.svg$/i,
+        type: 'asset/resource',
+        exclude: [path.resolve(__dirname, 'src/styles/icons')]
+      },
+      {
+        test: /\.svg$/i,
+        use: ['@svgr/webpack'],
+        include: [path.resolve(__dirname, 'src/styles/icons')]
       }
     ]
   },