Fix icons in SmartPlaylistRulesView, add ExplicitIcon

Author: Moos, Daniel

src/components/icons/ExplicitIcon.vue

@@ -0,0 +1,30 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    aria-hidden="true"
+  >
+    <rect
+      x="2"
+      y="2"
+      width="20"
+      height="20"
+      rx="3"
+      ry="3"
+      fill="currentColor"
+    />
+    <text
+      x="12"
+      y="17"
+      text-anchor="middle"
+      font-family="sans-serif"
+      font-size="13"
+      font-weight="bold"
+      fill="white"
+    >
+      E
+    </text>
+  </svg>
+</template>

src/components/smart_playlist/SmartPlaylistRulesView.vue

@@ -105,6 +105,7 @@
 
 <script setup lang="ts">
 import { Badge } from "@/components/ui/badge";
+import ExplicitIcon from "@/components/icons/ExplicitIcon.vue";
 import type { SmartPlaylistRules } from "@/plugins/api/interfaces";
 import { $t } from "@/plugins/i18n";
 import {
@@ -114,7 +115,6 @@ import {
   Heart,
   Library,
   Mic2,
-  ShieldAlert,
   Sparkles,
   Tags,
   Timer,
@@ -249,15 +249,15 @@ const ruleRows = computed<RuleViewRow[]>(() => {
   if (r.explicit_only === true) {
     rows.push({
       key: "explicit-is",
-      icon: ShieldAlert,
+      icon: ExplicitIcon,
       label: $t("smart_playlist.field_explicit"),
       exclude: false,
       value: $t("smart_playlist.explicit_yes"),
     });
   } else if (r.explicit_only === false) {
     rows.push({
       key: "explicit-not",
-      icon: ShieldAlert,
+      icon: Ban,
       label: $t("smart_playlist.field_explicit"),
       exclude: true,
       value: $t("smart_playlist.explicit_no"),