convert svg icon to base64 for better performance

dist/index.html

@@ -4,7 +4,7 @@
     <title>吃什麼，どっち</title>
     <meta name="description" content="今天吃飯，該吃什麼好呢？只要輸入美食欲望，立刻給你最真實、現場、生活化的評價，找餐廳再也不煩惱，就讓吃什麼，どっち幫你決定吃什麼！">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
-    <link rel="preload" href="/images/sprite.symbol.svg" type="image/svg+xml" crossorigin="anonymous">
+    <!-- <link rel="preload" href="/images/sprite.symbol.svg" type="image/svg+xml" crossorigin="anonymous"> -->
     <link rel="preconnect" href="https://res.cloudinary.com">
     <link rel="preconnect" href="https://firestore.googleapis.com">
     <style>html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}</style>

package.json

@@ -46,6 +46,7 @@
     "optimize-css-assets-webpack-plugin": "^4.0.3",
     "postcss": "^7.0.2",
     "postcss-color-mod-function": "^2.4.3",
+    "postcss-extend-rule": "^2.0.0",
     "postcss-loader": "^3.0.0",
     "postcss-modules": "^1.3.2",
     "precss": "^3.1.2",

postcss.config.js

@@ -10,5 +10,6 @@ module.exports = {
       ],
     },
     lost: {},
+    'postcss-extend-rule': {},
   },
 };

src/components/footer.js

