From 45b7b80a2965cac191139b8a94e39987cf2fa3ba Mon Sep 17 00:00:00 2001
From: devilangelia <devilangelia@devide>
Date: Wed, 5 Feb 2025 16:49:23 +0800
Subject: [PATCH] Auto Commit

---
 src/App.vue                                | 127 ++++++--
 src/components/HelloWorld.vue              |  43 ---
 src/components/ProgressBar.vue             | 354 +++++++++++++++++++++
 src/components/TheWelcome.vue              |  84 -----
 src/components/WelcomeItem.vue             |  86 -----
 src/components/icons/IconCommunity.vue     |   7 -
 src/components/icons/IconDocumentation.vue |   7 -
 src/components/icons/IconEcosystem.vue     |   7 -
 src/components/icons/IconSupport.vue       |   7 -
 src/components/icons/IconTooling.vue       |  19 --
 10 files changed, 447 insertions(+), 294 deletions(-)
 delete mode 100644 src/components/HelloWorld.vue
 create mode 100644 src/components/ProgressBar.vue
 delete mode 100644 src/components/TheWelcome.vue
 delete mode 100644 src/components/WelcomeItem.vue
 delete mode 100644 src/components/icons/IconCommunity.vue
 delete mode 100644 src/components/icons/IconDocumentation.vue
 delete mode 100644 src/components/icons/IconEcosystem.vue
 delete mode 100644 src/components/icons/IconSupport.vue
 delete mode 100644 src/components/icons/IconTooling.vue

diff --git a/src/App.vue b/src/App.vue
index 633a5df..c8fdf65 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,47 +1,106 @@
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+import ProgressBar from './components/ProgressBar.vue'
+import { watch } from 'vue';
 
-<template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+const progressBarRef = ref<InstanceType<typeof ProgressBar>>()
+// 每次增加或减少的值
+const step = 100
+// 最大值
+const max = 1000
+const options = reactive({
+  data: 362,
+  maxValue: max,
+  lineWidth: 10,
+  radius: 50,
+  // 颜色紫色蓝色绿色红色
+  color: ['	#66DD00', '#0066FF ', '#A500CC '],
+  text: {
+    size: 50,        // 自定义字体大小
+    color: '#666',   // 自定义字体颜色
+    font: 'Arial',    // 自定义字体
+    showPercentage: true, // 是否显示百分比
+    animation: true, // 是否开启动画
+    // content: '自定义文本'
+  }
+})
+
+watch(() => options.data, (val) => {
+  if (val > max) {
+    options.data = max
+  }
+})
+
+function add() {
+  if (options.data < max) {
+    options.data += step;
+  }
+}
+
+function minus() {
+  if (options.data > 0) {
+    options.data -= step;
+  }
+}
 
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
+onMounted(() => {
+  progressBarRef.value?.init()
+})
+</script>
 
-  <main>
-    <TheWelcome />
-  </main>
+<template>
+  <div class="canvas-container">
+    <ProgressBar ref="progressBarRef" :options="options" />
+  </div>
+  <div class="button-group">
+    <div class="button" @click="add">+{{ step }}</div>
+    <div class="button" @click="minus">-{{ step }}</div>
+  </div>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
+<style>
+.canvas-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
+.button-group {
+  margin-top: 20px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
 }
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
+.button {
+  cursor: pointer;
+  min-width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  padding: 0 20px;
+  border-radius: 20px;
+  background: #fff;
+  color: #666;
+  font-size: 16px;
+  font-weight: 500;
+  user-select: none;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid #eee;
+}
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
+.button:hover {
+  background: #f5f5f5;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
+.button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }
 </style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 1b8faac..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup>
