@mozaic-ds/icons-vue 2.3.0 → 2.4.0

package/src/components/CheckoutAlt48/CheckoutAlt48.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill-rule="evenodd" d="M18 5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h4.5v3.5h-8.71a3.5 3.5 0 0 0-3.478 3.114L8.657 30.5H6A1.5 1.5 0 0 0 4.5 32v10A1.5 1.5 0 0 0 6 43.5h36a1.5 1.5 0 0 0 1.5-1.5V32a1.5 1.5 0 0 0-1.5-1.5h-2.657l-1.655-14.886A3.5 3.5 0 0 0 34.21 12.5H25.5V9H30a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1zm-4.21 10.5h20.42a.5.5 0 0 1 .497.445L36.324 30.5H11.676l1.617-14.555a.5.5 0 0 1 .497-.445m-3.785 18H40.5v7h-33v-7h2.505M32 20v4H16v-4zM20 36a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2z"/></svg></template>
+<script setup lang="ts">
+/**
+ * CheckoutAlt48 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/CheckoutAlt64/CheckoutAlt64.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64px" height="64px"><path fill-rule="evenodd" d="M24 6.5A1.5 1.5 0 0 0 22.5 8v2.667a1.5 1.5 0 0 0 1.5 1.5h6.5v5H17.79a3.5 3.5 0 0 0-3.479 3.113l-2.32 20.887H8a1.5 1.5 0 0 0-1.5 1.5V56A1.5 1.5 0 0 0 8 57.5h48a1.5 1.5 0 0 0 1.5-1.5V42.667a1.5 1.5 0 0 0-1.5-1.5h-3.99L49.688 20.28a3.5 3.5 0 0 0-3.48-3.113H33.5v-5H40a1.5 1.5 0 0 0 1.5-1.5V8A1.5 1.5 0 0 0 40 6.5zm-6.21 13.667h28.42a.5.5 0 0 1 .497.444l2.284 20.556H15.009l2.284-20.556a.5.5 0 0 1 .497-.444m-4.475 24H54.5V54.5h-45V44.167zm29.352-17.5V32H21.333v-5.333zm-16 21.666a1 1 0 1 0 0 2h10.666a1 1 0 1 0 0-2z"/></svg></template>
+<script setup lang="ts">
+/**
+ * CheckoutAlt64 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronDown20/ChevronDown20.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M5.303 7.386a.75.75 0 0 1 1.06 0L10 11.023l3.636-3.637a.75.75 0 0 1 1.06 1.06l-4.166 4.168a.75.75 0 0 1-1.06 0L5.302 8.447a.75.75 0 0 1 0-1.06"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronDown20 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronDown24/ChevronDown24.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M6.293 8.793a1 1 0 0 1 1.414 0L12 13.086l4.293-4.293a1 1 0 1 1 1.414 1.414l-5 5a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 0-1.414"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronDown24 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronDown32/ChevronDown32.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M8.626 11.96a1 1 0 0 1 1.414 0L16 17.918l5.96-5.96a1 1 0 0 1 1.413 1.415l-6.666 6.666a1 1 0 0 1-1.414 0l-6.667-6.666a1 1 0 0 1 0-1.415"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronDown32 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronDown48/ChevronDown48.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill-rule="evenodd" d="M12.94 17.94a1.5 1.5 0 0 1 2.12 0L24 26.878l8.94-8.94a1.5 1.5 0 0 1 2.12 2.122l-10 10a1.5 1.5 0 0 1-2.12 0l-10-10a1.5 1.5 0 0 1 0-2.122"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronDown48 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronDown64/ChevronDown64.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64px" height="64px"><path fill-rule="evenodd" d="M17.606 24.273a1.5 1.5 0 0 1 2.122 0L32 36.546l12.273-12.273a1.5 1.5 0 0 1 2.121 2.121L33.061 39.728a1.5 1.5 0 0 1-2.121 0L17.606 26.394a1.5 1.5 0 0 1 0-2.121"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronDown64 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronLeft20/ChevronLeft20.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M11.78 5.303a.75.75 0 0 1 0 1.06L8.144 10l3.636 3.637a.75.75 0 0 1-1.06 1.06l-4.167-4.166a.75.75 0 0 1 0-1.061l4.166-4.167a.75.75 0 0 1 1.061 0"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronLeft20 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronLeft24/ChevronLeft24.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronLeft24 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronLeft32/ChevronLeft32.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M18.707 8.626a1 1 0 0 1 0 1.415L12.747 16l5.96 5.959a1 1 0 0 1-1.414 1.414l-6.667-6.667a1 1 0 0 1 0-1.414l6.667-6.667a1 1 0 0 1 1.414 0"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronLeft32 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronLeft48/ChevronLeft48.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill-rule="evenodd" d="M28.06 12.94a1.5 1.5 0 0 1 0 2.12L19.122 24l8.94 8.94a1.5 1.5 0 0 1-2.122 2.12l-10-10a1.5 1.5 0 0 1 0-2.12l10-10a1.5 1.5 0 0 1 2.122 0"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronLeft48 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronLeft64/ChevronLeft64.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64px" height="64px"><path fill-rule="evenodd" d="M37.061 17.606a1.5 1.5 0 0 1 0 2.121L24.788 32l12.273 12.273a1.5 1.5 0 1 1-2.121 2.12L21.606 33.06a1.5 1.5 0 0 1 0-2.12L34.94 17.605a1.5 1.5 0 0 1 2.121 0"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronLeft64 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronRight20/ChevronRight20.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M8.22 5.303a.75.75 0 0 1 1.06 0l4.167 4.167a.75.75 0 0 1 0 1.06L9.28 14.698a.75.75 0 1 1-1.06-1.06L11.856 10 8.22 6.364a.75.75 0 0 1 0-1.06"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronRight20 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronRight24/ChevronRight24.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronRight24 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronRight32/ChevronRight32.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M13.293 8.626a1 1 0 0 1 1.414 0l6.667 6.667a1 1 0 0 1 0 1.414l-6.667 6.667a1 1 0 1 1-1.414-1.414l5.96-5.96-5.96-5.96a1 1 0 0 1 0-1.414"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronRight32 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronRight48/ChevronRight48.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill-rule="evenodd" d="M19.94 12.94a1.5 1.5 0 0 1 2.12 0l10 10a1.5 1.5 0 0 1 0 2.12l-10 10a1.5 1.5 0 0 1-2.12-2.12L28.878 24l-8.94-8.94a1.5 1.5 0 0 1 0-2.12"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronRight48 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronRight64/ChevronRight64.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64px" height="64px"><path fill-rule="evenodd" d="M26.94 17.606a1.5 1.5 0 0 1 2.12 0l13.334 13.333a1.5 1.5 0 0 1 0 2.121L29.061 46.394a1.5 1.5 0 0 1-2.122-2.121L39.212 32 26.939 19.727a1.5 1.5 0 0 1 0-2.121"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronRight64 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronUp20/ChevronUp20.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M9.47 7.386a.75.75 0 0 1 1.06 0l4.167 4.167a.75.75 0 1 1-1.061 1.06L10 8.978l-3.637 3.637a.75.75 0 0 1-1.06-1.06z"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronUp20 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronUp24/ChevronUp24.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M11.293 8.793a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1-1.414 1.414L12 10.914l-4.293 4.293a1 1 0 0 1-1.414-1.414z"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronUp24 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronUp32/ChevronUp32.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M16 11.667a1 1 0 0 1 .707.293l6.666 6.666a1 1 0 1 1-1.414 1.415L16 14.08l-5.959 5.96a1 1 0 0 1-1.414-1.415l6.667-6.666a1 1 0 0 1 .707-.293"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronUp32 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronUp48/ChevronUp48.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill-rule="evenodd" d="M22.94 17.94a1.5 1.5 0 0 1 2.12 0l10 10a1.5 1.5 0 0 1-2.12 2.12L24 21.122l-8.94 8.94a1.5 1.5 0 0 1-2.12-2.122z"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronUp48 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChevronUp64/ChevronUp64.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64px" height="64px"><path fill-rule="evenodd" d="M32 23.833a1.5 1.5 0 0 1 1.061.44l13.333 13.333a1.5 1.5 0 1 1-2.121 2.121L32 27.455 19.728 39.727a1.5 1.5 0 0 1-2.122-2.121L30.94 24.273a1.5 1.5 0 0 1 1.06-.44"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChevronUp64 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChristmasTree20/ChristmasTree20.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M10.6 2.05a.75.75 0 0 0-1.2 0L6.9 5.383a.75.75 0 0 0 .07.98c.185.186.418.329.666.438L5.269 9.506a.75.75 0 0 0 .034 1.024c.318.318.711.574 1.143.777l-2.84 3.195a.75.75 0 0 0 .144 1.122c.739.492 1.73.83 2.792 1.048.847.174 1.771.278 2.708.314v.514a.75.75 0 0 0 1.5 0v-.514a17 17 0 0 0 2.708-.314c1.061-.218 2.053-.556 2.791-1.048a.75.75 0 0 0 .145-1.122l-2.84-3.195a4 4 0 0 0 1.143-.777.75.75 0 0 0 .034-1.024l-2.367-2.705c.248-.11.48-.252.666-.437a.75.75 0 0 0 .07-.98zm1.391 9.757c-.639.13-1.318.193-1.991.193s-1.352-.063-1.992-.193l-.27.304c.36.8 1.217 1.531 2.414 2.068a9.5 9.5 0 0 0 3.894.8 7 7 0 0 0 .585-.202zm-1.217 3.676a10 10 0 0 1-1.03-.391c-1.133-.508-2.146-1.246-2.715-2.183l-1.66 1.868a9 9 0 0 0 1.474.426c.959.196 2.053.297 3.157.297q.389 0 .774-.017M6.938 9.876l2.36-2.697a8.4 8.4 0 0 0 1.404 0l.626.716c-.529.86-1.643 1.984-3.483 2.331l-.035-.01a4.6 4.6 0 0 1-.872-.34m6.124 0-1.051-1.2A6.15 6.15 0 0 1 9.995 10.5H10c.775 0 1.538-.097 2.19-.284q.504-.145.872-.34M8.687 5.572l-.045-.011.377-.503a6 6 0 0 0 .61.64 5.5 5.5 0 0 1-.942-.126M9.64 4.23c.179.238.396.487.644.713.3.272.63.497.98.64l.094-.022L10 3.75zm.777 4.103a.417.417 0 1 1-.834 0 .417.417 0 0 1 .834 0M8.75 9.583a.417.417 0 1 0 0-.833.417.417 0 0 0 0 .833m2.083 3.334a.417.417 0 1 1-.833 0 .417.417 0 0 1 .833 0M7.083 15a.417.417 0 1 0 0-.833.417.417 0 0 0 0 .833m5.417-1.25a.417.417 0 1 1-.834 0 .417.417 0 0 1 .834 0"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChristmasTree20 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChristmasTree24/ChristmasTree24.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M12.8 2.4a1 1 0 0 0-1.6 0l-3 4a1 1 0 0 0 .093 1.307c.202.202.446.362.707.489l-2.753 3.146a1 1 0 0 0 .046 1.365c.361.361.8.656 1.28.893l-3.32 3.736a1 1 0 0 0 .192 1.496c.902.601 2.105 1.01 3.385 1.273a20 20 0 0 0 3.17.374V21a1 1 0 1 0 2 0v-.521a20 20 0 0 0 3.17-.374c1.28-.263 2.483-.672 3.385-1.273a1 1 0 0 0 .192-1.496l-3.32-3.735c.48-.238.919-.533 1.28-.894a1 1 0 0 0 .046-1.366L15 8.197c.26-.127.505-.287.707-.489A1 1 0 0 0 15.8 6.4zm1.553 11.878c-.758.15-1.56.222-2.353.222s-1.595-.073-2.353-.222l-.386.434c.478.937 1.503 1.776 2.881 2.394 1.208.542 2.62.88 4.01.955q.686-.162 1.235-.37zm-1.41 4.201a12 12 0 0 1-1.21-.46c-1.325-.594-2.5-1.447-3.174-2.518l-1.946 2.19c.466.176 1.01.33 1.62.454 1.142.235 2.449.355 3.767.355q.473 0 .942-.02m-4.457-6.658L11.2 8.719a10 10 0 0 0 1.6 0l.807.922c-.63.966-1.84 2.151-3.756 2.636a8 8 0 0 1-.451-.114 5.6 5.6 0 0 1-.914-.342m7.028 0-1.228-1.404a7.3 7.3 0 0 1-2.318 2.083H12c.922 0 1.828-.116 2.6-.337q.521-.15.914-.342m-3.918-5.08a7 7 0 0 1-1.054-.13l.409-.545c.192.23.408.458.645.674m1.862-.13a5 5 0 0 1-.264.049 4.4 4.4 0 0 1-.92-.655 6 6 0 0 1-.705-.764L12 4.667zM12.5 10a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m-2 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m2.5 4a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0M8.5 18a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m6.5-1.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChristmasTree24 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChristmasTree32/ChristmasTree32.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M16.8 3.4a1 1 0 0 0-1.6 0l-4 5.333a1 1 0 0 0 .093 1.307c.337.338.784.583 1.259.763L8.58 15.342a1 1 0 0 0 .045 1.365c.548.548 1.246.98 2.018 1.313l-4.725 5.316a1 1 0 0 0 .193 1.496c1.151.768 2.709 1.302 4.395 1.648 1.401.287 2.938.454 4.493.504V28a1 1 0 0 0 2 0v-1.016a27 27 0 0 0 4.492-.504c1.687-.346 3.244-.88 4.396-1.648a1 1 0 0 0 .193-1.496l-4.725-5.316c.772-.333 1.47-.765 2.018-1.313a1 1 0 0 0 .045-1.366l-3.971-4.538c.475-.18.922-.425 1.259-.763a1 1 0 0 0 .093-1.307zm2.459 15.272c-1.04.22-2.155.328-3.26.328-1.103 0-2.218-.108-3.258-.328l-.668.75c.598 1.41 2.07 2.652 4.048 3.538 1.81.812 3.961 1.285 6.033 1.308q.887-.241 1.592-.549zm-.515 6.197a16 16 0 0 1-3.032-.996c-1.898-.85-3.533-2.09-4.36-3.64L8.254 23.72c.737.32 1.634.592 2.655.801 1.55.318 3.314.48 5.09.48.928 0 1.853-.044 2.745-.131m-3.992-13.544.04-.047a13 13 0 0 0 2.417 0l.038.047 1.194 1.365c-.846 1.426-2.662 3.314-5.675 3.936q-.165-.042-.325-.088a7.1 7.1 0 0 1-1.654-.681zm6.46 4.532-2.083-2.382a9.53 9.53 0 0 1-4.14 3.49q.502.036 1.01.035c1.256 0 2.496-.158 3.56-.461a7.1 7.1 0 0 0 1.653-.682M13.854 9.11a5 5 0 0 1-.363-.098l.997-1.329c.31.4.677.81 1.092 1.187q.264.24.558.463H16c-.773 0-1.528-.078-2.146-.223m1.258-2.26c.31.425.694.874 1.14 1.28.475.43 1.004.8 1.577 1.046q.164-.03.317-.066.2-.047.363-.098l-2.51-3.345zm1.554 6.483a.667.667 0 1 1-1.333 0 .667.667 0 0 1 1.333 0m-2.666 2A.667.667 0 1 0 14 14a.667.667 0 0 0 0 1.333m3.333 5.334a.667.667 0 1 1-1.333 0 .667.667 0 0 1 1.333 0m-6 3.333a.667.667 0 1 0 0-1.333.667.667 0 0 0 0 1.333M20 22a.667.667 0 1 1-1.333 0A.667.667 0 0 1 20 22"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChristmasTree32 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChristmasTree48/ChristmasTree48.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill-rule="evenodd" d="M25.2 5.1a1.5 1.5 0 0 0-2.4 0l-6 8a1.5 1.5 0 0 0 .14 1.96c.505.507 1.175.875 1.888 1.145l-5.957 6.807a1.5 1.5 0 0 0 .068 2.049c.822.821 1.87 1.469 3.027 1.97L8.88 35.003a1.5 1.5 0 0 0 .289 2.244c1.727 1.151 4.064 1.953 6.593 2.471 2.102.431 4.407.682 6.739.757V42a1.5 1.5 0 0 0 3 0v-1.524c2.332-.075 4.637-.325 6.739-.757 2.53-.519 4.866-1.32 6.593-2.47a1.5 1.5 0 0 0 .29-2.245l-7.088-7.974c1.158-.5 2.205-1.148 3.027-1.97a1.5 1.5 0 0 0 .068-2.048l-5.957-6.807c.713-.27 1.383-.638 1.889-1.144A1.5 1.5 0 0 0 31.2 13.1zm3.689 22.908A23.8 23.8 0 0 1 24 28.5c-1.656 0-3.328-.161-4.889-.492l-.816.918c.83 2.073 2.99 3.942 5.99 5.286 2.939 1.318 6.488 2.034 9.82 1.931q.817-.261 1.514-.564zm-1.56 9.364a24 24 0 0 1-3.863-1.334c-2.834-1.271-5.324-3.134-6.614-5.488l-4.47 5.029c1.104.48 2.45.888 3.982 1.202 2.323.476 4.97.719 7.636.719 1.12 0 2.237-.043 3.328-.128m-5.2-20.384.058-.07a19.7 19.7 0 0 0 3.626 0l.058.07 1.618 1.849c-1.264 2.17-4.098 5.14-8.895 5.951-.944-.275-1.755-.615-2.413-1.003zm9.69 6.797-2.955-3.377a14.54 14.54 0 0 1-5.845 5.07q.488.022.981.022c1.883 0 3.742-.236 5.338-.692.973-.278 1.807-.626 2.48-1.023M20.78 13.665q-.299-.071-.544-.147l1.34-1.786c.465.594 1.01 1.198 1.625 1.758q.286.26.597.509c-1.09-.013-2.144-.128-3.018-.334m2.044-3.599a12.6 12.6 0 0 0 1.723 1.944c.794.722 1.682 1.316 2.64 1.662l.03-.007q.3-.071.545-.148L24 8.5zM25 20a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-4 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-9 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2m13-3a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChristmasTree48 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/ChristmasTree64/ChristmasTree64.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64px" height="64px"><path fill-rule="evenodd" d="M33.2 7.1a1.5 1.5 0 0 0-2.4 0l-8 10.667a1.5 1.5 0 0 0 .14 1.96c.765.766 1.865 1.288 3.031 1.647l-8.433 9.638a1.5 1.5 0 0 0 .068 2.049c1.006 1.006 2.29 1.815 3.727 2.453v.153q.176 0 .35-.003.222.093.448.18l-9.919 11.16a1.5 1.5 0 0 0 .29 2.244c2.226 1.485 5.271 2.536 8.613 3.221 2.916.598 6.136.934 9.385 1.013V56a1.5 1.5 0 1 0 3 0v-2.518c3.25-.079 6.47-.414 9.385-1.013 3.342-.685 6.387-1.736 8.614-3.22a1.5 1.5 0 0 0 .289-2.245l-9.919-11.16c1.759-.68 3.336-1.594 4.525-2.783a1.5 1.5 0 0 0 .068-2.049l-8.433-9.638c1.167-.359 2.267-.881 3.032-1.647a1.5 1.5 0 0 0 .14-1.96zM32 34.5c-1.025 0-2.046-.052-3.043-.154 4.82-1.8 7.929-5.112 9.578-7.837l4.652 5.315c-1.03.696-2.362 1.285-3.932 1.734-2.18.622-4.705.942-7.255.942m-7.613-1.048c7.062-1.023 11.103-5.473 12.757-8.533l-2.273-2.598a1.5 1.5 0 0 1-.2-.292c-.875.092-1.776.138-2.67.138-.895 0-1.797-.046-2.671-.138q-.081.154-.201.292l-8.315 9.503c.95.642 2.158 1.194 3.573 1.628m14.336 3.335c-2.13.479-4.435.713-6.723.713s-4.593-.234-6.723-.713a1.5 1.5 0 0 1-.156.21l-1.176 1.323c1.037 3.033 4.096 5.718 8.298 7.6 4.157 1.865 9.216 2.835 13.9 2.576a20 20 0 0 0 2.171-.885L38.88 36.997a1.5 1.5 0 0 1-.156-.21m.384 13.27c-2.698-.465-5.324-1.254-7.683-2.311-3.99-1.789-7.4-4.438-8.96-7.76l-6.778 7.625c1.628.788 3.681 1.437 6.032 1.92 3.136.643 6.7.969 10.282.969 2.42 0 4.83-.149 7.107-.443m-11.513-31.35a9.6 9.6 0 0 1-1.419-.44l2.487-3.316c.685.93 1.524 1.903 2.499 2.789.549.5 1.149.978 1.795 1.407q-.474.02-.956.02c-1.576 0-3.125-.159-4.406-.46m2.327-5.435 2.08-2.772 5.824 7.767a9 9 0 0 1-1.29.408c-1.484-.451-2.843-1.337-4.029-2.415a17.3 17.3 0 0 1-2.585-2.988m3.412 13.395a1.333 1.333 0 1 1-2.666 0 1.333 1.333 0 0 1 2.666 0m-5.333 4A1.333 1.333 0 1 0 28 28a1.333 1.333 0 0 0 0 2.667m6.667 10.666a1.333 1.333 0 1 1-2.667 0 1.333 1.333 0 0 1 2.667 0m-12 6.667a1.333 1.333 0 1 0 0-2.667 1.333 1.333 0 0 0 0 2.667M40 44a1.333 1.333 0 1 1-2.666 0A1.333 1.333 0 0 1 40 44"/></svg></template>
+<script setup lang="ts">
+/**
+ * ChristmasTree64 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/CircularEconomy20/CircularEconomy20.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M10 16.75a6.75 6.75 0 0 0 6.287-4.289.75.75 0 0 1 1.397.547 8.25 8.25 0 0 1-7.541 5.24l.387.388a.75.75 0 1 1-1.06 1.06l-3.334-3.332a.75.75 0 0 1 0-1.061L9.47 11.97a.75.75 0 1 1 1.061 1.06l-.383.384a3.42 3.42 0 0 0 2.91-1.888.75.75 0 1 1 1.342.671 4.92 4.92 0 0 1-5.381 2.621.8.8 0 0 1-.203-.072l-1.088 1.087.744.744.028.006q.724.166 1.5.167m-5.392-1.483a.75.75 0 0 1-1.054-.117A8.22 8.22 0 0 1 1.75 10c0-1.451.375-2.815 1.033-4l-.528.141a.75.75 0 1 1-.388-1.449l4.554-1.22a.75.75 0 0 1 .918.53l1.22 4.554a.75.75 0 0 1-1.449.388l-.14-.524A3.4 3.4 0 0 0 6.583 10c0 .697.209 1.344.566 1.884a.75.75 0 1 1-1.25.828A4.9 4.9 0 0 1 5.082 10c0-1.333.531-2.543 1.392-3.427l-.39-1.458-1.014.272-.02.023A6.72 6.72 0 0 0 3.25 10c0 1.595.552 3.058 1.475 4.213a.75.75 0 0 1-.117 1.054m11.843-7.26.01.029-.273 1.016-1.456-.39a4.92 4.92 0 0 0-5.028-3.57.75.75 0 0 0 .089 1.497q.102-.006.207-.006c1.212 0 2.277.631 2.884 1.583l-.525-.14a.75.75 0 1 0-.388 1.448l4.553 1.22a.75.75 0 0 0 .919-.53l1.22-4.553a.75.75 0 1 0-1.449-.388l-.142.528a8.245 8.245 0 0 0-8.308-3.909.75.75 0 1 0 .223 1.483 6.753 6.753 0 0 1 7.464 4.682"/></svg></template>
+<script setup lang="ts">
+/**
+ * CircularEconomy20 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/CircularEconomy24/CircularEconomy24.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M12 20a8 8 0 0 0 7.452-5.083 1 1 0 1 1 1.862.73c-1.41 3.598-4.846 6.183-8.908 6.345l.301.3a1 1 0 0 1-1.414 1.415l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 1.414l-.27.27c1.379-.15 2.548-1 3.143-2.19a1 1 0 1 1 1.79.895 6 6 0 0 1-6.568 3.198 1 1 0 0 1-.204-.064L9.414 19l.8.8.007.002a8 8 0 0 0 1.78.198m-6.407-1.601a1 1 0 0 1-1.406-.157A9.96 9.96 0 0 1 2 12c0-1.676.413-3.256 1.142-4.644l-.41.11a1 1 0 1 1-.517-1.932L7.68 4.07a1 1 0 0 1 1.225.707l1.464 5.464a1 1 0 1 1-1.932.518l-.099-.369A4 4 0 0 0 8 12c0 .817.244 1.573.663 2.205a1 1 0 1 1-1.668 1.104A5.98 5.98 0 0 1 6 12c0-1.606.632-3.066 1.659-4.142l-.428-1.597-1.09.292-.007.008A7.97 7.97 0 0 0 4 12c0 1.89.654 3.624 1.75 4.993a1 1 0 0 1-.157 1.406m14.053-8.76.002.007-.293 1.093-1.596-.427a6 6 0 0 0-6.12-4.301 1 1 0 0 0 .119 1.996 3.996 3.996 0 0 1 3.467 1.626l-.368-.099a1 1 0 1 0-.517 1.932l5.464 1.464a1 1 0 0 0 1.224-.707l1.464-5.464a1 1 0 1 0-1.931-.518l-.11.41a9.99 9.99 0 0 0-9.949-4.54A1 1 0 1 0 10.8 4.09Q11.388 4.001 12 4a8 8 0 0 1 7.646 5.638"/></svg></template>
+<script setup lang="ts">
+/**
+ * CircularEconomy24 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/CircularEconomy32/CircularEconomy32.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M16 27c4.658 0 8.642-2.896 10.246-6.99a1 1 0 0 1 1.862.73C26.215 25.574 21.508 29 16 29q-.128 0-.255-.002l.962.961a1 1 0 0 1-1.414 1.415L9.959 26.04a1 1 0 0 1 0-1.414l5.334-5.333a1 1 0 0 1 1.414 1.414l-.954.954q.123.006.247.006a5.67 5.67 0 0 0 5.072-3.136 1 1 0 1 1 1.788.895 7.67 7.67 0 0 1-8.392 4.087 1 1 0 0 1-.393-.174l-1.994 1.994 1.377 1.377q.048.006.096.017c.786.179 1.604.273 2.446.273m-8.752-2.729a1 1 0 0 1-1.405-.156A12.95 12.95 0 0 1 3 16c0-2.458.683-4.758 1.869-6.719l-1.312.352A1 1 0 0 1 3.039 7.7l7.286-1.952a1 1 0 0 1 1.225.707l1.952 7.285a1 1 0 1 1-1.932.518l-.35-1.304A5.64 5.64 0 0 0 10.333 16c0 1.156.346 2.23.939 3.124a1 1 0 0 1-1.668 1.105A7.64 7.64 0 0 1 8.334 16c0-2.117.859-4.035 2.245-5.421l.004-.004-.707-2.636L8 8.442q-.03.04-.065.079A10.96 10.96 0 0 0 5 16c0 2.598.9 4.984 2.405 6.866a1 1 0 0 1-.157 1.405m19.265-11.518q.015.047.034.093l-.505 1.881-2.633-.705-.002-.006a7.67 7.67 0 0 0-7.869-5.669 1 1 0 1 0 .119 1.997q.17-.01.343-.01a5.67 5.67 0 0 1 5.028 3.05l-1.305-.35a1 1 0 1 0-.518 1.932l7.286 1.952a1 1 0 0 0 1.225-.707l1.952-7.286a1 1 0 1 0-1.932-.517l-.352 1.311a13 13 0 0 0-13.332-6.574 1 1 0 0 0 .297 1.978Q15.158 5 16 5c4.944 0 9.128 3.262 10.514 7.753"/></svg></template>
+<script setup lang="ts">
+/**
+ * CircularEconomy32 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/CircularEconomy48/CircularEconomy48.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill-rule="evenodd" d="M24 40.5c6.987 0 12.964-4.344 15.369-10.484a1.5 1.5 0 1 1 2.793 1.094C39.322 38.361 32.262 43.5 24 43.5q-.192 0-.383-.004l1.443 1.443a1.5 1.5 0 1 1-2.121 2.121l-8-8a1.5 1.5 0 0 1 0-2.12l8-8a1.5 1.5 0 1 1 2.121 2.12l-1.431 1.432q.185.008.371.008a8.5 8.5 0 0 0 7.607-4.703 1.5 1.5 0 1 1 2.683 1.343 11.5 11.5 0 0 1-12.588 6.13 1.5 1.5 0 0 1-.59-.261l-2.991 2.99 2.066 2.067q.072.009.145.025c1.178.268 2.405.409 3.668.409m-13.127-4.093a1.5 1.5 0 0 1-2.109-.235A19.42 19.42 0 0 1 4.5 24c0-3.687 1.024-7.137 2.803-10.078l-1.968.527a1.5 1.5 0 1 1-.776-2.898l10.928-2.928a1.5 1.5 0 0 1 1.837 1.06l2.928 10.929a1.5 1.5 0 1 1-2.897.776l-.524-1.956A8.46 8.46 0 0 0 15.5 24c0 1.735.517 3.344 1.407 4.686a1.5 1.5 0 0 1-2.502 1.657A11.45 11.45 0 0 1 12.5 24c0-3.175 1.29-6.052 3.369-8.132l.005-.005-1.06-3.954-2.815.755q-.045.06-.099.117A16.44 16.44 0 0 0 7.5 24c0 3.897 1.349 7.475 3.607 10.298a1.5 1.5 0 0 1-.234 2.109m28.896-17.278q.023.072.05.14l-.755 2.822-3.95-1.058-.003-.009C33.8 16.116 29.324 12.5 24.001 12.5q-.35 0-.694.02a1.5 1.5 0 1 0 .178 2.995q.255-.015.515-.015a8.5 8.5 0 0 1 7.543 4.576l-1.959-.525a1.5 1.5 0 0 0-.776 2.898l10.928 2.928a1.5 1.5 0 0 0 1.837-1.06l2.928-10.929a1.5 1.5 0 1 0-2.897-.776l-.528 1.967C37.755 8.57 31.354 4.5 24 4.5q-1.49.001-2.922.218a1.5 1.5 0 0 0 .446 2.966A17 17 0 0 1 24 7.5c7.415 0 13.691 4.892 15.77 11.629"/></svg></template>
+<script setup lang="ts">
+/**
+ * CircularEconomy48 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>

package/src/components/CircularEconomy64/CircularEconomy64.vue

@@ -0,0 +1,17 @@
+<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64px" height="64px"><path fill-rule="evenodd" d="M32 54.5c9.529 0 17.678-5.924 20.958-14.296a1.5 1.5 0 0 1 2.793 1.094C52.036 50.78 42.805 57.5 32 57.5q-.894 0-1.773-.06l2.833 2.833a1.5 1.5 0 0 1-2.12 2.12L20.272 51.728a1.5 1.5 0 0 1 0-2.121l10.666-10.667a1.5 1.5 0 0 1 2.122 2.122l-2.666 2.665q.787.106 1.606.107c4.632 0 8.646-2.662 10.59-6.546a1.5 1.5 0 0 1 2.683 1.342C42.842 43.49 37.813 46.833 32 46.833c-1.014 0-2.006-.102-2.965-.296-.37-.075-.68-.28-.893-.559l-4.688 4.689 3.238 3.238q.152.003.306.037c1.607.365 3.28.558 5 .558m-17.815-6.348a1.5 1.5 0 0 1-2.108-.235A25.4 25.4 0 0 1 6.5 32a25.4 25.4 0 0 1 4.353-14.254l-3.868 1.036a1.5 1.5 0 0 1-.777-2.897L20.78 11.98a1.5 1.5 0 0 1 1.837 1.061l3.905 14.57a1.5 1.5 0 0 1-2.898.777l-.975-3.638a11.78 11.78 0 0 0-2.48 7.25c0 2.414.72 4.655 1.959 6.525a1.5 1.5 0 1 1-2.501 1.656A14.77 14.77 0 0 1 17.167 32c0-4.096 1.662-7.806 4.345-10.489q.103-.102.22-.182l-1.625-6.063-4.417 1.184a1.5 1.5 0 0 1-.189.252A22.42 22.42 0 0 0 9.5 32c0 5.314 1.84 10.194 4.92 14.043a1.5 1.5 0 0 1-.235 2.109m39.319-22.794q.047.15.12.284l-1.185 4.425-6.06-1.623a1.5 1.5 0 0 0-.047-.283c-1.692-6.33-7.465-10.994-14.331-10.994q-.45 0-.895.026a1.5 1.5 0 0 0 .179 2.995q.354-.021.716-.021c4.95 0 9.195 3.042 10.959 7.36l-3.643-.976a1.5 1.5 0 0 0-.777 2.898l14.571 3.904a1.5 1.5 0 0 0 1.837-1.06l3.905-14.571a1.5 1.5 0 0 0-2.898-.777l-1.036 3.865C50.775 12.337 42.071 6.5 32 6.5c-1.297 0-2.573.097-3.82.285a1.5 1.5 0 1 0 .446 2.966Q30.277 9.501 32 9.5c10.112 0 18.67 6.672 21.504 15.858"/></svg></template>
+<script setup lang="ts">
+/**
+ * CircularEconomy64 is an SVG icon wrapped in a Vue component to make it easier to use.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * Define the color of the icon.
+     */
+    color?: string;
+  }>(),
+  {
+    color: 'currentColor',
+  },
+);
+</script>