feat: use SVGR to load SVGs as components

package.json

@@ -25,6 +25,7 @@
     "@stylable/cli": "^5.8.0",
     "@stylable/runtime": "^5.8.0",
     "@stylable/webpack-plugin": "^5.8.0",
+    "@svgr/webpack": "^6.5.1",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.56.0",

src/header.st.css

@@ -4,4 +4,4 @@
 
 .anchor {}
 
-.icon {}
+.logo {}

src/header.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { st, classes } from './header.st.css';
-import stylableLogo from './assets/stylable.svg';
+import StylableLogo from './assets/stylable.svg';
 
 export interface HeaderProps {
     className?: string;
@@ -19,7 +19,13 @@ export const Header: React.FC<HeaderProps> = ({ className }) => {
                 >
                     Stylable!
                 </a>{' '}
-                <img className={classes.icon} src={stylableLogo} width={50} height={50} alt="" />
+                <img
+                    src={StylableLogo}
+                    className={classes.logo}
+                    width="60"
+                    height="60"
+                    title="Stylable Logo"
+                />
             </h1>
         </header>
     );

tsconfig.json

@@ -75,7 +75,6 @@
 
     /* Interop Constraints */
     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
-    "verbatimModuleSyntax": true,                        /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
     "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */

typings/globals.d.ts

@@ -5,6 +5,21 @@ declare module '*.st.css' {
     export default defaultExport;
 }
 
+declare module '*.svg' {
+    import * as React from 'react';
+
+    export const ReactComponent: React.FunctionComponent<
+        React.ComponentProps<'svg'> & { title?: string }
+    >;
+
+    export default ReactComponent;
+}
+
+declare module '*.svg?url' {
+    const assetUrl: string;
+    export default assetUrl;
+}
+
 declare module '*.png' {
     const urlToFile: string;
     export default urlToFile;
@@ -24,8 +39,3 @@ declare module '*.gif' {
     const urlToFile: string;
     export default urlToFile;
 }
-
-declare module '*.svg' {
-    const urlToFile: string;
-    export default urlToFile;
-}

webpack.config.js

@@ -17,7 +17,23 @@ export default {
                 },
             },
             {
-                test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/,
+                test: /\.svg$/i,
+                type: 'asset',
+                resourceQuery: /url/, // *.svg?url
+            },
+            {
+                test: /\.svg$/i,
+                issuer: /\.[jt]sx?$/,
+                resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
+                use: [
+                    {
+                        loader: '@svgr/webpack',
+                        options: {},
+                    },
+                ],
+            },
+            {
+                test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2)$/,
                 type: 'asset',
             },
         ],