@@ -30,12 +30,16 @@ const Footer = () => {
                     title={item.title}
                     className="tag-list__item__link"
                   >
-                    <Icon
+                    <i
+                      title={item.title}
+                      className={`tag-list__item__icon icon-${item.className}`}
+                    />
+                    {/* <Icon
                       name={item.className}
                       title={item.title}
                       size={50}
                       fill=""
-                    />
+                    /> */}
                     <span
                       className="tag-list__item__title"
                     >

src/components/header.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import Icon from './icon';
+// import Icon from './icon';
 import '../../style/components/header.css';
 import { common } from '../data/locale_tw';
 
@@ -12,12 +12,16 @@ const Header = () => {
           to="/"
           title={common.title}
         >
-          <Icon
+          <i
+            styleName="header__logo header__logo__image"
+            className="icon-logo"
+          />
+          {/* <Icon
             name="logo"
             className="header__logo"
             title={common.title}
             size={40}
-          />
+          /> */}
         </Link>
         <Link
           to="/"

src/components/icon.js

@@ -11,8 +11,8 @@ const Icon = ({
   inContent,
 }) => {
   const style = {
-    'marginRight': '10px',
-    'verticalAlign': 'middle',
+    marginRight: '10px',
+    verticalAlign: 'middle',
   };
 
   return (

src/components/store_control_buttons.js

@@ -19,6 +19,7 @@ const StoreControlButtons = ({ store }) => {
           <Icon
             name="phone"
             title={iconData.phoneBooking}
+            size="24"
           />
           <span className="button-with-line-breaks-text">
             {iconData.phoneBooking}
@@ -38,6 +39,7 @@ const StoreControlButtons = ({ store }) => {
           <Icon
             name="online-booking"
             title={iconData.onlineBooking}
+            size="24"
           />
           <span className="button-with-line-breaks-text">
             {iconData.onlineBooking}
@@ -55,6 +57,7 @@ const StoreControlButtons = ({ store }) => {
         <Icon
           name="pin-on-map"
           title={iconData.navigation}
+          size="24"
         />
         <span className="button-with-line-breaks-text short-word">
           {iconData.navigation}

src/components/store_item.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import LazyLoad from 'react-lazy-load';
 import '../../style/components/store_item.css';
-import Icon from './icon';
+// import Icon from './icon';
 import StoreControlButtons from './store_control_buttons';
 import { icon as iconData } from '../data/locale_tw';
 
 const StoreItem = ({ store }) => {
-  const iconColor = '#aaa';
+  // const iconColor = '#aaa';
   const boxStyle = {
     background: '#e8e8e8',
     width: '175px',
@@ -56,13 +56,18 @@ const StoreItem = ({ store }) => {
         </div>
         <ul styleName="store-item__detail">
           <li styleName="store-item__detail__item">
-            <Icon
+            <i
+              className="icon-pin-map"
+              styleName="store-item__detail__item__icon"
+              title={iconData.address}
+            />
+            {/* <Icon
               name="pin-map"
               title={iconData.address}
               size={14}
               fill={iconColor}
               inContent
-            />
+            /> */}
             <a
               title={iconData.navigation}
               href={`https://www.google.com.tw/maps/search/${store.location.address}`}
@@ -73,13 +78,18 @@ const StoreItem = ({ store }) => {
             </a>
           </li>
           <li styleName="store-item__detail__item">
-            <Icon
+            <i
+              className="icon-phone"
+              styleName="store-item__detail__item__icon"
+              title={iconData.phone}
+            />
+            {/* <Icon
               name="phone"
               title={iconData.phone}
               size={14}
               fill={iconColor}
               inContent
-            />
+            /> */}
             <a
               title={iconData.phone}
               href={`${store.phone}`}
@@ -90,37 +100,52 @@ const StoreItem = ({ store }) => {
             </a>
           </li>
           <li styleName="store-item__detail__item">
-            <Icon
+            <i
+              className="icon-clock-circular-outline"
+              styleName="store-item__detail__item__icon"
+              title={iconData.openingHour}
+            />
+            {/* <Icon
               name="clock-circular-outline"
               title={iconData.openingHour}
               size={14}
               fill={iconColor}
               inContent
-            />
+            /> */}
             {store.openingHour.start}
             ~
             {store.openingHour.end}
           </li>
           <li styleName="store-item__detail__item">
-            <Icon
+            <i
+              className="icon-dollar"
+              styleName="store-item__detail__item__icon"
+              title={iconData.price}
+            />
+            {/* <Icon
               name="dollar"
               title={iconData.price}
               size={14}
               fill={iconColor}
               inContent
-            />
+            /> */}
             {store.price.lowest}
             ~
             {store.price.highest}
           </li>
           <li styleName="store-item__detail__item">
-            <Icon
+            <i
+              className="icon-global"
+              styleName="store-item__detail__item__icon"
+              title={iconData.website}
+            />
+            {/* <Icon
               name="global"
               title={iconData.website}
               size={14}
               fill={iconColor}
               inContent
-            />
+            /> */}
             <Link
               to={store.sns.website}
               title={store.name}

src/components/tag_list.js

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import Icon from './icon';
+// import Icon from './icon';
 import '../../style/components/tag_list.css';
 
 const TagList = ({ tags }) => {
@@ -20,12 +20,16 @@ const TagList = ({ tags }) => {
                 title={item.title}
                 className="tag-list__item__link"
               >
-                <Icon
+                <span
+                  title={item.title}
+                  className={`tag-list__item__icon icon-${item.className}`}
+                />
+                {/* <Icon
                   name={item.className}
                   title={item.title}
                   size={50}
                   fill=""
-                />
+                /> */}
                 <span
                   className="tag-list__item__title"
                 >

src/index.ejs

@@ -4,7 +4,7 @@
     <title><%= htmlWebpackPlugin.options.title %></title>
     <meta name="description" content="今天吃飯，該吃什麼好呢？只要輸入美食欲望，立刻給你最真實、現場、生活化的評價，找餐廳再也不煩惱，就讓吃什麼，どっち幫你決定吃什麼！">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
-    <link rel="preload" href="/images/sprite.symbol.svg" type="image/svg+xml" crossorigin="anonymous">
+    <!-- <link rel="preload" href="/images/sprite.symbol.svg" type="image/svg+xml" crossorigin="anonymous"> -->
     <link rel="preconnect" href="https://res.cloudinary.com">
     <link rel="preconnect" href="https://firestore.googleapis.com">
     <style>html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}</style>

style/components/header.css

@@ -17,11 +17,18 @@
   margin-right: 5px;
 }
 
-:global .header__logo {
+:local .header__logo {
   display: block;
   margin: 0 15px 0 0;
 }
 
+/* base64 */
+:local .header__logo__image {
+  display: block;
+  width: 40px;
+  height: 40px;
+}
+
 :local .header__title {
   display: block;
   font-size: 17px;

style/components/store_item.css

@@ -46,6 +46,13 @@
   }
 }
 
+:local .store-item__detail__item__icon {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-right: 10px;
+}
+
 :local .store-item__tag-list {
   display: flex;
   flex-wrap: wrap;

style/components/tag_list.css

@@ -29,4 +29,6 @@
 
 .tag-list__item__icon {
   display: block;
+  width: 50px;
+  height: 50px;
 }

style/generals/_generals.css

@@ -1,3 +1,4 @@
 @import 'global.css';
 @import 'layout.css';
+@import 'icon.css';
 @import 'button.css';