fix: Build(webpack/rollup) - svgr - exportType:default

Author: apostololeg

.npmignore

@@ -1,7 +1,7 @@
 /index.*
 bin/
 build/
-src/
+/src/
 dist/esm/types/src/docs/
 assets/
 CHANGELOG.md

package.json

@@ -43,6 +43,7 @@
     "@homecode/ui": "^4.17.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@rollup/plugin-typescript": "^11.0.0",
+    "@svgr/webpack": "^8.1.0",
     "classnames": "^2.3.2",
     "compareq": "^1.2.2",
     "fastest-validator": "^1.16.0",
@@ -104,7 +105,6 @@
     "postcss-preset-env": "^8.0.1",
     "raw-loader": "^4.0.2",
     "react-hot-loader": "^4.13.1",
-    "react-svg-loader": "^3.0.3",
     "replace": "^1.2.2",
     "rollup": "^3.17.1",
     "rollup-plugin-delete": "^2.0.0",

rollup.config.ts

@@ -87,7 +87,7 @@ export default [
 
       json(),
 
-      svgr(),
+      svgr({ exportType: 'default' }),
       // styles({ modules: true }),
       // stylusCssModules({ output: 'index.css' }),
 

src/components/Spinner/Spinner.tsx

@@ -1,6 +1,6 @@
 import cn from 'classnames';
 
-import { ReactComponent as SpinnerIcon } from './spinner.svg';
+import SpinnerIcon from './spinner.svg';
 import S from './Spinner.styl';
 import * as T from './Spinner.types';
 

src/docs/components/Code/Code.styl

@@ -54,6 +54,9 @@
   border-radius inherit
   flex 1
 
+  @media(orientation: portrait)
+    height 50%
+
 .editorContainer
   position relative
   border-bottom-left-radius 0
@@ -142,11 +145,14 @@
   .editorContainer
     max-height 60vh
 
-  .preview::before
-    left 1px
-    right 1px
-    height 1px
-    width unset
+  .preview
+    max-height 100%
+
+    &::before
+      left 1px
+      right 1px
+      height 1px
+      width unset
 
 @media (orientation: landscape)
   .preview

src/docs/config/webpack.config.js

@@ -86,24 +86,12 @@ export default (env, argv) => {
         },
         {
           test: /\.svg$/,
-          exclude: paths.modules,
-          oneOf: [
-            {
-              issuer: /\.(t|j)sx?$/,
-              use: [
-                {
-                  loader: 'babel-loader',
-                },
-                {
-                  loader: 'react-svg-loader',
-                },
-              ],
-            },
+          use: [
             {
-              loader: 'file-loader',
+              loader: '@svgr/webpack',
               options: {
-                name: 'static/[name].[ext]',
-                outputPath: 'images/',
+                icon: true,
+                exportType: 'default', // Set to 'default' to use default import
               },
             },
           ],