🛠️ Fix #215

Author: SnaveSutit

src/components/icon.svelte

@@ -1,22 +1,8 @@
 <script lang="ts" context="module">
-	import { onDestroy } from 'svelte'
 	import AnimatedJavaIcon from '../assets/animated_java_icon.svg'
 </script>
 
-<script lang="ts">
-	let selected = false
-
-	const parent = document.querySelector('[format=animated_java_blueprint]')!
-	const interval = setInterval(() => {
-		selected = parent.classList.contains('selected')
-	}, 16)
-
-	onDestroy(() => {
-		clearInterval(interval)
-	})
-</script>
-
-<span class="icon_wrapper f_left">
+<span class="icon_wrapper f_left" id="animated_java:icon">
 	<img src={AnimatedJavaIcon} alt="" />
 </span>
 

src/mods/formatIconMod.ts

@@ -1,12 +1,25 @@
 import Icon from '../components/icon.svelte'
+import { PACKAGE } from '../constants'
 import { injectSvelteCompomponent } from '../util/injectSvelte'
+import { createBlockbenchMod } from '../util/moddingTools'
 
-void injectSvelteCompomponent({
-	elementSelector: () => document.querySelector('[format=animated_java_blueprint]'),
-	svelteComponent: Icon,
-	svelteComponentProperties: {},
-	prepend: true,
-	postMount: () => {
-		document.querySelector('[format=animated_java_blueprint] span i')?.parentElement?.remove()
+createBlockbenchMod(
+	`${PACKAGE.name}:formatIconMod`,
+	undefined,
+	() => {
+		void injectSvelteCompomponent({
+			elementSelector: () => document.querySelector('[format=animated_java_blueprint]'),
+			svelteComponent: Icon,
+			svelteComponentProperties: {},
+			prepend: true,
+			postMount: () => {
+				document
+					.querySelector('[format=animated_java_blueprint] span i')
+					?.parentElement?.remove()
+			},
+		})
 	},
-})
+	() => {
+		document.querySelector('#animated_java\\:icon')?.remove()
+	}
+)