Display learning unit icons based on name

client/src/components/learningPath/CircleDiagram.vue

@@ -5,6 +5,7 @@ import * as d3 from "d3";
 import pick from "lodash/pick";
 import * as log from "loglevel";
 import { computed, onMounted } from "vue";
+import { showIcon } from "./learningSequenceUtils";
 
 // @ts-ignore
 import colors from "@/colors.json";
@@ -208,7 +209,7 @@ function render() {
     const learningSequenceIcon = learningSequences
       .append("svg:image")
       .attr("xlink:href", (d) => {
-        if (["it-icon-ls-start", "it-icon-ls-end"].some((icon) => icon === d.icon)) {
+        if (showIcon(d.icon)) {
           return "/static/icons/" + d.icon.replace("it-", "") + ".svg";
         }
         return "";

client/src/components/learningPath/LearningSequence.vue

@@ -10,11 +10,12 @@ import { humanizeDuration } from "@/utils/humanizeDuration";
 import findLast from "lodash/findLast";
 import { computed } from "vue";
 import LearningContentBadge from "./LearningContentTypeBadge.vue";
+import { showIcon } from "./learningSequenceUtils";
 
-interface Props {
+type Props = {
   learningSequence: LearningSequence;
   readonly?: boolean;
-}
+};
 
 const props = withDefaults(defineProps<Props>(), {
   readonly: false,
@@ -91,7 +92,7 @@ const learningSequenceBorderClass = computed(() => {
 <template>
   <div :id="learningSequence.slug" class="learning-sequence mb-8">
     <div class="mb-2 flex items-center gap-4 text-blue-900">
-      <component :is="learningSequence.icon" />
+      <component v-if="showIcon(learningSequence.icon)" :is="learningSequence.icon" />
       <h3 class="text-large font-semibold">
         {{ learningSequence.title }}
       </h3>

client/src/components/learningPath/learningSequenceUtils.ts

@@ -0,0 +1,3 @@
+export function showIcon(iconName: string): boolean {
+  return ["it-icon-ls-start", "it-icon-ls-end"].some((icon) => icon === iconName);
+}