From d86eaf78aae31c7afc0665006724fdb88a0fc87f Mon Sep 17 00:00:00 2001
From: chenxsan
Date: Sun, 8 Nov 2020 14:28:19 +0800
Subject: [PATCH 1/6] replace icon font with svg
---
package.json | 2 +-
src/components/Gitter/Gitter.jsx | 4 +-
src/components/Navigation/Navigation.jsx | 9 +-
src/components/Navigation/Navigation.scss | 3 +-
.../NotificationBar/NotificationBar.jsx | 8 +-
src/components/PageLinks/PageLinks.jsx | 3 +-
src/components/Print/Print.js | 3 +-
src/components/SidebarItem/SidebarItem.jsx | 10 +-
.../SidebarMobile/SidebarMobile.jsx | 11 +-
src/components/Site/Site.jsx | 1 -
src/components/Splash/Splash.scss | 4 -
src/styles/icon.font.js | 9 -
src/styles/icon.template.hbs | 20 -
src/styles/icons/github.svg | 2 +-
src/styles/icons/stack-overflow.svg | 2 +-
src/styles/icons/twitter.svg | 2 +-
src/styles/index.scss | 12 -
webpack.common.js | 19 +-
yarn.lock | 1158 +++++++++++++----
19 files changed, 986 insertions(+), 296 deletions(-)
delete mode 100644 src/styles/icon.font.js
delete mode 100644 src/styles/icon.template.hbs
diff --git a/package.json b/package.json
index f49a188da0ef..dc1da43bfe1b 100644
--- a/package.json
+++ b/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.4.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",
diff --git a/src/components/Gitter/Gitter.jsx b/src/components/Gitter/Gitter.jsx
index 8c00e6f91ab9..699297f1a3a3 100644
--- a/src/components/Gitter/Gitter.jsx
+++ b/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 {
-
+
);
diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
index 45d049504925..c3907771eb3f 100644
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@@ -14,6 +14,9 @@ import isClient from '../../utilities/is-client';
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 = () => {};
@@ -33,19 +36,19 @@ export default class Navigation extends React.Component {
title: 'GitHub Repository',
url: 'https://github.com/webpack/webpack',
className: 'navigation__item--icon',
- content:
+ content:
},
{
title: 'webpack on Twitter',
url: 'https://twitter.com/webpack',
className: 'navigation__item--icon',
- content:
+ content:
},
{
title: 'webpack on Stack Overflow',
url: 'https://stackoverflow.com/questions/tagged/webpack',
className: 'navigation__item--icon',
- content:
+ content:
},
{
className: 'navigation__item--icon',
diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
index ad7dc5c96abf..fbff945769f0 100644
--- a/src/components/Navigation/Navigation.scss
+++ b/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;
diff --git a/src/components/NotificationBar/NotificationBar.jsx b/src/components/NotificationBar/NotificationBar.jsx
index f005ebae9bed..a89c069a12bc 100644
--- a/src/components/NotificationBar/NotificationBar.jsx
+++ b/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,10 +23,13 @@ class MessageBar extends React.Component {
Webpack 5 has been officially released. Read our announcement. Not ready yet? Read webpack 4 documentation here.
{localStorageIsEnabled ? (
-
) : null}
diff --git a/src/components/PageLinks/PageLinks.jsx b/src/components/PageLinks/PageLinks.jsx
index 39bd8ad8f084..9cc62baf1321 100644
--- a/src/components/PageLinks/PageLinks.jsx
+++ b/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,7 +27,7 @@ export default ({
Edit Document
-
+
|