-defineProps({
-  msg: {
-    type: String,
-    required: true
-  }
-})
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
new file mode 100644
index 0000000..5057c80
--- /dev/null
+++ b/src/components/ProgressBar.vue
@@ -0,0 +1,354 @@
+<script lang="ts" setup>
+import { ref, watch, computed } from 'vue';
+
+interface ChartOptions {
+    data: number;
+    // 最大值，默认 100
+    maxValue?: number;
+    // 圆环宽度，默认 40
+    lineWidth?: number;
+    // 圆环半径，默认 100
+    radius?: number;
+    // 圆环颜色，支持单色或渐变色数组
+    color?: string | string[];
+    // 画布宽度，默认 500
+    width?: number;
+    // 画布高度，默认 500
+    height?: number;
+    // 画布背景色，默认 #fff
+    background?: string;
+    // 文字相关配置
+    text?: {
+        // 字体大小，默认自适应（为 null 时自动计算）
+        size?: number | null;
+        // 字体颜色，默认 #333
+        color?: string;
+        // 字体样式，默认 Arial
+        font?: string;
+        // 添加自定义文本配置
+        content?: string | number;
+        // 是否启用数字动画，默认true
+        animation?: boolean;
+        // 是否显示百分比（包括值和符号），默认 true
+        showPercentage?: boolean;
+    };
+}
+
+const props = withDefaults(defineProps<{
+    options: ChartOptions
+}>(), {
+    options: () => ({
+        data: 0,
+        maxValue: 100,
+        lineWidth: 40,
+        radius: 100,
+        color: 'red',
+        width: 500,
+        height: 500,
+        background: '#fff',
+        text: {
+            size: null,
+            color: '#333',
+            font: 'Arial',
+            showPercentage: true
+        }
+    })
+})
+
+const myCanvas = ref<HTMLCanvasElement | null>(null);
+
+// 添加动画执行标志
+const isAnimating = ref(false);
+
+// 添加当前显示的数值状态
+const currentDisplayNumber = ref(0);
+
+// 计算圆环所需的最小画布尺寸
+const minCanvasSize = computed(() => {
+    const radius = props.options.radius || 100;
+    const lineWidth = props.options.lineWidth || 40;
+    // 圆环直径 + 线宽 + 边距
+    return (radius * 2) + lineWidth + 40;
+});
+
+// 修改画布尺寸的计算属性
+const canvasWidth = computed(() => {
+    // 如果设置了宽度，使用设置的宽度，否则使用计算的最小尺寸
+    return props.options.width ?? minCanvasSize.value;
+});
+
+const canvasHeight = computed(() => {
+    // 如果设置了高度，使用设置的高度，否则使用计算的最小尺寸
+    return props.options.height ?? minCanvasSize.value;
+});
+
+// 修改 canvasContainerStyle 计算属性
+const canvasContainerStyle = computed(() => ({
+    width: `${canvasWidth.value}px`,
+    height: `${canvasHeight.value}px`
+}));
+
+const canvasStyle = computed(() => ({
+    backgroundColor: props.options.background
+}));
+
+// 修改最大半径的计算
+const maxRadius = computed(() => {
+    const minSize = Math.min(canvasWidth.value, canvasHeight.value);
+    // 预留边距和线宽，取最小边长的40%作为半径
+    return Math.floor(minSize * 0.4);
+});
+
+// 计算实际使用的字体大小：区分自定义文本和默认百分比显示
+const fontSize = computed(() => {
+    const lineWidth = props.options.lineWidth || 10;
+    const radius = Math.min(props.options.radius || 100, maxRadius.value);
+    const innerRadius = radius - lineWidth;
+    
+    // 获取实际显示的文本内容
+    let displayText: string;
+    let isCustomText = false;
+    if (props.options.text?.content !== undefined) {
+        displayText = String(props.options.text.content);
+        isCustomText = true;
+    } else {
+        const percentage = Math.round((props.options.data / 100) * 100);
+        displayText = `${percentage}%`;
+    }
+
+    // 文字长度系数：自定义文本时才考虑长度影响
+    const textLengthFactor = isCustomText 
+        ? Math.max(0.2, 1 - (displayText.length - 3) * 0.2)
+        : 1;
+    
+    if (props.options.text?.size) {
+        // 如果配置了字体大小，根据是否自定义文本决定缩放
+        return Math.min(
+            props.options.text.size,
+            isCustomText 
+                ? innerRadius * 0.5 * textLengthFactor
+                : innerRadius * 0.8
+        );
+    }
+    
+    // 自动计算字体大小：区分自定义文本和默认百分比显示
+    return Math.floor(
+        isCustomText 
+            ? innerRadius * 0.25 * textLengthFactor
+            : innerRadius * 0.45
+    );
+});
+
+function startDraw(end: number, start?: number, dontClear?: boolean) {
+    const ctx = myCanvas.value?.getContext("2d");
+    if (!ctx) return;
+    if (!dontClear) {
+        // 使用计算属性获取画布尺寸
+        ctx.clearRect(0, 0, canvasWidth.value, canvasHeight.value);
+    }
+
+    // 根据画布尺寸计算中心点
+    const centerX = canvasWidth.value / 2;
+    const centerY = canvasHeight.value / 2;
+    // 使用计算出的最大半径
+    const radius = Math.min(props.options.radius || 100, maxRadius.value);
+    const lineWidth = props.options.lineWidth;
+    // 创建渐变色
+    let strokeStyle: string | CanvasGradient = 'red';
+    if (props.options.color) {
+        if (Array.isArray(props.options.color)) {
+            if (props.options.color.length) {
+                const gradient = ctx.createLinearGradient(
+                    centerX - (radius || 100),
+                    centerY - (radius || 100),
+                    centerX + (radius || 100),
+                    centerY + (radius || 100)
+                );
+                const colors = props.options.color;
+                if (colors?.length === 1) {
+                    strokeStyle = colors[0];
+                } else {
+                    colors?.forEach((color, index) => {
+                        gradient.addColorStop(index / (colors.length - 1), color);
+                    });
+                    strokeStyle = gradient;
+                }
+            }
+        } else {
+            // 如果是单个颜色字符串
+            strokeStyle = props.options.color;
+        }
+    }
+
+    // 绘制外圆
+    ctx.beginPath();
+    // 设置线条宽度
+    ctx.lineWidth = lineWidth || 10; // 设置默认值避免 undefined
+    // 设置线条末端样式为圆角
+    ctx.lineCap = 'round';
+    ctx.strokeStyle = strokeStyle;
+    ctx.arc(centerX, centerY, radius, start || Math.PI * 1.5, end || Math.PI * 2); // 设置默认值避免 undefined
+    // 使用 stroke 代替 fill
+    ctx.stroke();
+    ctx.closePath();
+
+    // 绘制内圆（可选，如果不需要内圆可以移除这部分）
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, (radius) - (lineWidth || 10), 0, Math.PI * 2);
+    // 使用透明填充
+    ctx.fillStyle = 'transparent';
+    ctx.fill();
+    ctx.closePath();
+
+    // 在绘制内圆之后添加文本绘制
+    ctx.beginPath();
+    ctx.font = `${fontSize.value}px ${props.options.text?.font || 'Arial'}`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillStyle = props.options.text?.color || '#333';
+
+    // 处理显示文本
+    let displayText: string;
+    if (props.options.text?.content !== undefined) {
+        // 使用自定义文本
+        displayText = String(props.options.text.content);
+    } else {
+        const maxValue = props.options.maxValue || 100;
+        const currentValue = currentDisplayNumber.value;
+        
+        if (props.options.text?.showPercentage !== false) {
+            // 显示百分比
+            const percentage = Math.round((currentValue / maxValue) * 100);
+            displayText = `${percentage}%`;
+        } else {
+            // 显示原始数值
+            displayText = String(Math.round(currentValue));
+        }
+    }
+    
+    ctx.fillText(displayText, centerX, centerY);
+    ctx.closePath();
+}
+
+/**
+ * @description: 自定义动画函数
+ * @param {Object} options 动画配置项
+ * @param {number} options.duration 动画持续时间(ms)
+ * @param {Function} options.draw 绘制函数,接收动画进度(0-1)
+ * @param {Function} options.timing 时序函数,用于控制动画速度曲线
+ * @param {Function} [options.callback] 动画完成回调函数
+ */
+function customAnimate(options: {
+    duration: number;
+    draw: (progress: number) => void;
+    timing: (timeFraction: number) => number;
+    callback?: () => void;
+}) {
+    const { duration, draw, timing, callback } = options;
+    const startTime = performance.now();
+
+    function animate(currentTime: number) {
+        // 计算动画进度(0-1)
+        let progress = Math.min((currentTime - startTime) / duration, 1);
+
+        // 应用时序函数
+        const easedProgress = timing(progress);
+
+        // 执行绘制
+        draw(easedProgress);
+
+        if (progress < 1) {
+            requestAnimationFrame(animate);
+        } else if (callback) {
+            callback();
+        }
+    }
+
+    requestAnimationFrame(animate);
+}
+
+function update(oldData: number) {
+    if (isAnimating.value) return;
+    isAnimating.value = true;
+
+    currentDisplayNumber.value = oldData;
+
+    customAnimate({
+        duration: 500,
+        timing: (timeFraction) => timeFraction,
+        draw: (progress) => {
+            progress = Math.max(0, progress);
+            const maxValue = props.options.maxValue || 100;
+            // 使用最大值参数计算当前值的比例
+            const maxData = Math.min(props.options.data, maxValue);
+            const currentData = oldData + (maxData - oldData) * progress;
+            // 根据最大值计算角度
+            const end = Math.PI * (1.5 + (currentData / maxValue) * 2);
+
+            if (props.options.text?.animation !== false && props.options.text?.content === undefined) {
+                // 更新显示的数值为实际值，而不是百分比
+                currentDisplayNumber.value = currentData;
+            }
+
+            startDraw(end);
+        },
+        callback: () => {
+            isAnimating.value = false;
+        }
+    });
+}
+
+function init() {
+    if (isAnimating.value) return;
+    isAnimating.value = true;
+
+    currentDisplayNumber.value = 0;
+
+    customAnimate({
+        duration: 500,
+        timing: (timeFraction) => timeFraction,
+        draw: (progress) => {
+            progress = Math.max(0, progress);
+            const maxValue = props.options.maxValue || 100;
+            const maxData = Math.min(props.options.data, maxValue);
+            const currentData = maxData * progress;
+            const end = Math.PI * (1.5 + (currentData / maxValue) * 2);
+
+            if (props.options.text?.animation !== false && props.options.text?.content === undefined) {
+                currentDisplayNumber.value = currentData;
+            }
+
+            startDraw(end);
+        },
+        callback: () => {
+            isAnimating.value = false;
+        }
+    });
+}
+
+watch(() => props.options.data, (_, oldVal) => {
+    // 直接监听 data 的变化，而不是整个 options 对象
+    update(oldVal);
+});
+
+defineExpose({
+    init,
+    update
+});
+
+</script>
+
+<template>
+    <div class="my-canvas" :style="canvasContainerStyle">
+        <canvas 
+            ref="myCanvas" 
+            id="myCanvas" 
+            class="canvas" 
+            :width="canvasWidth" 
+            :height="canvasHeight"
+            :style="canvasStyle"
+        >你的浏览器不支持canvas</canvas>
+    </div>
+</template>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
deleted file mode 100644
index d3d2e7a..0000000
--- a/src/components/TheWelcome.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script setup>
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-</script>
-
-<template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
-
-    Vue’s
-    <a target="_blank" href="https://vuejs.org/">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
-    setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
-    your components and web pages, check out
-    <a href="https://www.cypress.io/" target="_blank">Cypress</a> and
-    <a href="https://on.cypress.io/component" target="_blank"
-      >Cypress Component Testing</a
-    >.
-
-    <br />
-
-    More instructions are available in <code>README.md</code>.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a target="_blank" href="https://pinia.vuejs.org/">Pinia</a>,
-    <a target="_blank" href="https://router.vuejs.org/">Vue Router</a>,
-    <a target="_blank" href="https://test-utils.vuejs.org/">Vue Test Utils</a>, and
-    <a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more
-    resources, we suggest paying
-    <a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
-    <a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
-    You should also subscribe to
-    <a target="_blank" href="https://news.vuejs.org">our mailing list</a> and follow the official
-    <a target="_blank" href="https://twitter.com/vuejs">@vuejs</a>
-    twitter account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a target="_blank" href="https://vuejs.org/sponsor/">becoming a sponsor</a>.
-  </WelcomeItem>
-</template>
diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue
deleted file mode 100644
index ba0def3..0000000
--- a/src/components/WelcomeItem.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>
diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue
deleted file mode 100644
index 2dc8b05..0000000
--- a/src/components/icons/IconCommunity.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
-    />
-  </svg>
-</template>
diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue
deleted file mode 100644
index 6d4791c..0000000
--- a/src/components/icons/IconDocumentation.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
-    <path
-      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
-    />
-  </svg>
-</template>
diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue
deleted file mode 100644
index c3a4f07..0000000
--- a/src/components/icons/IconEcosystem.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
-    <path
-      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
-    />
-  </svg>
-</template>
diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue
deleted file mode 100644
index 7452834..0000000
--- a/src/components/icons/IconSupport.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
-    />
-  </svg>
-</template>
diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue
deleted file mode 100644
index 660598d..0000000
--- a/src/components/icons/IconTooling.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--mdi"
-    width="24"
-    height="24"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
-      fill="currentColor"
-    ></path>
-  </svg>
-</template>
-- 
GitLab