@mozaic-ds/icons-vue 2.3.0 → 2.4.0

package/src/components/Save24/Save24.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="M3 2a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a1 1 0 0 0-.293-.707l-4-4A1 1 0 0 0 17 2zm5 5V4H4v16h2v-8a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v8h2V7.414L16.586 4H16v3a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1m0 13v-7h8v7z"/></svg></template>
+<script setup lang="ts">
+/**
+ * Save24 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/Save32/Save32.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="M4 3a1 1 0 0 0-1 1v24a1 1 0 0 0 1 1h24a1 1 0 0 0 1-1V9.333a1 1 0 0 0-.293-.707l-5.333-5.333A1 1 0 0 0 22.667 3zm7 6.333V5H5v22h3.333V16a1 1 0 0 1 1-1h13.334a1 1 0 0 1 1 1v11H27V9.748L22.253 5H21v4.333a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1M10.333 27V17h11.334v10z"/></svg></template>
+<script setup lang="ts">
+/**
+ * Save32 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/Save48/Save48.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="M6 4.5A1.5 1.5 0 0 0 4.5 6v36A1.5 1.5 0 0 0 6 43.5h36a1.5 1.5 0 0 0 1.5-1.5V14a1.5 1.5 0 0 0-.44-1.06l-8-8A1.5 1.5 0 0 0 34 4.5zm29.5 36h5V14.621L33.379 7.5H31V14a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1V7.5H7.5v33h5V24a1.5 1.5 0 0 1 1.5-1.5h20a1.5 1.5 0 0 1 1.5 1.5zm-20 0v-15h17v15z"/></svg></template>
+<script setup lang="ts">
+/**
+ * Save48 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/Save64/Save64.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="M8 6.5A1.5 1.5 0 0 0 6.5 8v48A1.5 1.5 0 0 0 8 57.5h48a1.5 1.5 0 0 0 1.5-1.5V18.667a1.5 1.5 0 0 0-.44-1.061L46.395 6.939a1.5 1.5 0 0 0-1.06-.439zm38.833 48H54.5V19.288L44.712 9.5H41v9.167a1 1 0 0 1-1 1H24a1 1 0 0 1-1-1V9.5H9.5v45h7.667V32a1.5 1.5 0 0 1 1.5-1.5h26.666a1.5 1.5 0 0 1 1.5 1.5zm-26.666 0v-21h23.666v21z"/></svg></template>
+<script setup lang="ts">
+/**
+ * Save64 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/ScreenRotation20/ScreenRotation20.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.667 3.25a.5.5 0 1 0 0 1c.954 0 1.636.237 2.131.567.498.332.837.778 1.067 1.24.172.343.281.69.35.992l-.825-.413a.5.5 0 1 0-.447.895l1.667.833a.5.5 0 0 0 .577-.094l1.25-1.25a.5.5 0 0 0-.707-.707l-.534.534a5.5 5.5 0 0 0-.436-1.237 4.16 4.16 0 0 0-1.407-1.625c-.677-.451-1.557-.735-2.686-.735M2.5 3.417a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75v-6.667a.75.75 0 0 0-.75-.75H9.917V4.167a.75.75 0 0 0-.75-.75zm7.417 8.166v5.167h6.833v-5.167zM3.25 16.75v-2.083h5.167v2.083zm0-3.083v-8.75h5.167v8.75z"/></svg></template>
+<script setup lang="ts">
+/**
+ * ScreenRotation20 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/ScreenRotation24/ScreenRotation24.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="M3 4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-9V5a1 1 0 0 0-1-1zm9 10v6h8v-6zm-8 6v-2.5h6V20zm0-3.5V6h6v10.5zM14 4a.5.5 0 0 0 0 1c1.163 0 2.001.29 2.613.697.615.41 1.032.96 1.315 1.527.25.5.392 1.005.472 1.417l-1.176-.588a.5.5 0 1 0-.448.894l2 1a.5.5 0 0 0 .578-.093l1.5-1.5a.5.5 0 0 0-.708-.708l-.77.772a6.6 6.6 0 0 0-.554-1.642c-.342-.684-.863-1.383-1.654-1.91C16.374 4.335 15.338 4 14 4"/></svg></template>
+<script setup lang="ts">
+/**
+ * ScreenRotation24 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/ScreenRotation32/ScreenRotation32.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.667 5.5a.5.5 0 1 0 0 1c1.579 0 2.73.393 3.576.958.85.566 1.423 1.325 1.81 2.099a7.7 7.7 0 0 1 .7 2.26l-1.863-.93a.5.5 0 1 0-.447.893l2.667 1.334a.5.5 0 0 0 .577-.094l2-2a.5.5 0 0 0-.707-.707l-1.254 1.254-.004-.024a8.7 8.7 0 0 0-.775-2.433c-.446-.893-1.123-1.8-2.149-2.484C21.77 5.94 20.421 5.5 18.667 5.5M4 5.667a1 1 0 0 0-1 1V28a1 1 0 0 0 1 1h24a1 1 0 0 0 1-1V17.333a1 1 0 0 0-1-1H15.667V6.667a1 1 0 0 0-1-1zm11.667 12.666V27H27v-8.667zM5 27v-3.833h8.667V27zm0-4.833v-14.5h8.667v14.5z"/></svg></template>
+<script setup lang="ts">
+/**
+ * ScreenRotation32 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/ScreenRotation48/ScreenRotation48.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 8a1 1 0 1 0 0 2c2.325 0 4.002.578 5.227 1.395 1.23.82 2.063 1.92 2.629 3.052.5 1.001.784 2.012.944 2.835l-2.353-1.176a1 1 0 1 0-.894 1.788l4 2a1 1 0 0 0 1.154-.187l3-3a1 1 0 0 0-1.414-1.414l-1.543 1.543a13 13 0 0 0-1.106-3.283c-.684-1.369-1.726-2.768-3.308-3.823C32.748 8.672 30.675 8 28 8M6 8.5A1.5 1.5 0 0 0 4.5 10v32A1.5 1.5 0 0 0 6 43.5h36a1.5 1.5 0 0 0 1.5-1.5V26a1.5 1.5 0 0 0-1.5-1.5H23.5V10A1.5 1.5 0 0 0 22 8.5zm17.5 19v13h17v-13zm-16 13V35h13v5.5zm0-7.5V11.5h13V33z"/></svg></template>
+<script setup lang="ts">
+/**
+ * ScreenRotation48 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/ScreenRotation64/ScreenRotation64.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.333 11a1 1 0 1 0 0 2c3.159 0 5.461.787 7.154 1.915 1.7 1.133 2.845 2.65 3.619 4.199.776 1.552 1.169 3.116 1.366 4.3q.019.114.035.222l-3.726-1.864a1 1 0 0 0-.895 1.79l5.334 2.666a1 1 0 0 0 1.154-.188l4-4a1 1 0 0 0-1.414-1.414l-2.507 2.507-.008-.047c-.22-1.316-.66-3.085-1.55-4.866-.893-1.786-2.248-3.602-4.299-4.969C43.54 11.88 40.842 11 37.333 11M8 11.833a1.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.5V34.667a1.5 1.5 0 0 0-1.5-1.5H30.833V13.333a1.5 1.5 0 0 0-1.5-1.5zm22.833 24.334V54.5H54.5V36.167zM9.5 54.5v-8.167h18.333V54.5zm0-10.167v-29.5h18.333v29.5z"/></svg></template>
+<script setup lang="ts">
+/**
+ * ScreenRotation64 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/Search20/Search20.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="M6.584 9.167a4.25 4.25 0 1 1 8.5 0 4.25 4.25 0 0 1-8.5 0m4.25-5.75a5.75 5.75 0 0 0-4.562 9.25l-2.635 2.636a.75.75 0 0 0 1.06 1.06l2.636-2.635a5.75 5.75 0 1 0 3.501-10.312"/></svg></template>
+<script setup lang="ts">
+/**
+ * Search20 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/Search24/Search24.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="M8 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0m5-7a7 7 0 0 0-5.606 11.192l-3.101 3.1a1 1 0 1 0 1.414 1.415l3.1-3.1A7 7 0 1 0 13 4"/></svg></template>
+<script setup lang="ts">
+/**
+ * Search24 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/Search32/Search32.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="M10.334 14.667a7 7 0 1 1 14 0 7 7 0 0 1-14 0m7-9a9 9 0 0 0-7.032 14.617L5.96 24.626a1 1 0 1 0 1.414 1.414l4.342-4.342a9 9 0 1 0 5.618-16.032"/></svg></template>
+<script setup lang="ts">
+/**
+ * Search32 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/Search48/Search48.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="M15.5 22c0-5.799 4.701-10.5 10.5-10.5S36.5 16.201 36.5 22 31.799 32.5 26 32.5 15.5 27.799 15.5 22M26 8.5c-7.456 0-13.5 6.044-13.5 13.5 0 3.188 1.105 6.117 2.952 8.427L8.94 36.939a1.5 1.5 0 0 0 2.122 2.122l6.513-6.513A13.44 13.44 0 0 0 26 35.5c7.456 0 13.5-6.044 13.5-13.5S33.456 8.5 26 8.5"/></svg></template>
+<script setup lang="ts">
+/**
+ * Search48 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/Search64/Search64.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="M20.166 29.334c0-8.009 6.492-14.5 14.5-14.5 8.009 0 14.5 6.491 14.5 14.5 0 8.008-6.491 14.5-14.5 14.5-8.008 0-14.5-6.492-14.5-14.5m14.5-17.5c-9.665 0-17.5 7.835-17.5 17.5a17.43 17.43 0 0 0 4.11 11.268l-9.004 9.004a1.5 1.5 0 0 0 2.122 2.121l9.004-9.004a17.43 17.43 0 0 0 11.268 4.11c9.665 0 17.5-7.835 17.5-17.5s-7.835-17.5-17.5-17.5"/></svg></template>
+<script setup lang="ts">
+/**
+ * Search64 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/SearchList20/SearchList20.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="M2.5 2.584a.75.75 0 1 0 0 1.5h11.667a.75.75 0 0 0 0-1.5zm9.167 5.666a3.417 3.417 0 1 0 0 6.833 3.417 3.417 0 0 0 0-6.833M6.75 11.667a4.917 4.917 0 1 1 8.883 2.906l2.397 2.397a.75.75 0 0 1-1.06 1.06l-2.398-2.397a4.917 4.917 0 0 1-7.823-3.966m-5-4.167a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H2.5a.75.75 0 0 1-.75-.75m.75 3.417a.75.75 0 0 0 0 1.5h2.083a.75.75 0 0 0 0-1.5z"/></svg></template>
+<script setup lang="ts">
+/**
+ * SearchList20 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/SearchList24/SearchList24.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="M3 3a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2zm11 7a4 4 0 1 0 0 8 4 4 0 0 0 0-8m-6 4a6 6 0 1 1 10.89 3.477l2.817 2.816a1 1 0 0 1-1.414 1.414l-2.817-2.816A6 6 0 0 1 8 14M2 9a1 1 0 0 1 1-1h4.5a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1m1 4a1 1 0 1 0 0 2h2.5a1 1 0 1 0 0-2z"/></svg></template>
+<script setup lang="ts">
+/**
+ * SearchList24 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/SearchList32/SearchList32.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="M4 4.334a1 1 0 1 0 0 2h18.667a1 1 0 1 0 0-2zM18.667 13a5.667 5.667 0 1 0 0 11.334 5.667 5.667 0 0 0 0-11.334M11 18.667a7.667 7.667 0 1 1 13.749 4.668l3.958 3.958a1 1 0 0 1-1.414 1.414l-3.958-3.958A7.667 7.667 0 0 1 11 18.667M3 12a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1m1 5.667a1 1 0 1 0 0 2h3.333a1 1 0 1 0 0-2z"/></svg></template>
+<script setup lang="ts">
+/**
+ * SearchList32 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/SearchList48/SearchList48.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="M6 6.5a1.5 1.5 0 1 0 0 3h28a1.5 1.5 0 0 0 0-3zm22 13a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17M16.5 28c0-6.351 5.149-11.5 11.5-11.5S39.5 21.649 39.5 28a11.45 11.45 0 0 1-2.377 7.002l5.938 5.937a1.5 1.5 0 0 1-2.122 2.122l-5.937-5.938A11.45 11.45 0 0 1 28 39.5c-6.351 0-11.5-5.149-11.5-11.5m-12-10A1.5 1.5 0 0 1 6 16.5h9a1.5 1.5 0 0 1 0 3H6A1.5 1.5 0 0 1 4.5 18M6 26.5a1.5 1.5 0 0 0 0 3h5a1.5 1.5 0 0 0 0-3z"/></svg></template>
+<script setup lang="ts">
+/**
+ * SearchList48 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/SearchList64/SearchList64.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="M8 9.167a1.5 1.5 0 0 0 0 3h37.333a1.5 1.5 0 1 0 0-3zM37.333 25.5c-6.535 0-11.833 5.298-11.833 11.833s5.298 11.833 11.833 11.833 11.834-5.297 11.834-11.833c0-6.535-5.298-11.833-11.834-11.833M22.5 37.333c0-8.192 6.641-14.833 14.833-14.833s14.834 6.64 14.834 14.833c0 3.556-1.252 6.82-3.338 9.375l8.232 8.231a1.5 1.5 0 0 1-2.122 2.121l-8.231-8.23a14.77 14.77 0 0 1-9.375 3.336c-8.192 0-14.833-6.64-14.833-14.833M6.5 24A1.5 1.5 0 0 1 8 22.5h12a1.5 1.5 0 0 1 0 3H8A1.5 1.5 0 0 1 6.5 24M8 35.833a1.5 1.5 0 1 0 0 3h6.667a1.5 1.5 0 0 0 0-3z"/></svg></template>
+<script setup lang="ts">
+/**
+ * SearchList64 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/SearchProduct20/SearchProduct20.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="M12.5 1.75a.75.75 0 0 0-.53.22l-10 10a.75.75 0 0 0 0 1.06l5 5a.75.75 0 0 0 1.06 0l1.564-1.564c.814.598 1.819.95 2.906.95s2.092-.352 2.906-.95l1.564 1.564a.75.75 0 1 0 1.06-1.06l-1.563-1.564c.597-.814.95-1.819.95-2.906a4.9 4.9 0 0 0-.95-2.906L18.03 8.03a.75.75 0 0 0 .22-.53v-5a.75.75 0 0 0-.75-.75zm2.906 6.784 1.344-1.345V3.25h-3.94L3.56 12.5l3.94 3.94 1.034-1.034a4.917 4.917 0 0 1 6.872-6.872M9.083 12.5a3.417 3.417 0 1 1 6.834 0 3.417 3.417 0 0 1-6.834 0m5.5-6.25a.833.833 0 1 0 0-1.667.833.833 0 0 0 0 1.667"/></svg></template>
+<script setup lang="ts">
+/**
+ * SearchProduct20 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/SearchProduct24/SearchProduct24.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="M15 2a1 1 0 0 0-.707.293l-12 12a1 1 0 0 0 0 1.414l6 6a1 1 0 0 0 1.414 0l1.816-1.816C12.505 20.589 13.705 21 15 21s2.496-.41 3.477-1.11l1.816 1.817a1 1 0 0 0 1.414-1.414l-1.816-1.816A5.97 5.97 0 0 0 21 15c0-1.296-.41-2.496-1.11-3.476l1.817-1.817A1 1 0 0 0 22 9V3a1 1 0 0 0-1-1zm3.477 8.11L20 8.585V4h-4.586l-11 11L9 19.586l1.11-1.11a6 6 0 0 1 8.367-8.367M11 15a4 4 0 1 1 8 0 4 4 0 0 1-8 0m6.5-7.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/></svg></template>
+<script setup lang="ts">
+/**
+ * SearchProduct24 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/SearchProduct32/SearchProduct32.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="M20 3a1 1 0 0 0-.707.293l-16 16a1 1 0 0 0 0 1.414l8 8a1 1 0 0 0 1.414 0l2.625-2.625A7.63 7.63 0 0 0 20 27.667c1.757 0 3.375-.591 4.668-1.585l2.625 2.625a1 1 0 0 0 1.414-1.414l-2.625-2.625A7.63 7.63 0 0 0 27.667 20c0-1.757-.591-3.375-1.585-4.668l2.625-2.625A1 1 0 0 0 29 12V4a1 1 0 0 0-1-1zm4.668 10.918L27 11.586V5h-6.586l-15 15L12 26.586l1.918-1.918a7.667 7.667 0 0 1 10.75-10.75M14.333 20a5.667 5.667 0 1 1 11.334 0 5.667 5.667 0 0 1-11.334 0m9-10a1.333 1.333 0 1 0 0-2.667 1.333 1.333 0 0 0 0 2.667"/></svg></template>
+<script setup lang="ts">
+/**
+ * SearchProduct32 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/SearchProduct48/SearchProduct48.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="M30 4.5a1.5 1.5 0 0 0-1.06.44l-24 24a1.5 1.5 0 0 0 0 2.12l12 12a1.5 1.5 0 0 0 2.12 0l3.938-3.937c1.94 1.49 4.367 2.377 7.002 2.377s5.063-.886 7.002-2.377l3.937 3.938a1.5 1.5 0 0 0 2.122-2.122l-3.938-3.937c1.49-1.94 2.377-4.367 2.377-7.002s-.886-5.063-2.377-7.002l3.938-3.937A1.5 1.5 0 0 0 43.5 18V6A1.5 1.5 0 0 0 42 4.5zm7.002 16.377 3.498-3.498V7.5h-9.879L8.121 30 18 39.879l2.877-2.877A11.45 11.45 0 0 1 18.5 30c0-6.351 5.149-11.5 11.5-11.5 2.635 0 5.063.886 7.002 2.377M21.5 30a8.5 8.5 0 1 1 17 0 8.5 8.5 0 0 1-17 0M35 15a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/></svg></template>
+<script setup lang="ts">
+/**
+ * SearchProduct48 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/SearchProduct64/SearchProduct64.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="M40 6.5a1.5 1.5 0 0 0-1.06.44l-32 32a1.5 1.5 0 0 0 0 2.12l16 16a1.5 1.5 0 0 0 2.12 0l5.565-5.564A14.77 14.77 0 0 0 40 54.833c3.556 0 6.82-1.25 9.375-3.337l5.564 5.565a1.5 1.5 0 0 0 2.122-2.122l-5.565-5.564A14.77 14.77 0 0 0 54.833 40c0-3.556-1.25-6.82-3.337-9.375l5.565-5.564A1.5 1.5 0 0 0 57.5 24V8A1.5 1.5 0 0 0 56 6.5zm9.375 22.004 5.125-5.125V9.5H40.621L10.121 40 24 53.879l4.504-4.504A14.77 14.77 0 0 1 25.167 40c0-8.192 6.64-14.833 14.833-14.833 3.556 0 6.82 1.25 9.375 3.337M28.167 40c0-6.535 5.298-11.833 11.833-11.833S51.833 33.465 51.833 40 46.535 51.833 40 51.833 28.167 46.535 28.167 40m18.5-20a2.667 2.667 0 1 0 0-5.333 2.667 2.667 0 0 0 0 5.333"/></svg></template>
+<script setup lang="ts">
+/**
+ * SearchProduct64 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/SecurePayment20/SecurePayment20.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="M2.5 3.417a.75.75 0 0 0-.75.75v10c0 .414.336.75.75.75h8.417v.916c0 .414.336.75.75.75H17.5a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75h-.083v-.917c0-.795-.269-1.516-.793-2.04a2.6 2.6 0 0 0-.874-.576v-1.55a.75.75 0 0 0-.75-.75zM15.917 9.25v-.917c0-.454-.149-.775-.354-.98S15.038 7 14.583 7s-.775.148-.98.353-.353.526-.353.98v.917zm-4.167 0v-.917q0-.39.085-.75H3.25v5.833h7.667v-.833H8.75a.5.5 0 0 1 0-1h2.167V10a.75.75 0 0 1 .75-.75zm.667 4.916v.917h4.333V10.75h-4.333zm-.125-7.583H3.25V4.917h11v.599c-.662.065-1.257.327-1.707.776a2.6 2.6 0 0 0-.25.291m-8.209 5.5a.5.5 0 0 1 .5-.5h2.5a.5.5 0 1 1 0 1h-2.5a.5.5 0 0 1-.5-.5m11 1.185a.916.916 0 1 0-1 0v.482a.5.5 0 1 0 1 0zm-11-4.102a.5.5 0 0 1 .5-.5h2.5a.5.5 0 0 1 .5.5V10a.5.5 0 0 1-.5.5h-2.5a.5.5 0 0 1-.5-.5z"/></svg></template>
+<script setup lang="ts">
+/**
+ * SecurePayment20 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/SecurePayment24/SecurePayment24.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="M3 4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10v1a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1v-1c0-.977-.33-1.87-.98-2.52A3.2 3.2 0 0 0 19 6.794V5a1 1 0 0 0-1-1zm16 7v-1c0-.523-.17-.88-.395-1.105-.224-.225-.582-.395-1.105-.395s-.88.17-1.105.395C16.17 9.119 16 9.477 16 10v1zm-5 0v-1q0-.521.124-1H4v7h9v-1h-2.5a.5.5 0 0 1 0-1H13v-2a1 1 0 0 1 1-1m6 2h-5v5h5zm-5.44-5H4V6h13v.53c-.78.094-1.482.413-2.02.95q-.24.24-.42.52M5 14.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m11.5.5a1 1 0 1 1 1.5.866v.634a.5.5 0 0 1-1 0v-.634a1 1 0 0 1-.5-.866M5 11a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3A.5.5 0 0 1 5 12z"/></svg></template>
+<script setup lang="ts">
+/**
+ * SecurePayment24 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/SecurePayment32/SecurePayment32.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="M4 5.667a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h13.667v1.666a1 1 0 0 0 1 1H28a1 1 0 0 0 1-1V16a1 1 0 0 0-1-1h-.333v-1.667c0-1.227-.414-2.328-1.21-3.124A4 4 0 0 0 25 9.285V6.667a1 1 0 0 0-1-1zM25.667 15v-1.667c0-.773-.254-1.339-.624-1.71-.37-.37-.937-.623-1.71-.623s-1.339.253-1.71.624c-.37.37-.623.936-.623 1.71V15zM19 15v-1.667c0-.528.077-1.033.227-1.5H5v9.833h12.667v-1.833H14a.5.5 0 0 1 0-1h3.667V16a1 1 0 0 1 1-1zm.667 7.665V17H27v7.333h-7.333zm.036-11.832H5V7.667h18V9.01c-1.093.069-2.067.476-2.79 1.2q-.287.287-.507.623m-12.87 8.5a.5.5 0 0 1 .5-.5h4a.5.5 0 1 1 0 1h-4a.5.5 0 0 1-.5-.5M22.167 20a1.167 1.167 0 1 1 1.666 1.054V22a.5.5 0 1 1-1 0v-.946A1.17 1.17 0 0 1 22.167 20M6.833 14.666a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5V16a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5zm1 .5v.334h3v-.334z"/></svg></template>
+<script setup lang="ts">
+/**
+ * SecurePayment32 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/SecurePayment48/SecurePayment48.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="M6 8.5A1.5 1.5 0 0 0 4.5 10v24A1.5 1.5 0 0 0 6 35.5h20.5V38a1.5 1.5 0 0 0 1.5 1.5h14a1.5 1.5 0 0 0 1.5-1.5V24a1.5 1.5 0 0 0-1.5-1.5h-.5V20c0-1.84-.62-3.491-1.814-4.686a6 6 0 0 0-2.186-1.387V10A1.5 1.5 0 0 0 36 8.5zm32.5 14V20c0-1.16-.38-2.009-.936-2.564S36.16 16.5 35 16.5s-2.009.38-2.564.936C31.88 17.99 31.5 18.84 31.5 20v2.5zm-10 0V20c0-.699.09-1.37.266-2H7.5v14.5h19V30H21a1 1 0 1 1 0-2h5.5v-4a1.5 1.5 0 0 1 1.5-1.5zm1 11.5v2.5h11v-11h-11zm.227-18H7.5v-4.5h27v2.015c-1.639.103-3.1.714-4.186 1.8q-.321.322-.587.685M10 29a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2h-6a1 1 0 0 1-1-1m26 2.118a1.5 1.5 0 1 0-2 0V33a1 1 0 1 0 2 0zM10 22a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1z"/></svg></template>
+<script setup lang="ts">
+/**
+ * SecurePayment48 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/SecurePayment64/SecurePayment64.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="M8 11.834a1.5 1.5 0 0 0-1.5 1.5v32a1.5 1.5 0 0 0 1.5 1.5h27.833v3.833a1.5 1.5 0 0 0 1.5 1.5H56a1.5 1.5 0 0 0 1.5-1.5V32a1.5 1.5 0 0 0-1.5-1.5h-1.167v-3.833c0-2.341-.786-4.408-2.272-5.894a7.56 7.56 0 0 0-3.061-1.847v-5.593a1.5 1.5 0 0 0-1.5-1.5zM51.833 30.5v-3.833c0-1.66-.546-2.925-1.394-3.773-.847-.847-2.113-1.394-3.772-1.394-1.66 0-2.926.547-3.773 1.394-.847.848-1.394 2.114-1.394 3.773V30.5zm-13.333 0v-3.833a9.2 9.2 0 0 1 .482-3H9.5v20.166h26.333v-4.166H28a1 1 0 1 1 0-2h7.833V32a1.5 1.5 0 0 1 1.5-1.5zm.333 14.83V33.5H54.5v15.667H38.833zm1.179-23.663H9.5v-6.833h37v3.668c-2.272.036-4.277.82-5.727 2.27a7.3 7.3 0 0 0-.761.895m-26.345 17a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2h-8a1 1 0 0 1-1-1m34 2.87a1.833 1.833 0 1 0-2 0V44a1 1 0 0 0 2 0zm-34-12.203a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1V32a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1zm2 1V31h6v-.667z"/></svg></template>
+<script setup lang="ts">
+/**
+ * SecurePayment64 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/SecurePaymentAlt20/SecurePaymentAlt20.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.917 5.833a4.083 4.083 0 1 1 8.167 0v1.75h1.75a.75.75 0 0 1 .75.75V17.5a.75.75 0 0 1-.75.75H4.167a.75.75 0 0 1-.75-.75V8.333a.75.75 0 0 1 .75-.75h1.75zm6.667 0v1.75H7.417v-1.75a2.583 2.583 0 0 1 5.167 0m-7.667 3.25v7.667h10.167V9.083zm7.905 2.906a.75.75 0 0 0-1.06-1.061l-2.42 2.42-1.14-.996a.75.75 0 0 0-.987 1.13l1.666 1.457a.75.75 0 0 0 1.025-.034z"/></svg></template>
+<script setup lang="ts">
+/**
+ * SecurePaymentAlt20 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/SecurePaymentAlt24/SecurePaymentAlt24.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="M7 7a5 5 0 0 1 10 0v2h2a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1h2zm8 0v2H9V7a3 3 0 1 1 6 0m-9 4v9h12v-9zm9.457 3.457a1 1 0 0 0-1.414-1.414l-2.839 2.838-1.295-1.134a1 1 0 0 0-1.317 1.506l2 1.75a1 1 0 0 0 1.365-.046z"/></svg></template>
+<script setup lang="ts">
+/**
+ * SecurePaymentAlt24 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/SecurePaymentAlt32/SecurePaymentAlt32.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="M9.667 9.333a6.333 6.333 0 1 1 12.667 0v3h3a1 1 0 0 1 1 1V28a1 1 0 0 1-1 1H6.667a1 1 0 0 1-1-1V13.333a1 1 0 0 1 1-1h3zm10.667 0v3h-8.667v-3a4.333 4.333 0 1 1 8.667 0m-12.667 5V27h16.667V14.333zm12.707 4.707a1 1 0 0 0-1.414-1.414l-4.005 4.005-1.963-1.717a1 1 0 1 0-1.317 1.505l2.667 2.334a1 1 0 0 0 1.365-.046z"/></svg></template>
+<script setup lang="ts">
+/**
+ * SecurePaymentAlt32 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/SecurePaymentAlt48/SecurePaymentAlt48.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="M14.5 14a9.5 9.5 0 0 1 19 0v4.5H38a1.5 1.5 0 0 1 1.5 1.5v22a1.5 1.5 0 0 1-1.5 1.5H10A1.5 1.5 0 0 1 8.5 42V20a1.5 1.5 0 0 1 1.5-1.5h4.5zm16 0v4.5h-13V14a6.5 6.5 0 1 1 13 0m-19 7.5v19h25v-19zm19.06 7.06a1.5 1.5 0 0 0-2.12-2.12l-6.008 6.007-2.944-2.576a1.5 1.5 0 0 0-1.976 2.258l4 3.5a1.5 1.5 0 0 0 2.049-.068z"/></svg></template>
+<script setup lang="ts">
+/**
+ * SecurePaymentAlt48 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>