feat(ids): prefix all ids and references with a unique string [KHCP-13216]

package.json

@@ -59,7 +59,6 @@
     "@semantic-release/git": "^10.0.1",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.15.0",
-    "@types/node-emoji": "^2.1.0",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vitest/ui": "^2.0.5",
     "@vue/test-utils": "^2.4.6",

scripts/utilities/__snapshots__/generate-icon-components.spec.ts.snap

@@ -730,6 +730,7 @@ exports[`generate > does not remove icons from the previous build 1`] = `
   "InsomniaIcon.vue",
   "ItalicIcon.vue",
   "KeyboardReturnIcon.vue",
+  "KongGradientIcon.vue",
   "KongIcon.vue",
   "LanguageBashIcon.vue",
   "LanguageCIcon.vue",

src/__template__/ComponentTemplate.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 /** {%%ICON_COMPONENT_FILE_HEADER%%} */
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { KUI_ICON_SIZE_50 } from '@kong/design-tokens'
 
 const props = defineProps({
@@ -56,6 +56,15 @@ const props = defineProps({
     required: false,
     default: 'span',
   },
+  /**
+   * A boolean to enable prefixing any internal SVG ids with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes ids and references internally (e.g. in the `<defs>` tag).
+   * Typically only set to false during snapshot testing.
+   * Defaults to `true`.
+   */
+  randomizeIds: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const iconSize = computed((): string => {
@@ -90,6 +99,48 @@ const rootElementStyles = computed((): Record<string, string> => ({
   lineHeight: '0',
   width: iconSize.value,
 }))
+
+/**
+ * Prefix all SVG IDs in the given SVG string with a random prefix to ensure uniqueness.
+ *
+ * This function performs the following steps:
+ * 1. Generates a random prefix.
+ * 2. Replaces all `id` attributes in the SVG string with the new prefixed IDs.
+ * 3. Updates all ID references (e.g., `url(#id)`, `href="#id"`, etc.) to use the new prefixed IDs.
+ *
+ * @param {string} svgString - The SVG string in which to prefix IDs.
+ * @returns {string} - The SVG string with prefixed IDs.
+ */
+const prefixSvgIdsInString = (svgString: string): string => {
+  const idMap: Record<string, string> = {}
+  const randomPrefix = Math.random().toString(36).substring(2, 12)
+
+  // Replace IDs in the SVG string
+  const updatedSvgString = svgString.replace(/id="([^"]+)"/g, (match, originalId) => {
+    const newId = `${randomPrefix}-${originalId}`
+    idMap[originalId] = newId
+    return `id="${newId}"`
+  })
+
+  // Replace ID references (e.g., url(#id), href="#id", etc.)
+  const processedSvgString = updatedSvgString
+    .replace(/url\(#([^)]+)\)/g, (match, originalId) => idMap[originalId] ? `url(#${idMap[originalId]})` : match)
+    .replace(/#([^\s]+)/g, (match, originalId) => idMap[originalId] ? `#${idMap[originalId]}` : match)
+
+  // Return the processed SVG string
+  return processedSvgString
+}
+
+// Initially set `svgOriginalContent` to a template string. We will then do a dynamic replacement of any ids in the SVG string.
+// eslint-disable-next-line @stylistic/quotes
+const svgOriginalContent = ref<string>(`{%%ICON_SVG_INNER_HTML%%}`)
+const svgProcessedContent = computed((): string => {
+  if (props.randomizeIds) {
+    return prefixSvgIdsInString(svgOriginalContent.value)
+  }
+
+  return svgOriginalContent.value
+})
 </script>
 
 <template>
@@ -116,14 +167,16 @@ const rootElementStyles = computed((): Record<string, string> => ({
       >
         {{ title }}
       </title>
-      {%%ICON_SVG_INNER_HTML%%}
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <g v-html="svgProcessedContent" />
     </svg>
   </component>
 </template>
 
 <style lang="scss" scoped>
 /**
- * We are adding styles inline to avoid additional stylesheet imports in the host application/component.
- * Do not add styles into this component file.
+ * !Important: Do not add styles into this component file.
+ *
+ * We are adding styles inline to avoid additional stylesheet imports in the consuming application/component.
  */
 </style>

src/tests/__snapshots__/AddChartIcon.html

@@ -1 +1 @@
-<span data-v-2fd133ee="" class="kui-icon add-chart-icon" data-testid="kui-icon-wrapper-add-chart-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-v-2fd133ee="" data-testid="kui-icon-svg-add-chart-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-v-2fd133ee="" data-testid="kui-icon-svg-title">My custom title</title><path data-v-2fd133ee="" d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H14V5H5V19H19V10H21V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM7 17H9V10H7V17ZM11 17H13V7H11V17ZM15 17H17V13H15V17ZM17 9V7H15V5H17V3H19V5H21V7H19V9H17Z" fill="currentColor"></path></svg></span>
+<span data-v-2fd133ee="" class="kui-icon add-chart-icon" data-testid="kui-icon-wrapper-add-chart-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-v-2fd133ee="" data-testid="kui-icon-svg-add-chart-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-v-2fd133ee="" data-testid="kui-icon-svg-title">My custom title</title><!-- eslint-disable-next-line vue/no-v-html --><g data-v-2fd133ee=""><path d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H14V5H5V19H19V10H21V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM7 17H9V10H7V17ZM11 17H13V7H11V17ZM15 17H17V13H15V17ZM17 9V7H15V5H17V3H19V5H21V7H19V9H17Z" fill="currentColor"></path></g></svg></span>

src/tests/__snapshots__/AddCircleIcon.html

@@ -1 +1 @@
-<span data-v-78cbb050="" class="kui-icon add-circle-icon" data-testid="kui-icon-wrapper-add-circle-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-v-78cbb050="" data-testid="kui-icon-svg-add-circle-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-v-78cbb050="" data-testid="kui-icon-svg-title">My custom title</title><path data-v-78cbb050="" d="M11 17H13V13H17V11H13V7H11V11H7V13H11V17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="currentColor"></path></svg></span>
+<span data-v-78cbb050="" class="kui-icon add-circle-icon" data-testid="kui-icon-wrapper-add-circle-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-v-78cbb050="" data-testid="kui-icon-svg-add-circle-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-v-78cbb050="" data-testid="kui-icon-svg-title">My custom title</title><!-- eslint-disable-next-line vue/no-v-html --><g data-v-78cbb050=""><path d="M11 17H13V13H17V11H13V7H11V11H7V13H11V17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="currentColor"></path></g></svg></span>

src/tests/__snapshots__/AddIcon.html

@@ -1 +1 @@
-<span data-v-9520c875="" class="kui-icon add-icon" data-testid="kui-icon-wrapper-add-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-v-9520c875="" data-testid="kui-icon-svg-add-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-v-9520c875="" data-testid="kui-icon-svg-title">My custom title</title><path data-v-9520c875="" d="M11 19V13H5V11H11V5H13V11H19V13H13V19H11Z" fill="currentColor"></path></svg></span>
+<span data-v-9520c875="" class="kui-icon add-icon" data-testid="kui-icon-wrapper-add-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-v-9520c875="" data-testid="kui-icon-svg-add-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-v-9520c875="" data-testid="kui-icon-svg-title">My custom title</title><!-- eslint-disable-next-line vue/no-v-html --><g data-v-9520c875=""><path d="M11 19V13H5V11H11V5H13V11H19V13H13V19H11Z" fill="currentColor"></path></g></svg></span>

src/tests/__snapshots__/AnalyticsIcon.html

@@ -1 +1 @@
-<span data-v-171e7d2b="" class="kui-icon analytics-icon" data-testid="kui-icon-wrapper-analytics-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-v-171e7d2b="" data-testid="kui-icon-svg-analytics-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-v-171e7d2b="" data-testid="kui-icon-svg-title">My custom title</title><path data-v-171e7d2b="" d="M7 17H9V12H7V17ZM15 17H17V7H15V17ZM11 17H13V14H11V17ZM11 12H13V10H11V12ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z" fill="currentColor"></path></svg></span>
+<span data-v-171e7d2b="" class="kui-icon analytics-icon" data-testid="kui-icon-wrapper-analytics-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-v-171e7d2b="" data-testid="kui-icon-svg-analytics-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-v-171e7d2b="" data-testid="kui-icon-svg-title">My custom title</title><!-- eslint-disable-next-line vue/no-v-html --><g data-v-171e7d2b=""><path d="M7 17H9V12H7V17ZM15 17H17V7H15V17ZM11 17H13V14H11V17ZM11 12H13V10H11V12ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z" fill="currentColor"></path></g></svg></span>

src/tests/__snapshots__/AppleIcon.html

@@ -1 +1 @@
-<span data-v-95a43613="" class="kui-icon apple-icon" data-testid="kui-icon-wrapper-apple-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-v-95a43613="" data-testid="kui-icon-svg-apple-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-v-95a43613="" data-testid="kui-icon-svg-title">My custom title</title><path data-v-95a43613="" d="M20.3399 8.50055C20.2123 8.59956 17.9593 9.86909 17.9593 12.692C17.9593 15.9571 20.8262 17.1122 20.912 17.1408C20.8988 17.2112 20.4565 18.7228 19.4004 20.2629C18.4587 21.6183 17.4752 22.9714 15.9791 22.9714C14.4829 22.9714 14.0979 22.1023 12.3707 22.1023C10.6876 22.1023 10.0891 23 8.72057 23C7.35203 23 6.39714 21.7459 5.29923 20.2057C4.0275 18.3971 3 15.5875 3 12.9208C3 8.64356 5.78108 6.37514 8.51815 6.37514C9.9725 6.37514 11.1848 7.33003 12.0979 7.33003C12.967 7.33003 14.3223 6.31793 15.9769 6.31793C16.604 6.31793 18.857 6.37514 20.3399 8.50055ZM15.1914 4.50715C15.8757 3.69527 16.3597 2.56876 16.3597 1.44224C16.3597 1.28603 16.3465 1.12761 16.3179 1C15.2046 1.0418 13.8801 1.74147 13.0814 2.66777C12.4543 3.38064 11.8691 4.50715 11.8691 5.64907C11.8691 5.82068 11.8977 5.9923 11.9109 6.0473C11.9813 6.06051 12.0957 6.07591 12.2101 6.07591C13.209 6.07591 14.4653 5.40704 15.1914 4.50715Z" fill="black"></path></svg></span>
+<span data-v-95a43613="" class="kui-icon apple-icon" data-testid="kui-icon-wrapper-apple-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-v-95a43613="" data-testid="kui-icon-svg-apple-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-v-95a43613="" data-testid="kui-icon-svg-title">My custom title</title><!-- eslint-disable-next-line vue/no-v-html --><g data-v-95a43613=""><path d="M20.3399 8.50055C20.2123 8.59956 17.9593 9.86909 17.9593 12.692C17.9593 15.9571 20.8262 17.1122 20.912 17.1408C20.8988 17.2112 20.4565 18.7228 19.4004 20.2629C18.4587 21.6183 17.4752 22.9714 15.9791 22.9714C14.4829 22.9714 14.0979 22.1023 12.3707 22.1023C10.6876 22.1023 10.0891 23 8.72057 23C7.35203 23 6.39714 21.7459 5.29923 20.2057C4.0275 18.3971 3 15.5875 3 12.9208C3 8.64356 5.78108 6.37514 8.51815 6.37514C9.9725 6.37514 11.1848 7.33003 12.0979 7.33003C12.967 7.33003 14.3223 6.31793 15.9769 6.31793C16.604 6.31793 18.857 6.37514 20.3399 8.50055ZM15.1914 4.50715C15.8757 3.69527 16.3597 2.56876 16.3597 1.44224C16.3597 1.28603 16.3465 1.12761 16.3179 1C15.2046 1.0418 13.8801 1.74147 13.0814 2.66777C12.4543 3.38064 11.8691 4.50715 11.8691 5.64907C11.8691 5.82068 11.8977 5.9923 11.9109 6.0473C11.9813 6.06051 12.0957 6.07591 12.2101 6.07591C13.209 6.07591 14.4653 5.40704 15.1914 4.50715Z" fill="black"></path></g></svg></span>

src/tests/__snapshots__/ArrowDownIcon.html

@@ -1 +1 @@
-<span data-v-8c015cb2="" class="kui-icon arrow-down-icon" data-testid="kui-icon-wrapper-arrow-down-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-v-8c015cb2="" data-testid="kui-icon-svg-arrow-down-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-v-8c015cb2="" data-testid="kui-icon-svg-title">My custom title</title><path data-v-8c015cb2="" d="M12 20L4 12L5.4 10.575L11 16.175V4H13V16.175L18.6 10.575L20 12L12 20Z" fill="currentColor"></path></svg></span>
+<span data-v-8c015cb2="" class="kui-icon arrow-down-icon" data-testid="kui-icon-wrapper-arrow-down-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-v-8c015cb2="" data-testid="kui-icon-svg-arrow-down-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-v-8c015cb2="" data-testid="kui-icon-svg-title">My custom title</title><!-- eslint-disable-next-line vue/no-v-html --><g data-v-8c015cb2=""><path d="M12 20L4 12L5.4 10.575L11 16.175V4H13V16.175L18.6 10.575L20 12L12 20Z" fill="currentColor"></path></g></svg></span>

src/tests/__snapshots__/ArrowLeftIcon.html

@@ -1 +1 @@
-<span data-v-8c5fec7f="" class="kui-icon arrow-left-icon" data-testid="kui-icon-wrapper-arrow-left-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-v-8c5fec7f="" data-testid="kui-icon-svg-arrow-left-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-v-8c5fec7f="" data-testid="kui-icon-svg-title">My custom title</title><path data-v-8c5fec7f="" d="M12 20L4 12L12 4L13.425 5.4L7.825 11H20V13H7.825L13.425 18.6L12 20Z" fill="currentColor"></path></svg></span>
+<span data-v-8c5fec7f="" class="kui-icon arrow-left-icon" data-testid="kui-icon-wrapper-arrow-left-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-v-8c5fec7f="" data-testid="kui-icon-svg-arrow-left-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-v-8c5fec7f="" data-testid="kui-icon-svg-title">My custom title</title><!-- eslint-disable-next-line vue/no-v-html --><g data-v-8c5fec7f=""><path d="M12 20L4 12L12 4L13.425 5.4L7.825 11H20V13H7.825L13.425 18.6L12 20Z" fill="currentColor"></path></g></svg></span>

src/tests/__snapshots__/ArrowRightIcon.html

@@ -1 +1 @@
-<span data-v-3afe2357="" class="kui-icon arrow-right-icon" data-testid="kui-icon-wrapper-arrow-right-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-v-3afe2357="" data-testid="kui-icon-svg-arrow-right-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-v-3afe2357="" data-testid="kui-icon-svg-title">My custom title</title><path data-v-3afe2357="" d="M12 20L10.575 18.6L16.175 13H4V11H16.175L10.575 5.4L12 4L20 12L12 20Z" fill="currentColor"></path></svg></span>
+<span data-v-3afe2357="" class="kui-icon arrow-right-icon" data-testid="kui-icon-wrapper-arrow-right-icon" style="box-sizing: border-box; color: rgb(0, 68, 244); display: inline-flex; flex-shrink: 0; height: 32px; line-height: 0; width: 32px;"><svg data-v-3afe2357="" data-testid="kui-icon-svg-arrow-right-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><title data-v-3afe2357="" data-testid="kui-icon-svg-title">My custom title</title><!-- eslint-disable-next-line vue/no-v-html --><g data-v-3afe2357=""><path d="M12 20L10.575 18.6L16.175 13H4V11H16.175L10.575 5.4L12 4L20 12L12 20Z" fill="currentColor"></path></g></svg></span>