✨ (article) add icons and multiple flow steps

src/icons/BaseIcon.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ color: string }>(), {
+  color: 'var(--primary-color)'
+})
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon icon-tabler icon-tabler-search"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    stroke-width="3"
+    :stroke="color"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <slot />
+  </svg>
+</template>
+
+<style>
+svg {
+  vertical-align: text-bottom;
+}
+</style>

src/icons/ProblemSolvingIcon.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import BaseIcon from './BaseIcon.vue'
+
+withDefaults(defineProps<{ color: string }>(), {
+  color: 'var(--primary-color)'
+})
+</script>
+
+<template>
+  <BaseIcon :color="color">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
+    <path d="M21 21l-6 -6" />
+  </BaseIcon>
+</template>

src/icons/PullSystemIcon.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import BaseIcon from './BaseIcon.vue'
+
+withDefaults(defineProps<{ color: string }>(), {
+  color: 'var(--primary-color)'
+})
+</script>
+
+<template>
+  <BaseIcon :color="color">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M20 12l-10 0" />
+    <path d="M20 12l-4 4" />
+    <path d="M20 12l-4 -4" />
+    <path d="M4 4l0 16" />
+  </BaseIcon>
+</template>

src/icons/PushSystemIcon.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import BaseIcon from './BaseIcon.vue'
+
+withDefaults(defineProps<{ color: string }>(), {
+  color: 'var(--primary-color)'
+})
+</script>
+
+<template>
+  <BaseIcon :color="color">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M14 12l-10 0" />
+    <path d="M14 12l-4 4" />
+    <path d="M14 12l-4 -4" />
+    <path d="M20 4l0 16" />
+  </BaseIcon>
+</template>