feat: add TestSvgImage

babel.config.js

@@ -7,6 +7,7 @@ module.exports = function (api) {
     plugins: [
       ['import', { libraryName: 'antd', style: true }],
       ['module-resolver', { alias: { '@': './src' } }],
+      ['inline-react-svg'],
       ['add-react-displayname'],
     ],
   };

package.json

@@ -29,6 +29,7 @@
     "autoprefixer": "^10.3.1",
     "axios": "^0.21.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
+    "babel-plugin-inline-react-svg": "^2.0.1",
     "classnames": "^2.3.1",
     "css-loader": "^6.2.0",
     "next": "11.1.0",

src/components/LazyLoadingSpin/LazyLoadingSpin.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
-import { Spin } from 'antd';
 import { SpinProps } from 'antd/lib/spin';
+// import { Spin } from 'antd';
 
 import styles from './style.module.less';
 
@@ -14,38 +14,38 @@ interface IProps extends SpinProps {
   alwaysDarkMode?: boolean;
 }
 
-console.log(Spin);
-
-// <Spin
-//   className={cx(
-//     styles['comp-wrapper'],
-//     {
-//       [styles['comp-wrapper--alwaysDarkMode']]: props.alwaysDarkMode,
-//       [styles['comp-wrapper--fullscreen']]: !!props.fullscreen,
-//     },
-//     `g-comp--${LazyLoadingSpin.displayName}`,
-//     props.className,
-//   )}
-//   style={props.style}
-//   delay={props.delay}
-// />
-
 export const LazyLoadingSpin: React.FC<IProps> = (props) => {
-  return (
-    <>
-      <div
-        className={cx(
-          styles['comp-wrapper'],
-          {
-            [styles['comp-wrapper--alwaysDarkMode']]: props.alwaysDarkMode,
-            [styles['comp-wrapper--fullscreen']]: !!props.fullscreen,
-          },
-          `g-comp--${LazyLoadingSpin.displayName}`,
-          props.className,
-        )}
-        style={props.style}
-        // delay={props.delay}
-      />
-    </>
+  // const dom = (
+  //   <Spin
+  //     className={cx(
+  //       styles['comp-wrapper'],
+  //       {
+  //         [styles['comp-wrapper--alwaysDarkMode']]: props.alwaysDarkMode,
+  //         [styles['comp-wrapper--fullscreen']]: !!props.fullscreen,
+  //       },
+  //       `g-comp--${LazyLoadingSpin.displayName}`,
+  //       props.className,
+  //     )}
+  //     style={props.style}
+  //     delay={props.delay}
+  //   />
+  // );
+
+  const dom = (
+    <div
+      className={cx(
+        styles['comp-wrapper'],
+        {
+          [styles['comp-wrapper--alwaysDarkMode']]: props.alwaysDarkMode,
+          [styles['comp-wrapper--fullscreen']]: !!props.fullscreen,
+        },
+        `g-comp--${LazyLoadingSpin.displayName}`,
+        props.className,
+      )}
+      style={props.style}
+      // delay={props.delay}
+    />
   );
+
+  return dom;
 };

src/layouts/TestLayout/TestLayout.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Link from 'next/link';
 
 import { IRouteProps } from '@/interfaces';
+import { FooterNav } from '@/components';
 
 import styles from './styles.module.less';
 
@@ -17,9 +18,7 @@ export const TestLayout: React.FC<IProps> = (props) => (
     id={`g-layout--${TestLayout?.displayName}`}
     className={cx(styles['comp-wrapper'], `g-comp--${TestLayout?.displayName}`)}
   >
-    <div
-      className={cx(styles['layout-container'], 'g-layout-container--blank')}
-    >
+    <div className={cx(styles['layout-container'], 'g-layout-container--test')}>
       {props.disableNav ? null : (
         <div className={styles['nav']}>
           <Link href="/test">
@@ -30,6 +29,10 @@ export const TestLayout: React.FC<IProps> = (props) => (
       )}
 
       <props.mainComp routeProps={props?.routeProps} />
+
+      <div className={cx(styles['layout-footer'], 'g-layout-footer--test')}>
+        <FooterNav />
+      </div>
     </div>
   </div>
 );

src/layouts/TestLayout/styles.module.less

@@ -2,15 +2,22 @@
 @import '/src/styles/mixin.less';
 
 .comp-wrapper {
-  padding: 10px;
+  padding: 15px;
+  width: 100%;
+
+  // for Desktop
+  @media (min-width: @screen-sm) {
+    width: 600px;
+    margin: 0 auto;
+  }
 }
 
 .layout-container {
 }
 
 .nav {
   position: absolute;
-  top: 10px;
+  top: 15px;
   left: 10px;
   z-index: 2;
 
@@ -21,6 +28,14 @@
   }
 }
 
+.layout-footer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0px;
+  z-index: 2;
+}
+
 // DARK-MODE--COMP
 .comp-wrapper--alwaysDarkMode,
 :global(.@{THEME--DARK}) .comp-wrapper {

src/page-components/test/Test/Test.tsx

@@ -29,6 +29,10 @@ export const Test: React.FC<IProps> = (props) => (
     <Link href="/test/lazy-loading-spin">
       <a>TestLazyLoadingSpin</a>
     </Link>
+
+    <Link href="/test/svg-image">
+      <a>TestSvgImage</a>
+    </Link>
   </PageWrapper>
 );
 

src/page-components/test/TestCssImageBg/TestCssImageBg.tsx

@@ -6,7 +6,6 @@ import { HtmlMeta, PageWrapper } from '@/components';
 import { TestLayout } from '@/layouts';
 
 import styles from './styles.module.less';
-import stylesTest from './styles-test.module.css';
 
 // ❌ is not work
 // Please use require
@@ -32,9 +31,7 @@ export const TestCssImageBg: React.FC<IProps> = (props) => (
   <PageWrapper className={cx(styles['comp-wrapper'], props.className)}>
     <HtmlMeta title="Test" />
 
-    <div className={cx(styles['image-bg'], stylesTest['g-mod--image-bg'])}>
-      IMAGE-BG
-    </div>
+    <div className={cx(styles['image-bg'])}>IMAGE-BG</div>
 
     <br />
     <br />

src/page-components/test/TestCssImageBg/styles.module.less

@@ -12,6 +12,10 @@
 
 .image-bg {
   display: table;
+  width: 200px;
+  height: 200px;
+  margin: 0 auto;
+  background-image: url('./image.jpg');
 }
 
 // DARK-MODE--COMP

src/page-components/test/TestLazyLoadingSpin/TestLazyLoadingSpin.tsx

@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import React from 'react';
-import { Spin } from 'antd';
+// import { Spin } from 'antd';
 
 import { IPageBaseProps } from '@/interfaces';
 import { HtmlMeta, LazyLoadingSpin, PageWrapper } from '@/components';
@@ -23,10 +23,10 @@ export const TestLazyLoadingSpin: React.FC<IProps> = (props) => {
     >
       <HtmlMeta title={props.routeProps?.name} />
 
-      <p>123</p>
+      <h2>TestLazyLoadingSpin</h2>
 
-      {/* <LazyLoadingSpin fullscreen /> */}
-      {/* <LazyLoadingSpin style={{ color: 'red' }} /> */}
+      <LazyLoadingSpin fullscreen />
+      <LazyLoadingSpin style={{ color: 'red' }} />
     </PageWrapper>
   );
 };

src/page-components/test/TestSvgImage/TestSvgImage.tsx

@@ -0,0 +1,39 @@
+/* eslint-disable max-len */
+import cx from 'classnames';
+import React from 'react';
+
+import { IPageBaseProps } from '@/interfaces';
+import { HtmlMeta, PageWrapper } from '@/components';
+import { TestLayout } from '@/layouts';
+
+import TestSvg from './svgs/test.svg';
+import PlaySvg from './svgs/play.svg';
+
+import styles from './styles.module.less';
+
+interface IProps extends IPageBaseProps {}
+
+export const TestSvgImage: React.FC<IProps> = (props) => {
+  return (
+    <PageWrapper
+      className={cx(
+        styles['comp-wrapper'],
+        { [styles['comp-wrapper--alwaysDarkMode']]: props.alwaysDarkMode },
+        `g-comp--${TestSvgImage.displayName}`,
+        props.className,
+      )}
+      style={props.style}
+    >
+      <HtmlMeta title={props.routeProps?.name} />
+
+      <h2>TestSvg</h2>
+      <TestSvg />
+
+      <h2>PlaySvg</h2>
+      <PlaySvg />
+    </PageWrapper>
+  );
+};
+
+// @ts-ignore
+TestSvgImage.getLayout = <TestLayout mainComp={TestSvgImage} />;

src/page-components/test/TestSvgImage/styles.module.less

@@ -0,0 +1,11 @@
+@import '/src/styles/variables.less';
+@import '/src/styles/mixin.less';
+
+.comp-wrapper {
+  position: relative;
+}
+
+// DARK-MODE--COMP
+.comp-wrapper--alwaysDarkMode,
+:global(.@{THEME--DARK}) .comp-wrapper {
+}

src/pages/test/svg-image.tsx

@@ -0,0 +1,2 @@
+// eslint-disable-next-line max-len
+export { TestSvgImage as default } from '@/page-components/test/TestSvgImage/TestSvgImage';