fix: switch icon to png & add needed configuration

Staffbase · Jun 3, 2024 · 9b9261c · 9b9261c
1 parent 23a2fec
commit 9b9261c
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 4 deletions.
diff --git a/samples/weather-forecast/jest.config.js b/samples/weather-forecast/jest.config.js
@@ -2,8 +2,8 @@ module.exports = {
   setupFilesAfterEnv: ["./test/jest-setup.js"],
   resetMocks: true,
   moduleNameMapper: {
-    'icons/(.*)\.svg$': '<rootDir>/__mocks__/lazySvgMock.js',
-    '\\.svg$': '<rootDir>/__mocks__/fileMock.js',
+    'icons/(.*)\.(png|svg)$': '<rootDir>/__mocks__/lazySvgMock.js',
+    '\\.(png|svg)$': '<rootDir>/__mocks__/fileMock.js',
   },
   testEnvironment: 'jsdom',
 };
diff --git a/samples/weather-forecast/package.json b/samples/weather-forecast/package.json
@@ -73,6 +73,7 @@
     "ts-loader": "^9.2.5",
     "ts-node": "10.2.1",
     "typescript": "4.4.2",
+    "url-loader": "^4.1.1",
     "webpack": "^5.51.1",
     "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^4.1.0",

diff --git a/...r-forecast/resources/weather-forecast.svg → ...recast/resources/old-weather-forecast.svg b/...r-forecast/resources/weather-forecast.svg → ...recast/resources/old-weather-forecast.svg
diff --git a/samples/weather-forecast/src/index.tsx b/samples/weather-forecast/src/index.tsx
@@ -23,7 +23,7 @@ import {
 import { WeatherForecastProps, WeatherForecast } from "./weather-forecast";
 import { configurationSchema, uiSchema } from "./configuration-schema";
 import pkg from "../package.json";
-import icon from "../resources/weather-forecast.svg";
+import widgetIcon from "../weather-forecast.png";
 
 /**
  * This factory creates the class which is registered with the tagname in the `custom element registry`
@@ -80,7 +80,7 @@ const blockDefinition: BlockDefinition = {
   configurationSchema: configurationSchema,
   uiSchema: uiSchema,
   label: "Weather",
-  iconUrl: icon,
+  iconUrl: widgetIcon,
 };
 
 /**

diff --git a/samples/weather-forecast/src/types/assets.d.ts b/samples/weather-forecast/src/types/assets.d.ts
@@ -0,0 +1,4 @@
+declare module "*.png" {
+    const value: any;
+    export default value;
+  }
diff --git a/samples/weather-forecast/weather-forecast.png b/samples/weather-forecast/weather-forecast.png
diff --git a/samples/weather-forecast/webpack.common.ts b/samples/weather-forecast/webpack.common.ts
@@ -30,6 +30,17 @@ const config: webpack.Configuration = {
         test: /\.svg$/i,
         use: ["@svgr/webpack"],
       },
+      {
+        test: /\.(png|jpg|gif)$/i,
+        use: [
+          {
+            loader: "url-loader",
+            options: {
+              limit: 8192,
+            },
+          },
+        ],
+      },
     ],
   },
   resolve: {

diff --git a/samples/weather-forecast/yarn.lock b/samples/weather-forecast/yarn.lock
@@ -8305,6 +8305,15 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+url-loader@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
+  integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==
+  dependencies:
+    loader-utils "^2.0.0"
+    mime-types "^2.1.27"
+    schema-utils "^3.0.0"
+
 url@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"