bfg-common 1.5.422 → 1.5.423

package/components/atoms/DiagramIcon.vue

@@ -1,400 +1,400 @@
-<template>
-  <template v-if="props.name === 'fill-port'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="14"
-      height="14"
-      viewBox="-1 -1 14 14"
-    >
-      <g>
-        <path fill="#c7e59c" d="M.5 11.5V.5h9v2h2v7h-2v2h-9z" />
-        <path
-          d="M9 1v2h2v6H9v2H1V1h8m1-1H0v12h10v-2h2V2h-2V0z"
-          fill="#60b515"
-        />
-      </g>
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'fill-adapter'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="-1 -1 14 14"
-      width="14"
-      height="14"
-    >
-      <g>
-        <path fill="#c7e59c" d="M2.5 11.5v-2h-2v-7h2v-2h9v11h-9z" />
-        <path d="M11 1v10H3V9H1V3h2V1h8m1-1H2v2H0v8h2v2h10V0z" fill="#60b515" />
-      </g>
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'outline-port'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="14"
-      height="14"
-      viewBox="-1 -1 14 14"
-    >
-      <g>
-        <path fill="#fff" d="M.5 11.5V.5h9v2h2v7h-2v2h-9z" />
-        <path
-          d="M9 1v2h2v6H9v2H1V1h8m1-1H0v12h10v-2h2V2h-2V0z"
-          fill="#36708c"
-        />
-      </g>
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'outline-port-dark-mode'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="14"
-      height="14"
-      viewBox="-1 -1 14 14"
-    >
-      <g transform="translate(253.7 234)">
-        <path
-          fill="#e9ecef"
-          d="M-244.7-233v2h2v6h-2v2h-8v-10h8zm1-1h-10v12h10v-2h2v-8h-2v-2z"
-        />
-      </g>
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'outline-adapter'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="14"
-      height="14"
-      viewBox="-1 -1 14 14"
-    >
-      <g>
-        <path fill="#fff" d="M2.5 11.5v-2h-2v-7h2v-2h9v11h-9z" />
-        <path d="M11 1v10H3V9H1V3h2V1h8m1-1H2v2H0v8h2v2h10V0z" fill="#36708c" />
-      </g>
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'v-center-play'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="#565656"
-      width="18"
-      height="18"
-      viewBox="-1 -1 38 38"
-      y="1748"
-    >
-      <path fill="none" d="M0 0h36v36H0z" />
-      <path
-        fill="#59a011"
-        d="M7 32.2a1 1 0 01-.49-.13A1 1 0 016 31.2V5a1 1 0 011.51-.86l22 13.1a1 1 0 010 1.72l-22 13.1a.94.94 0 01-.51.14zM8 6.76v22.68L27.05 18.1z"
-      />
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'info-circle'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="-1 -1 38 38"
-      fill="#565656"
-      class="info-circle"
-    >
-      <g>
-        <path
-          d="M18 27.07a1.3 1.3 0 01-1.3-1.3v-10a1.3 1.3 0 012.6 0v10a1.3 1.3 0 01-1.3 1.3z"
-        />
-        <path
-          d="M18 34a16 16 0 1116-16 16 16 0 01-16 16zm0-30a14 14 0 1014 14A14 14 0 0018 4z"
-        />
-        <circle cx="18" cy="10" r="2" />
-      </g>
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'adapter-icon'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="-1 -1 38 38"
-      fill="#59a011"
-    >
-      <path d="M0 0h36v36H0z" fill="none" />
-      <path d="M8 12h4v8H8zM16 12h4v8h-4zM24 12h4v8h-4z" />
-      <path
-        d="M8 28H4V16H2v12a2 2 0 002 2h6v-4h2v-2H8zM32 6H4a2 2 0 00-2 2v4h2V8h28v4h2V8a2 2 0 00-2-2zM32 28H12v2h20a2 2 0 002-2V16h-2z"
-      />
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'arrow-down'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="-1 -1 38 38"
-      fill="#565656"
-    >
-      <path
-        d="M8.32 20.31L18 29.92l9.66-9.61a1 1 0 00-.4-1.77 1 1 0 00-1 .38L19 26.11V7a1 1 0 00-2 0v19.11l-7.27-7.19a1 1 0 00-1.41 1.42z"
-      />
-      <path fill="none" transform="rotate(90 18 18)" d="M0 0h36v36H0z" />
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'arrow-up'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="-1 -1 38 38"
-      fill="#565656"
-    >
-      <path
-        d="M27.68 15.69L18 6.08l-9.64 9.61a1 1 0 00.4 1.77 1 1 0 001-.38L17 9.89V29a1 1 0 002 0V9.89l7.25 7.19a1 1 0 001.41-1.42z"
-      />
-      <path fill="none" transform="rotate(-90 18 18)" d="M0 0h36v36H0z" />
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'is-error'">
-    <svg
-      version="1.1"
-      viewBox="0 0 36 36"
-      xmlns="http://www.w3.org/2000/svg"
-      focusable="false"
-      fill="#fff"
-      width="28px"
-      height="28px"
-    >
-      <circle
-        data-v-3ad6d31e=""
-        class="clr-i-outline clr-i-outline-path-1"
-        cx="18"
-        cy="26.06"
-        r="1.33"
-        fill="#e02200"
-      ></circle>
-      <path
-        data-v-3ad6d31e=""
-        class="clr-i-outline clr-i-outline-path-2"
-        d="M18,22.61a1,1,0,0,1-1-1v-12a1,1,0,1,1,2,0v12A1,1,0,0,1,18,22.61Z"
-        fill="#e02200"
-      ></path>
-      <path
-        data-v-3ad6d31e=""
-        class="clr-i-outline clr-i-outline-path-3"
-        d="M18,34A16,16,0,1,1,34,18,16,16,0,0,1,18,34ZM18,4A14,14,0,1,0,32,18,14,14,0,0,0,18,4Z"
-        fill="#e02200"
-        stroke-width="4"
-        stroke="#e02200"
-      ></path>
-      <path
-        data-v-3ad6d31e=""
-        class="clr-i-solid clr-i-solid-path-1"
-        d="M18,2.1a16,16,0,1,0,16,16A16,16,0,0,0,18,2.1ZM16.6,8.8a1.4,1.4,0,0,1,2.8,0v12a1.4,1.4,0,0,1-2.8,0ZM18,28.6a1.8,1.8,0,1,1,1.8-1.8A1.8,1.8,0,0,1,18,28.6Z"
-        fill="#fff"
-      ></path>
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'is-warning'">
-    <svg
-      version="1.1"
-      viewBox="0 0 36 36"
-      xmlns="http://www.w3.org/2000/svg"
-      focusable="false"
-      width="32px"
-      height="36px"
-    >
-      <circle
-        class="clr-i-outline clr-i-outline-path-1"
-        cx="18"
-        cy="26.06"
-        r="1.33"
-        fill="#c27b00"
-      ></circle>
-      <path
-        class="clr-i-outline clr-i-outline-path-2"
-        d="M18,22.61a1,1,0,0,1-1-1v-12a1,1,0,1,1,2,0v12A1,1,0,0,1,18,22.61Z"
-        fill="#c27b00"
-      ></path>
-      <path
-        class="clr-i-outline clr-i-outline-path-3"
-        d="M15.0620782,1.681196 C15.6298819,0.649266355 16.7109091,0.0102219396 17.885,0.0102219396 C19.0590909,0.0102219396 20.1401181,0.649266355 20.7086433,1.68252129 L34.598644,27.2425225 C35.1407746,28.2401397 35.1174345,29.4495373 34.5372161,30.4254943 C33.9569977,31.4014514 32.905671,31.9996984 31.77,32 L4.02239323,31.9997492 C2.87409009,32.0254699 1.79902843,31.4375753 1.20106335,30.4569126 C0.603098265,29.4762499 0.572777899,28.2513179 1.12207818,27.241196 L15.0620782,1.681196 Z M2.87850767,28.1977282 C2.67060966,28.5800376 2.6820975,29.0441423 2.9086557,29.4156977 C3.1352139,29.7872532 3.5425354,30.0099959 4,30 L31.7697344,30 C32.1999191,29.9998858 32.5982478,29.7732208 32.8180821,29.4034482 C33.0379164,29.0336757 33.0467595,28.5754567 32.8413567,28.1974787 L18.9538739,2.64208195 C18.7394236,2.25234436 18.3298419,2.01022194 17.885,2.01022194 C17.4406889,2.01022194 17.0315538,2.25176692 16.8168946,2.64068753 L2.87850767,28.1977282 Z"
-        fill="#c27b00"
-      ></path>
-      <path
-        class="clr-i-solid clr-i-solid-path-1"
-        d="M34.6,29.21,20.71,3.65a3.22,3.22,0,0,0-5.66,0L1.17,29.21A3.22,3.22,0,0,0,4,34H31.77a3.22,3.22,0,0,0,2.83-4.75ZM16.6,10a1.4,1.4,0,0,1,2.8,0v12a1.4,1.4,0,0,1-2.8,0ZM18,29.85a1.8,1.8,0,1,1,1.8-1.8A1.8,1.8,0,0,1,18,29.85Z"
-        fill="none"
-      ></path>
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'add-adapter'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="#565656"
-      width="16"
-      height="16"
-      viewBox="-1 -1 38 38"
-    >
-      <path
-        d="M30 17H19V6a1 1 0 10-2 0v11H6a1 1 0 00-1 1 .91.91 0 001 .94h11V30a1 1 0 102 0V19h11a1 1 0 001-1 1 1 0 00-1-1z"
-      />
-      <path opacity="0" d="M0 0h36v36H0z" />
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'remove-adapter'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="#565656"
-      data-name="Layer 1"
-      width="16"
-      height="16"
-      viewBox="-1 -1 38 38"
-      y="2238"
-    >
-      <path fill="none" d="M0 0h36v36H0z" />
-      <path
-        fill="#f84e30"
-        d="M25 32a1 1 0 01-.71-.29L18 25.41l-6.29 6.3a1 1 0 01-1.42 0l-6-6a1 1 0 010-1.42l6.3-6.29-6.3-6.29a1 1 0 010-1.42l6-6a1 1 0 011.42 0l6.29 6.3 6.29-6.3a1 1 0 011.42 0l6 6a1 1 0 010 1.42L25.41 18l6.3 6.29a1 1 0 010 1.42l-6 6A1 1 0 0125 32zm-7-9a1 1 0 01.71.29l6.29 6.3L29.59 25l-6.3-6.29a1 1 0 010-1.42l6.3-6.29L25 6.41l-6.29 6.3a1 1 0 01-1.42 0L11 6.41 6.41 11l6.3 6.29a1 1 0 010 1.42L6.41 25 11 29.59l6.29-6.3A1 1 0 0118 23z"
-      />
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'adapter-carrier'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="#565656"
-      width="18"
-      height="18"
-      viewBox="-1 -1 38 38"
-      y="756"
-    >
-      <path
-        fill="#f84e30"
-        d="M19.41 18l8.29-8.29a1 1 0 00-1.41-1.41L18 16.59l-8.29-8.3a1 1 0 00-1.42 1.42l8.3 8.29-8.3 8.29A1 1 0 109.7 27.7l8.3-8.29 8.29 8.29a1 1 0 001.41-1.41z"
-      />
-      <path fill="none" d="M0 0h36v36H0z" />
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'adapter-item-icon'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="-1 -1 18 18"
-      width="18"
-      height="18"
-    >
-      <g>
-        <path fill="#cbd9e0" d="M8.5 14.5v-2h-8v-9h15v11h-7z" />
-        <path d="M15 4v10H9v-2H1V4h14m1-1H0v10h8v2h8V3z" fill="#36708c" />
-      </g>
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'adapter-item-icon-dark'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      x="136.7"
-      y="121"
-      viewBox="-1 -1 18 18"
-      xml:space="preserve"
-      width="18"
-      height="18"
-    >
-      <g transform="translate(54 236)">
-        <g>
-          <path fill="#6d7884" d="M-45.5-221.5v-2h-8v-9h15v11z" />
-          <path
-            fill="#e9ecef"
-            d="M-39-232v10h-6v-2h-8v-8h14zm1-1h-16v10h8v2h8v-12z"
-          />
-        </g>
-      </g>
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'vsphere-icon-device'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="#0091da"
-      width="38"
-      height="38"
-      viewBox="-1 -1 38 38"
-      y="380"
-    >
-      <path fill="none" d="M0 0h36v36H0z" />
-      <path d="M8 12h4v8H8zM16 12h4v8h-4zM24 12h4v8h-4z" />
-      <path
-        d="M8 28H4V16H2v12a2 2 0 002 2h6v-4h2v-2H8zM32 6H4a2 2 0 00-2 2v4h2V8h28v4h2V8a2 2 0 00-2-2zM32 28H12v2h20a2 2 0 002-2V16h-2z"
-      />
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'vsphere-icon-network'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="#565656"
-      width="38"
-      height="38"
-      viewBox="-1 -1 38 38"
-      y="152"
-    >
-      <path
-        d="M27 32H9a1 1 0 000 2h18a1 1 0 000-2zm-9-1.91a14 14 0 10-14-14 14 14 0 0014 14zm0-2a12 12 0 01-6.54-1.95 3 3 0 00.42 0A2.26 2.26 0 0014 24.8a18 18 0 007.67-3.63 2.22 2.22 0 00.82.16 2.26 2.26 0 001.75-.84 17.16 17.16 0 002.29.44 17.92 17.92 0 002.31.15h.1A12 12 0 0118 28.09zm-3.09-18a16.76 16.76 0 017.48-.77 17.27 17.27 0 013.93 1 15.66 15.66 0 01-2.9 6.71 2.23 2.23 0 00-1-.23 2.27 2.27 0 00-1.62.68 16 16 0 01-6.35-6 2.24 2.24 0 00.43-1.32zm14.24 1.59a11.87 11.87 0 01.85 4.41 12 12 0 01-.49 3.35 16.59 16.59 0 01-2.82-.1 18.39 18.39 0 01-2-.37 2.57 2.57 0 00-.16-.75 17.4 17.4 0 003.3-7.22q.68.33 1.32.72zM18 4.09a11.94 11.94 0 018.57 3.61v1a18.38 18.38 0 00-12.22-.07 2.28 2.28 0 00-1.35-.7 14.72 14.72 0 01-.47-2.5A12 12 0 0118 4.09zm-7 2.28a15.48 15.48 0 00.42 1.91 2.25 2.25 0 00-1 1.88 2.21 2.21 0 000 .37 17.92 17.92 0 00-4.3 3.9A12 12 0 0111 6.37zm.25 5.54a2.27 2.27 0 001.41.51 2.63 2.63 0 00.49-.06A17.74 17.74 0 0020.2 19v.1a2.32 2.32 0 00.25 1A16.52 16.52 0 0114 23.15a2.24 2.24 0 00-4.33.43c-.36 0-.71 0-1.07-.07a11.94 11.94 0 01-2.52-6.16 16 16 0 015.16-5.44z"
-      />
-      <path fill="none" d="M0 0h36v36H0z" />
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'vsphere-icon-switch'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="#565656"
-      width="38"
-      height="38"
-      viewBox="-1 -1 38 38"
-      y="722"
-    >
-      <g>
-        <path
-          d="M12 8h2v2h-2zM16 8h2v2h-2zM20 8h2v2h-2zM24 8h2v2h-2zM16 12h2v2h-2zM16 16h2v2h-2zM16 20h2v2h-2zM16 24h2v2h-2zM12 24h2v2h-2zM26 2H10a2 2 0 00-2 2v2h2V4h16v2h2V4a2 2 0 00-2-2zM8 12h2v10H8z"
-        />
-        <path
-          d="M26 12v20H10v-4H8v4a2 2 0 002 2h16a2 2 0 002-2V12zM8 8H3a1 1 0 000 2h5zM28 8h4.93a1 1 0 010 2H28zM8 24H3a1 1 0 000 2h5z"
-        />
-      </g>
-    </svg>
-  </template>
-  <template v-else-if="props.name === 'adapter-error'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      fill="#f84e30"
-      version="1.1"
-      class="has-solid"
-      preserveAspectRatio="xMidYMid meet"
-      focusable="false"
-      role="img"
-      viewBox="3 3 30 30"
-    >
-      <path
-        class="clr-i-outline clr-i-outline-path-1"
-        d="M18,6A12,12,0,1,0,30,18,12,12,0,0,0,18,6Zm0,22A10,10,0,1,1,28,18,10,10,0,0,1,18,28Z"
-      />
-      <path
-        class="clr-i-outline clr-i-outline-path-2"
-        d="M18,20.07a1.3,1.3,0,0,1-1.3-1.3v-6a1.3,1.3,0,1,1,2.6,0v6A1.3,1.3,0,0,1,18,20.07Z"
-      />
-      <circle
-        class="clr-i-outline clr-i-outline-path-3"
-        cx="17.95"
-        cy="23.02"
-        r="1.5"
-      />
-    </svg>
-  </template>
-  <template v-else><span></span></template>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  name: string | undefined
-}>()
-</script>
-
-<style scoped lang="scss">
-.info-circle {
-  margin-bottom: -4px;
-}
-</style>
+<template>
+  <template v-if="props.name === 'fill-port'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="-1 -1 14 14"
+    >
+      <g>
+        <path fill="#c7e59c" d="M.5 11.5V.5h9v2h2v7h-2v2h-9z" />
+        <path
+          d="M9 1v2h2v6H9v2H1V1h8m1-1H0v12h10v-2h2V2h-2V0z"
+          fill="#60b515"
+        />
+      </g>
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'fill-adapter'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="-1 -1 14 14"
+      width="14"
+      height="14"
+    >
+      <g>
+        <path fill="#c7e59c" d="M2.5 11.5v-2h-2v-7h2v-2h9v11h-9z" />
+        <path d="M11 1v10H3V9H1V3h2V1h8m1-1H2v2H0v8h2v2h10V0z" fill="#60b515" />
+      </g>
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'outline-port'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="-1 -1 14 14"
+    >
+      <g>
+        <path fill="#fff" d="M.5 11.5V.5h9v2h2v7h-2v2h-9z" />
+        <path
+          d="M9 1v2h2v6H9v2H1V1h8m1-1H0v12h10v-2h2V2h-2V0z"
+          fill="#36708c"
+        />
+      </g>
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'outline-port-dark-mode'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="-1 -1 14 14"
+    >
+      <g transform="translate(253.7 234)">
+        <path
+          fill="#e9ecef"
+          d="M-244.7-233v2h2v6h-2v2h-8v-10h8zm1-1h-10v12h10v-2h2v-8h-2v-2z"
+        />
+      </g>
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'outline-adapter'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="-1 -1 14 14"
+    >
+      <g>
+        <path fill="#fff" d="M2.5 11.5v-2h-2v-7h2v-2h9v11h-9z" />
+        <path d="M11 1v10H3V9H1V3h2V1h8m1-1H2v2H0v8h2v2h10V0z" fill="#36708c" />
+      </g>
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'v-center-play'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#565656"
+      width="18"
+      height="18"
+      viewBox="-1 -1 38 38"
+      y="1748"
+    >
+      <path fill="none" d="M0 0h36v36H0z" />
+      <path
+        fill="#59a011"
+        d="M7 32.2a1 1 0 01-.49-.13A1 1 0 016 31.2V5a1 1 0 011.51-.86l22 13.1a1 1 0 010 1.72l-22 13.1a.94.94 0 01-.51.14zM8 6.76v22.68L27.05 18.1z"
+      />
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'info-circle'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="-1 -1 38 38"
+      fill="#565656"
+      class="info-circle"
+    >
+      <g>
+        <path
+          d="M18 27.07a1.3 1.3 0 01-1.3-1.3v-10a1.3 1.3 0 012.6 0v10a1.3 1.3 0 01-1.3 1.3z"
+        />
+        <path
+          d="M18 34a16 16 0 1116-16 16 16 0 01-16 16zm0-30a14 14 0 1014 14A14 14 0 0018 4z"
+        />
+        <circle cx="18" cy="10" r="2" />
+      </g>
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'adapter-icon'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="-1 -1 38 38"
+      fill="#59a011"
+    >
+      <path d="M0 0h36v36H0z" fill="none" />
+      <path d="M8 12h4v8H8zM16 12h4v8h-4zM24 12h4v8h-4z" />
+      <path
+        d="M8 28H4V16H2v12a2 2 0 002 2h6v-4h2v-2H8zM32 6H4a2 2 0 00-2 2v4h2V8h28v4h2V8a2 2 0 00-2-2zM32 28H12v2h20a2 2 0 002-2V16h-2z"
+      />
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'arrow-down'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="-1 -1 38 38"
+      fill="#565656"
+    >
+      <path
+        d="M8.32 20.31L18 29.92l9.66-9.61a1 1 0 00-.4-1.77 1 1 0 00-1 .38L19 26.11V7a1 1 0 00-2 0v19.11l-7.27-7.19a1 1 0 00-1.41 1.42z"
+      />
+      <path fill="none" transform="rotate(90 18 18)" d="M0 0h36v36H0z" />
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'arrow-up'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="-1 -1 38 38"
+      fill="#565656"
+    >
+      <path
+        d="M27.68 15.69L18 6.08l-9.64 9.61a1 1 0 00.4 1.77 1 1 0 001-.38L17 9.89V29a1 1 0 002 0V9.89l7.25 7.19a1 1 0 001.41-1.42z"
+      />
+      <path fill="none" transform="rotate(-90 18 18)" d="M0 0h36v36H0z" />
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'is-error'">
+    <svg
+      version="1.1"
+      viewBox="0 0 36 36"
+      xmlns="http://www.w3.org/2000/svg"
+      focusable="false"
+      fill="#fff"
+      width="28px"
+      height="28px"
+    >
+      <circle
+        data-v-3ad6d31e=""
+        class="clr-i-outline clr-i-outline-path-1"
+        cx="18"
+        cy="26.06"
+        r="1.33"
+        fill="#e02200"
+      ></circle>
+      <path
+        data-v-3ad6d31e=""
+        class="clr-i-outline clr-i-outline-path-2"
+        d="M18,22.61a1,1,0,0,1-1-1v-12a1,1,0,1,1,2,0v12A1,1,0,0,1,18,22.61Z"
+        fill="#e02200"
+      ></path>
+      <path
+        data-v-3ad6d31e=""
+        class="clr-i-outline clr-i-outline-path-3"
+        d="M18,34A16,16,0,1,1,34,18,16,16,0,0,1,18,34ZM18,4A14,14,0,1,0,32,18,14,14,0,0,0,18,4Z"
+        fill="#e02200"
+        stroke-width="4"
+        stroke="#e02200"
+      ></path>
+      <path
+        data-v-3ad6d31e=""
+        class="clr-i-solid clr-i-solid-path-1"
+        d="M18,2.1a16,16,0,1,0,16,16A16,16,0,0,0,18,2.1ZM16.6,8.8a1.4,1.4,0,0,1,2.8,0v12a1.4,1.4,0,0,1-2.8,0ZM18,28.6a1.8,1.8,0,1,1,1.8-1.8A1.8,1.8,0,0,1,18,28.6Z"
+        fill="#fff"
+      ></path>
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'is-warning'">
+    <svg
+      version="1.1"
+      viewBox="0 0 36 36"
+      xmlns="http://www.w3.org/2000/svg"
+      focusable="false"
+      width="32px"
+      height="36px"
+    >
+      <circle
+        class="clr-i-outline clr-i-outline-path-1"
+        cx="18"
+        cy="26.06"
+        r="1.33"
+        fill="#c27b00"
+      ></circle>
+      <path
+        class="clr-i-outline clr-i-outline-path-2"
+        d="M18,22.61a1,1,0,0,1-1-1v-12a1,1,0,1,1,2,0v12A1,1,0,0,1,18,22.61Z"
+        fill="#c27b00"
+      ></path>
+      <path
+        class="clr-i-outline clr-i-outline-path-3"
+        d="M15.0620782,1.681196 C15.6298819,0.649266355 16.7109091,0.0102219396 17.885,0.0102219396 C19.0590909,0.0102219396 20.1401181,0.649266355 20.7086433,1.68252129 L34.598644,27.2425225 C35.1407746,28.2401397 35.1174345,29.4495373 34.5372161,30.4254943 C33.9569977,31.4014514 32.905671,31.9996984 31.77,32 L4.02239323,31.9997492 C2.87409009,32.0254699 1.79902843,31.4375753 1.20106335,30.4569126 C0.603098265,29.4762499 0.572777899,28.2513179 1.12207818,27.241196 L15.0620782,1.681196 Z M2.87850767,28.1977282 C2.67060966,28.5800376 2.6820975,29.0441423 2.9086557,29.4156977 C3.1352139,29.7872532 3.5425354,30.0099959 4,30 L31.7697344,30 C32.1999191,29.9998858 32.5982478,29.7732208 32.8180821,29.4034482 C33.0379164,29.0336757 33.0467595,28.5754567 32.8413567,28.1974787 L18.9538739,2.64208195 C18.7394236,2.25234436 18.3298419,2.01022194 17.885,2.01022194 C17.4406889,2.01022194 17.0315538,2.25176692 16.8168946,2.64068753 L2.87850767,28.1977282 Z"
+        fill="#c27b00"
+      ></path>
+      <path
+        class="clr-i-solid clr-i-solid-path-1"
+        d="M34.6,29.21,20.71,3.65a3.22,3.22,0,0,0-5.66,0L1.17,29.21A3.22,3.22,0,0,0,4,34H31.77a3.22,3.22,0,0,0,2.83-4.75ZM16.6,10a1.4,1.4,0,0,1,2.8,0v12a1.4,1.4,0,0,1-2.8,0ZM18,29.85a1.8,1.8,0,1,1,1.8-1.8A1.8,1.8,0,0,1,18,29.85Z"
+        fill="none"
+      ></path>
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'add-adapter'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#565656"
+      width="16"
+      height="16"
+      viewBox="-1 -1 38 38"
+    >
+      <path
+        d="M30 17H19V6a1 1 0 10-2 0v11H6a1 1 0 00-1 1 .91.91 0 001 .94h11V30a1 1 0 102 0V19h11a1 1 0 001-1 1 1 0 00-1-1z"
+      />
+      <path opacity="0" d="M0 0h36v36H0z" />
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'remove-adapter'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#565656"
+      data-name="Layer 1"
+      width="16"
+      height="16"
+      viewBox="-1 -1 38 38"
+      y="2238"
+    >
+      <path fill="none" d="M0 0h36v36H0z" />
+      <path
+        fill="#f84e30"
+        d="M25 32a1 1 0 01-.71-.29L18 25.41l-6.29 6.3a1 1 0 01-1.42 0l-6-6a1 1 0 010-1.42l6.3-6.29-6.3-6.29a1 1 0 010-1.42l6-6a1 1 0 011.42 0l6.29 6.3 6.29-6.3a1 1 0 011.42 0l6 6a1 1 0 010 1.42L25.41 18l6.3 6.29a1 1 0 010 1.42l-6 6A1 1 0 0125 32zm-7-9a1 1 0 01.71.29l6.29 6.3L29.59 25l-6.3-6.29a1 1 0 010-1.42l6.3-6.29L25 6.41l-6.29 6.3a1 1 0 01-1.42 0L11 6.41 6.41 11l6.3 6.29a1 1 0 010 1.42L6.41 25 11 29.59l6.29-6.3A1 1 0 0118 23z"
+      />
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'adapter-carrier'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#565656"
+      width="18"
+      height="18"
+      viewBox="-1 -1 38 38"
+      y="756"
+    >
+      <path
+        fill="#f84e30"
+        d="M19.41 18l8.29-8.29a1 1 0 00-1.41-1.41L18 16.59l-8.29-8.3a1 1 0 00-1.42 1.42l8.3 8.29-8.3 8.29A1 1 0 109.7 27.7l8.3-8.29 8.29 8.29a1 1 0 001.41-1.41z"
+      />
+      <path fill="none" d="M0 0h36v36H0z" />
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'adapter-item-icon'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="-1 -1 18 18"
+      width="18"
+      height="18"
+    >
+      <g>
+        <path fill="#cbd9e0" d="M8.5 14.5v-2h-8v-9h15v11h-7z" />
+        <path d="M15 4v10H9v-2H1V4h14m1-1H0v10h8v2h8V3z" fill="#36708c" />
+      </g>
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'adapter-item-icon-dark'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      x="136.7"
+      y="121"
+      viewBox="-1 -1 18 18"
+      xml:space="preserve"
+      width="18"
+      height="18"
+    >
+      <g transform="translate(54 236)">
+        <g>
+          <path fill="#6d7884" d="M-45.5-221.5v-2h-8v-9h15v11z" />
+          <path
+            fill="#e9ecef"
+            d="M-39-232v10h-6v-2h-8v-8h14zm1-1h-16v10h8v2h8v-12z"
+          />
+        </g>
+      </g>
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'vsphere-icon-device'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#0091da"
+      width="38"
+      height="38"
+      viewBox="-1 -1 38 38"
+      y="380"
+    >
+      <path fill="none" d="M0 0h36v36H0z" />
+      <path d="M8 12h4v8H8zM16 12h4v8h-4zM24 12h4v8h-4z" />
+      <path
+        d="M8 28H4V16H2v12a2 2 0 002 2h6v-4h2v-2H8zM32 6H4a2 2 0 00-2 2v4h2V8h28v4h2V8a2 2 0 00-2-2zM32 28H12v2h20a2 2 0 002-2V16h-2z"
+      />
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'vsphere-icon-network'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#565656"
+      width="38"
+      height="38"
+      viewBox="-1 -1 38 38"
+      y="152"
+    >
+      <path
+        d="M27 32H9a1 1 0 000 2h18a1 1 0 000-2zm-9-1.91a14 14 0 10-14-14 14 14 0 0014 14zm0-2a12 12 0 01-6.54-1.95 3 3 0 00.42 0A2.26 2.26 0 0014 24.8a18 18 0 007.67-3.63 2.22 2.22 0 00.82.16 2.26 2.26 0 001.75-.84 17.16 17.16 0 002.29.44 17.92 17.92 0 002.31.15h.1A12 12 0 0118 28.09zm-3.09-18a16.76 16.76 0 017.48-.77 17.27 17.27 0 013.93 1 15.66 15.66 0 01-2.9 6.71 2.23 2.23 0 00-1-.23 2.27 2.27 0 00-1.62.68 16 16 0 01-6.35-6 2.24 2.24 0 00.43-1.32zm14.24 1.59a11.87 11.87 0 01.85 4.41 12 12 0 01-.49 3.35 16.59 16.59 0 01-2.82-.1 18.39 18.39 0 01-2-.37 2.57 2.57 0 00-.16-.75 17.4 17.4 0 003.3-7.22q.68.33 1.32.72zM18 4.09a11.94 11.94 0 018.57 3.61v1a18.38 18.38 0 00-12.22-.07 2.28 2.28 0 00-1.35-.7 14.72 14.72 0 01-.47-2.5A12 12 0 0118 4.09zm-7 2.28a15.48 15.48 0 00.42 1.91 2.25 2.25 0 00-1 1.88 2.21 2.21 0 000 .37 17.92 17.92 0 00-4.3 3.9A12 12 0 0111 6.37zm.25 5.54a2.27 2.27 0 001.41.51 2.63 2.63 0 00.49-.06A17.74 17.74 0 0020.2 19v.1a2.32 2.32 0 00.25 1A16.52 16.52 0 0114 23.15a2.24 2.24 0 00-4.33.43c-.36 0-.71 0-1.07-.07a11.94 11.94 0 01-2.52-6.16 16 16 0 015.16-5.44z"
+      />
+      <path fill="none" d="M0 0h36v36H0z" />
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'vsphere-icon-switch'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#565656"
+      width="38"
+      height="38"
+      viewBox="-1 -1 38 38"
+      y="722"
+    >
+      <g>
+        <path
+          d="M12 8h2v2h-2zM16 8h2v2h-2zM20 8h2v2h-2zM24 8h2v2h-2zM16 12h2v2h-2zM16 16h2v2h-2zM16 20h2v2h-2zM16 24h2v2h-2zM12 24h2v2h-2zM26 2H10a2 2 0 00-2 2v2h2V4h16v2h2V4a2 2 0 00-2-2zM8 12h2v10H8z"
+        />
+        <path
+          d="M26 12v20H10v-4H8v4a2 2 0 002 2h16a2 2 0 002-2V12zM8 8H3a1 1 0 000 2h5zM28 8h4.93a1 1 0 010 2H28zM8 24H3a1 1 0 000 2h5z"
+        />
+      </g>
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'adapter-error'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      fill="#f84e30"
+      version="1.1"
+      class="has-solid"
+      preserveAspectRatio="xMidYMid meet"
+      focusable="false"
+      role="img"
+      viewBox="3 3 30 30"
+    >
+      <path
+        class="clr-i-outline clr-i-outline-path-1"
+        d="M18,6A12,12,0,1,0,30,18,12,12,0,0,0,18,6Zm0,22A10,10,0,1,1,28,18,10,10,0,0,1,18,28Z"
+      />
+      <path
+        class="clr-i-outline clr-i-outline-path-2"
+        d="M18,20.07a1.3,1.3,0,0,1-1.3-1.3v-6a1.3,1.3,0,1,1,2.6,0v6A1.3,1.3,0,0,1,18,20.07Z"
+      />
+      <circle
+        class="clr-i-outline clr-i-outline-path-3"
+        cx="17.95"
+        cy="23.02"
+        r="1.5"
+      />
+    </svg>
+  </template>
+  <template v-else><span></span></template>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  name: string | undefined
+}>()
+</script>
+
+<style scoped lang="scss">
+.info-circle {
+  margin-bottom: -4px;
+}
+</style>