Merge pull request #1142 from dpc-sdp/fix/r20-1973-acknowledgement-im…

…g-fix

[R20-1973] Acknowledgement img fix

.vscode/extensions.json

@@ -10,7 +10,6 @@
     "editorconfig.editorconfig",
     "stylelint.vscode-stylelint",
     "alexkrechik.cucumberautocomplete",
-    "circleci.circleci",
     "nuxt.mdc"
   ]
 }

packages/ripple-ui-core/package.json

@@ -79,7 +79,6 @@
     "vite-plugin-dts": "^2.1.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-vue-svg": "^0.1.0",
-    "vite-svg-loader": "^4.0.0",
     "yaml": "^2.2.2"
   }
 }

packages/ripple-ui-core/src/components/acknowledgement/RplAcknowledgement.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import aboriginalFlag from './../../assets/flags/flag-aboriginal.svg?url'
-import torresStraitIslanderFlag from './../../assets/flags/flag-torres-strait-islander.svg?url'
-import RplImage from '../image/RplImage.vue'
+// @ts-expect-error TS2307 import is an asset
+import aboriginalFlag from './../../assets/flags/flag-aboriginal.svg?data'
+// @ts-expect-error TS2307 import is an asset
+import torresStraitIslanderFlag from './../../assets/flags/flag-torres-strait-islander.svg?data'
 
 interface Props {
   message?: string
@@ -16,19 +17,23 @@ withDefaults(defineProps<Props>(), {
 <template>
   <div class="rpl-acknowledgement rpl-u-screen-only">
     <div class="rpl-acknowledgement__flags">
-      <RplImage
-        class="rpl-acknowledgement__flag"
+      <img
         :src="aboriginalFlag"
-        :width="55"
-        :height="38"
         alt="Aboriginal flag"
+        width="55"
+        height="38"
+        class="rpl-image rpl-image--cover rpl-acknowledgement__flag"
+        loading="lazy"
+        fetchpriority="auto"
       />
-      <RplImage
-        class="rpl-acknowledgement__flag"
-        :width="55"
-        :height="38"
+      <img
         :src="torresStraitIslanderFlag"
         alt="Torres Strait Islander flag"
+        width="55"
+        height="38"
+        class="rpl-image rpl-image--cover rpl-acknowledgement__flag"
+        loading="lazy"
+        fetchpriority="auto"
       />
     </div>
     <p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">

packages/ripple-ui-core/src/vite.plugins.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import svgLoader from 'vite-svg-loader'
 export default [
   svgLoader({
@@ -25,7 +24,6 @@ export default [
         },
         {
           name: 'removeAttributesBySelector',
-          // @ts-ignore
           params: {
             selector: "[style='fill:#*']",
             attributes: 'style'