@mozaic-ds/icons-vue 2.3.0 → 2.5.0

package/src/components/CuttingWoodGlass64/CuttingWoodGlass64.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="M6.5 8A1.5 1.5 0 0 1 8 6.5h24a25.4 25.4 0 0 1 16.94 6.44l2.666-2.667a1.5 1.5 0 1 1 2.121 2.121l-2.666 2.667A25.4 25.4 0 0 1 57.5 32a1.5 1.5 0 0 1-1.5 1.5h-1.196q.03.58.03 1.167c0 3.26-.684 6.36-1.915 9.166H56a1.5 1.5 0 0 1 0 3h-4.675C47.282 53.243 40.138 57.5 32 57.5s-15.282-4.257-19.325-10.667H8a1.5 1.5 0 1 1 0-3h3.081A22.76 22.76 0 0 1 9.196 33.5H8A1.5 1.5 0 0 1 6.5 32zm4.352 22.5H9.549c.772-11.727 10.529-21 22.451-21s21.679 9.273 22.45 21h-7.692C46.007 23.012 39.686 17.167 32 17.167S17.994 23.012 17.242 30.5zm1.348 3q-.033.579-.033 1.167C12.167 45.62 21.047 54.5 32 54.5c6.368 0 12.035-3.001 15.664-7.667h-23.83v-3h25.758a19.75 19.75 0 0 0 2.241-9.166q0-.588-.033-1.167h-6.467a1.5 1.5 0 0 1-1.5-1.5c0-6.535-5.298-11.833-11.833-11.833S20.167 25.465 20.167 32a1.5 1.5 0 0 1-1.5 1.5zm7.79-24A25.6 25.6 0 0 0 9.5 19.99V9.5zM32 33a1.667 1.667 0 1 0 0 3.333A1.667 1.667 0 0 0 32 33m-3.667 1.667a3.667 3.667 0 1 1 7.334 0 3.667 3.667 0 0 1-7.334 0"/></svg></template>
+<script setup lang="ts">
+/**
+ * CuttingWoodGlass64 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/Cybersecurity20/Cybersecurity20.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 d="M10 1.75c.225 0 .504.071.732.137.26.074.573.177.911.297a61 61 0 0 1 2.282.87 146 146 0 0 1 2.783 1.148l.187.08.05.022.013.005.004.002a.75.75 0 0 1 .455.689v4.167c0 2.78-1.503 5.045-3.094 6.581a12.3 12.3 0 0 1-2.382 1.804c-.368.21-.719.379-1.031.497-.296.111-.617.2-.91.201-.291 0-.614-.09-.91-.201a7.4 7.4 0 0 1-1.03-.497 12.3 12.3 0 0 1-2.383-1.804c-1.59-1.536-3.093-3.801-3.093-6.581V5c0-.3.178-.571.454-.69l.296.69-.295-.69.004-.001.012-.005.05-.022.188-.08a167 167 0 0 1 2.783-1.148 63 63 0 0 1 2.281-.87c.338-.12.651-.223.911-.297.229-.066.509-.137.733-.137Zm.5 14.847a6 6 0 0 0 .697-.347c.63-.36 1.375-.896 2.085-1.581 1.43-1.38 2.635-3.282 2.635-5.502v-3.67a145 145 0 0 0-2.549-1.05 61 61 0 0 0-2.224-.85 18 18 0 0 0-.644-.214zm-1-13.213q-.28.086-.643.214c-.65.229-1.446.537-2.223.848s-1.529.621-2.086.855l-.464.195v3.671c0 2.22 1.206 4.121 2.635 5.502.71.685 1.454 1.22 2.084 1.581.261.149.497.263.697.346z"/></svg></template>
+<script setup lang="ts">
+/**
+ * Cybersecurity20 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/Cybersecurity24/Cybersecurity24.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 d="M12 2c.286 0 .633.089.906.167.315.09.693.215 1.1.358.816.288 1.8.67 2.74 1.046a176 176 0 0 1 3.343 1.38q.146.061.225.096l.06.025.015.006.004.002.001.001a1 1 0 0 1 .607.919v5c0 3.373-1.824 6.116-3.743 7.97a14.9 14.9 0 0 1-2.878 2.18 9 9 0 0 1-1.252.602c-.359.135-.759.248-1.127.248-.369 0-.769-.113-1.127-.248a9 9 0 0 1-1.252-.603 14.9 14.9 0 0 1-2.878-2.18C4.824 17.117 3 14.374 3 11V6a1 1 0 0 1 .606-.919h.001l.004-.003.016-.006.06-.025.225-.097a187 187 0 0 1 3.342-1.379 75 75 0 0 1 2.74-1.046 21 21 0 0 1 1.1-.358C11.367 2.089 11.715 2 12 2m-.5 2.135a20 20 0 0 0-.838.277c-.778.275-1.732.644-2.665 1.017A174 174 0 0 0 5 6.662V11c0 2.627 1.426 4.884 3.132 6.53a12.9 12.9 0 0 0 2.481 1.883c.338.193.638.337.886.436V4.135Zm1 15.714c.247-.1.55-.243.887-.436a13 13 0 0 0 2.482-1.883C17.574 15.884 19 13.627 19 11V6.662a189 189 0 0 0-2.996-1.233 73 73 0 0 0-2.665-1.017 20 20 0 0 0-.84-.277z"/></svg></template>
+<script setup lang="ts">
+/**
+ * Cybersecurity24 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/Cybersecurity32/Cybersecurity32.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 d="M16 3c.327 0 .747.105 1.116.21.41.117.907.281 1.446.472 1.082.381 2.389.888 3.643 1.39a234 234 0 0 1 4.45 1.835l.299.128.079.034.02.01.006.001.001.001a1 1 0 0 1 .607.919v6.667c0 4.373-2.365 7.949-4.889 10.386a19.5 19.5 0 0 1-3.771 2.857c-.582.333-1.133.597-1.622.781-.465.176-.954.309-1.384.309-.431 0-.92-.133-1.386-.309a11.6 11.6 0 0 1-1.621-.78 19.5 19.5 0 0 1-3.772-2.858C6.7 22.616 4.334 19.04 4.334 14.667V8a1 1 0 0 1 .606-.919h.002l.005-.003.02-.009.08-.034.3-.128a246 246 0 0 1 4.449-1.836c1.254-.501 2.56-1.008 3.642-1.39.54-.19 1.036-.354 1.446-.471.37-.105.79-.21 1.117-.21Zm-.566 2.134c-.354.101-.807.25-1.33.434-1.043.369-2.32.863-3.565 1.36a232 232 0 0 0-4.205 1.734v6.005c0 3.627 1.969 6.717 4.278 8.947a17.5 17.5 0 0 0 3.374 2.56c.511.292.966.506 1.334.645a4 4 0 0 0 .18.062V5.115zM16.5 26.88q.083-.026.18-.062a9.6 9.6 0 0 0 1.334-.645 17.5 17.5 0 0 0 3.375-2.56c2.31-2.23 4.278-5.32 4.278-8.947V8.662a240 240 0 0 0-4.204-1.733 98 98 0 0 0-3.566-1.36 24 24 0 0 0-1.33-.435l-.067-.019v21.766Z"/></svg></template>
+<script setup lang="ts">
+/**
+ * Cybersecurity32 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/Cybersecurity48/Cybersecurity48.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 d="M24 4.5c.49 0 1.122.157 1.675.315a40 40 0 0 1 2.168.708c1.623.573 3.583 1.332 5.464 2.084a352 352 0 0 1 7.124 2.946l.12.05.03.013.01.005.102.048A1.5 1.5 0 0 1 41.501 12v10c0 6.56-3.548 11.924-7.333 15.58-1.904 1.837-3.91 3.287-5.657 4.285-.873.499-1.7.895-2.432 1.171-.698.263-1.432.464-2.078.464-.647 0-1.38-.2-2.078-.464a17.3 17.3 0 0 1-2.432-1.17c-1.747-.999-3.754-2.449-5.657-4.287C10.048 33.924 6.5 28.56 6.5 22V12c0-.6.357-1.143.909-1.379l.01-.005.03-.012q.042-.019.12-.051a249 249 0 0 1 2.07-.874 352 352 0 0 1 5.054-2.072c1.882-.752 3.841-1.51 5.464-2.084.81-.285 1.553-.532 2.169-.708C22.88 4.657 23.51 4.5 24 4.5m1 35.736.02-.006a14.4 14.4 0 0 0 2.002-.97c1.534-.877 3.34-2.177 5.062-3.84C35.548 32.077 38.5 27.44 38.5 22v-9.008a374 374 0 0 0-6.307-2.6c-1.868-.747-3.784-1.488-5.349-2.04A38 38 0 0 0 25 7.744zm-2-32.49a36 36 0 0 0-1.844.606c-1.565.552-3.48 1.293-5.349 2.04a348 348 0 0 0-6.306 2.6V22c0 5.44 2.953 10.076 6.417 13.42 1.721 1.663 3.527 2.963 5.061 3.84.768.438 1.45.761 2.002.97l.019.005V7.745Z"/></svg></template>
+<script setup lang="ts">
+/**
+ * Cybersecurity48 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/Cybersecurity64/Cybersecurity64.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 d="M32 6.5c.574 0 1.351.189 2.096.401a52 52 0 0 1 2.863.935c2.153.76 4.759 1.769 7.265 2.771a468 468 0 0 1 9.489 3.923l.158.068.04.017.01.005.004.001c.552.237.91.78.91 1.379v13.333c0 8.56-4.631 15.591-9.625 20.413-2.508 2.421-5.15 4.329-7.444 5.64-1.146.655-2.224 1.171-3.17 1.528-.913.344-1.824.586-2.595.586s-1.682-.242-2.594-.586c-.947-.357-2.024-.873-3.17-1.528-2.295-1.31-4.937-3.219-7.444-5.64-4.994-4.822-9.625-11.853-9.625-20.413V16c0-.6.357-1.143.909-1.379h.004l.01-.006.04-.017.159-.068.6-.255a496 496 0 0 1 8.887-3.668c2.507-1.002 5.113-2.01 7.267-2.771a52 52 0 0 1 2.863-.935c.744-.212 1.52-.4 2.094-.401Zm1 47.792q.242-.074.537-.186c.767-.289 1.7-.73 2.741-1.325 2.081-1.189 4.522-2.948 6.848-5.193 4.672-4.511 8.709-10.815 8.709-18.255v-12.34a494 494 0 0 0-8.724-3.6c-2.493-.998-5.055-1.99-7.151-2.729a49 49 0 0 0-2.689-.878q-.142-.04-.271-.074zM30.73 9.786c-.723.207-1.64.508-2.69.878-2.095.74-4.657 1.731-7.15 2.729a465 465 0 0 0-8.723 3.6v12.34c0 7.44 4.036 13.744 8.709 18.255 2.325 2.245 4.766 4.004 6.847 5.193 1.04.595 1.974 1.036 2.74 1.325q.294.11.536.185V9.713q-.128.034-.269.073"/></svg></template>
+<script setup lang="ts">
+/**
+ * Cybersecurity64 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/CybersecurityCheck20/CybersecurityCheck20.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 d="M14.583 10.75a3.834 3.834 0 1 1 0 7.668 3.834 3.834 0 0 1 0-7.668m-4.582-9c.224 0 .503.071.731.137.26.074.573.177.912.297.678.239 1.496.556 2.28.87a146 146 0 0 1 2.784 1.148l.188.08.05.022q.008.002.012.005l.004.002a.75.75 0 0 1 .455.689v4.167q0 .395-.04.775a5.4 5.4 0 0 0-1.466-.612q.005-.08.006-.163v-3.67a145 145 0 0 0-2.549-1.05 61 61 0 0 0-2.223-.85c-.242-.085-.46-.157-.645-.214v7.643a5.4 5.4 0 0 0-1 1.682V3.384q-.279.086-.643.214c-.65.229-1.446.537-2.223.848s-1.529.621-2.086.855l-.464.195v3.671c0 2.22 1.206 4.121 2.636 5.502.71.685 1.453 1.22 2.084 1.581.26.149.496.263.696.346v-.139a5.4 5.4 0 0 0 1.026 1.714 2 2 0 0 1-.525.079c-.292 0-.615-.09-.91-.201a7.4 7.4 0 0 1-1.031-.497 12.3 12.3 0 0 1-2.382-1.804c-1.591-1.536-3.094-3.801-3.094-6.581V5c0-.3.179-.571.454-.69l.296.69-.295-.69h.001l.003-.001.013-.005.05-.022.187-.08a167 167 0 0 1 2.783-1.148c.785-.314 1.603-.63 2.281-.87.339-.12.651-.223.912-.297.228-.066.508-.137.732-.137m6.704 11.367a.5.5 0 0 0-.707 0l-2.004 2.003-.825-.825a.5.5 0 0 0-.707.707l1.179 1.179a.5.5 0 0 0 .707 0l2.357-2.357a.5.5 0 0 0 0-.707"/></svg></template>
+<script setup lang="ts">
+/**
+ * CybersecurityCheck20 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/CybersecurityCheck24/CybersecurityCheck24.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 d="M12.001 2c.285 0 .632.089.905.167.315.09.693.215 1.1.358.816.288 1.8.67 2.741 1.046a176 176 0 0 1 3.342 1.38q.146.061.226.096l.059.025.016.006.004.002v.001a1 1 0 0 1 .607.919v5q-.001.504-.055.99a6.5 6.5 0 0 0-1.948-.815l.003-.175V6.662l-.495-.208c-.669-.28-1.57-.653-2.501-1.025a73 73 0 0 0-2.665-1.017 20 20 0 0 0-.84-.277v9.212a6.5 6.5 0 0 0-1 1.65V4.134a20 20 0 0 0-.838.277c-.778.275-1.732.644-2.665 1.017a174 174 0 0 0-2.996 1.233V11c0 2.627 1.427 4.884 3.132 6.53a12.9 12.9 0 0 0 2.481 1.883c.305.174.58.306.812.403a6.5 6.5 0 0 0 1.28 2.072A2.7 2.7 0 0 1 12 22c-.368 0-.768-.113-1.127-.248a9 9 0 0 1-1.252-.603 14.9 14.9 0 0 1-2.878-2.18C4.824 17.117 3.001 14.374 3.001 11V6a1 1 0 0 1 .606-.919h.001l.004-.003.016-.006.06-.025.225-.097a187 187 0 0 1 3.342-1.379 75 75 0 0 1 2.741-1.046c.407-.143.785-.268 1.1-.358.273-.078.62-.167.905-.167M17.5 13a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9m2.476 2.81a.5.5 0 0 0-.708 0l-2.475 2.475-1.06-1.06a.5.5 0 1 0-.708.707l1.414 1.414a.5.5 0 0 0 .707 0l2.83-2.828a.5.5 0 0 0 0-.708"/></svg></template>
+<script setup lang="ts">
+/**
+ * CybersecurityCheck24 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/CybersecurityCheck32/CybersecurityCheck32.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 d="M23.333 17.5a5.834 5.834 0 1 1 0 11.668 5.834 5.834 0 0 1 0-11.668M16.002 3c.326 0 .747.105 1.115.21.41.117.907.281 1.447.472 1.081.381 2.388.888 3.642 1.39a235 235 0 0 1 4.45 1.835l.3.128.078.034.02.01.007.001v.001a1 1 0 0 1 .607.919v6.667q-.001.575-.055 1.13a8.6 8.6 0 0 0-1.95-.812q.005-.158.005-.318V8.662a249 249 0 0 0-4.204-1.733 98 98 0 0 0-3.566-1.36 24 24 0 0 0-1.33-.435l-.068-.019v12.89a8.7 8.7 0 0 0-1 1.618V5.115l-.065.019c-.354.101-.807.25-1.33.434-1.043.369-2.32.863-3.565 1.36a232 232 0 0 0-4.205 1.734v6.005c0 3.627 1.969 6.717 4.278 8.947a17.5 17.5 0 0 0 3.374 2.56c.512.292.966.506 1.334.645q.047.017.091.032a8.7 8.7 0 0 0 1.285 2.055 3 3 0 0 1-.695.094c-.43 0-.92-.133-1.386-.309a11.6 11.6 0 0 1-1.62-.78 19.5 19.5 0 0 1-3.772-2.858C6.7 22.616 4.335 19.04 4.335 14.667V8a1 1 0 0 1 .606-.919h.002l.005-.003.02-.009.08-.034.3-.128a246 246 0 0 1 4.449-1.836c1.254-.501 2.56-1.008 3.643-1.39.54-.19 1.035-.354 1.446-.471.368-.105.79-.21 1.116-.21m10.514 18.2a.5.5 0 0 0-.707 0l-3.418 3.416-1.533-1.532a.5.5 0 0 0-.707.707l1.886 1.886a.5.5 0 0 0 .707 0l3.772-3.77a.5.5 0 0 0 0-.708Z"/></svg></template>
+<script setup lang="ts">
+/**
+ * CybersecurityCheck32 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/CybersecurityCheck48/CybersecurityCheck48.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 d="M35 26a9 9 0 1 1 0 18 9 9 0 0 1 0-18M24.002 4.5c.49 0 1.12.157 1.674.315.616.176 1.359.423 2.169.708 1.622.573 3.582 1.332 5.464 2.084a352 352 0 0 1 7.124 2.946l.119.05.03.013.01.005.102.048A1.5 1.5 0 0 1 41.502 12v10q-.002.861-.081 1.694a13 13 0 0 0-2.928-1.22q.008-.236.009-.474v-9.008a383 383 0 0 0-6.307-2.6 148 148 0 0 0-5.348-2.04A38 38 0 0 0 25 7.744v18.95a13 13 0 0 0-2 3.297V7.745a38 38 0 0 0-1.843.607c-1.565.552-3.48 1.293-5.348 2.04a347 347 0 0 0-6.307 2.6V22c0 5.44 2.953 10.076 6.417 13.42 1.721 1.663 3.527 2.963 5.061 3.84a14.4 14.4 0 0 0 2.002.97l.018.005v-.227a13 13 0 0 0 2.047 3.352 4.5 4.5 0 0 1-1.045.14c-.646 0-1.38-.2-2.078-.464a17.3 17.3 0 0 1-2.432-1.17c-1.747-.999-3.754-2.449-5.657-4.287C10.049 33.924 6.502 28.56 6.502 22V12c0-.6.358-1.143.91-1.379l.01-.005.03-.012q.04-.019.12-.051a283 283 0 0 1 2.07-.874 352 352 0 0 1 5.053-2.072c1.882-.752 3.842-1.51 5.464-2.084.81-.285 1.553-.532 2.17-.708.552-.158 1.183-.315 1.673-.315M39.95 31.621a1 1 0 0 0-1.414 0l-4.95 4.95-2.121-2.122a1 1 0 1 0-1.414 1.414l2.828 2.828a1 1 0 0 0 1.414 0l5.657-5.656a1 1 0 0 0 0-1.414"/></svg></template>
+<script setup lang="ts">
+/**
+ * CybersecurityCheck48 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/CybersecurityCheck64/CybersecurityCheck64.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 d="M46.667 35c6.443 0 11.666 5.224 11.666 11.667S53.11 58.333 46.667 58.333 35 53.11 35 46.667 40.224 35 46.667 35M32.002 6.5c.573 0 1.35.189 2.095.401a52 52 0 0 1 2.863.935c2.154.76 4.76 1.769 7.266 2.771a469 469 0 0 1 9.488 3.923l.158.068.04.017.01.005.004.001a1.5 1.5 0 0 1 .91 1.379v13.333c0 .675-.032 1.341-.088 1.997-.93-.49-1.908-.901-2.929-1.219q.016-.387.017-.778v-12.34a493 493 0 0 0-8.724-3.6c-2.493-.998-5.055-1.99-7.151-2.729a49 49 0 0 0-2.688-.878L33 9.712v26.292a17.3 17.3 0 0 0-2 3.24V9.712l-.268.073c-.723.207-1.64.508-2.689.878-2.096.74-4.657 1.731-7.15 2.729a464 464 0 0 0-8.724 3.6v12.34c0 7.44 4.037 13.744 8.709 18.255 2.325 2.245 4.767 4.004 6.848 5.193 1.04.595 1.973 1.036 2.74 1.325q.293.11.534.185v-.202a17.3 17.3 0 0 0 2.04 3.29 5 5 0 0 1-1.038.121c-.771 0-1.682-.242-2.594-.586-.946-.357-2.024-.873-3.17-1.528-2.294-1.31-4.936-3.219-7.444-5.64-4.994-4.822-9.625-11.853-9.625-20.413V16c0-.6.358-1.143.91-1.379h.003l.01-.006.04-.017.159-.068.6-.255a481 481 0 0 1 8.887-3.668c2.507-1.002 5.113-2.01 7.267-2.771a52 52 0 0 1 2.863-.935c.744-.212 1.52-.4 2.094-.401m21.03 35.897a1 1 0 0 0-1.415 0l-6.836 6.834-3.063-3.063a1 1 0 0 0-1.414 1.414l3.77 3.771a1 1 0 0 0 1.414 0l7.543-7.543a1 1 0 0 0 0-1.413Z"/></svg></template>
+<script setup lang="ts">
+/**
+ * CybersecurityCheck64 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/CybersecurityWarning20/CybersecurityWarning20.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 d="M10.763 8.481c.566-1.05 2.075-1.051 2.641 0l4.16 7.724a1.5 1.5 0 0 1-1.322 2.211H7.924a1.5 1.5 0 0 1-1.32-2.21zM12 15.5a.75.75 0 0 0 0 1.5h.167a.751.751 0 0 0 0-1.5zM10.001 1.75c.224 0 .503.071.731.137.26.074.573.177.912.297.678.239 1.496.556 2.28.87a146 146 0 0 1 2.784 1.148l.188.08.05.022q.008.002.012.005l.004.002a.75.75 0 0 1 .455.689v4.167a7.9 7.9 0 0 1-.523 2.798l-1.059-1.822a6 6 0 0 0 .082-.976v-3.67a145 145 0 0 0-2.549-1.05 61 61 0 0 0-2.223-.85c-.242-.085-.46-.157-.645-.214v3.023l-1 1.722V3.384q-.279.086-.643.214c-.65.229-1.446.537-2.223.848s-1.529.621-2.086.855l-.464.195v3.671c0 1.883.87 3.535 2.005 4.836l-.79 1.36c-1.442-1.519-2.715-3.64-2.715-6.196V5c0-.3.179-.571.454-.69l.296.69-.295-.69h.001l.003-.001.013-.005.05-.022.187-.08a167 167 0 0 1 2.783-1.148c.785-.314 1.603-.63 2.281-.87.339-.12.651-.223.912-.297.228-.066.508-.137.732-.137m2.082 8.333a.75.75 0 0 0-.75.75v2.917a.75.75 0 0 0 1.5 0v-2.917a.75.75 0 0 0-.75-.75"/></svg></template>
+<script setup lang="ts">
+/**
+ * CybersecurityWarning20 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/CybersecurityWarning24/CybersecurityWarning24.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 d="M13.18 9.898c.566-1.05 2.074-1.051 2.64 0l5.326 9.891A1.5 1.5 0 0 1 19.826 22H9.174a1.5 1.5 0 0 1-1.32-2.21zM14.4 18.5a1 1 0 0 0 0 2h.2a1 1 0 0 0 0-2zM12.001 2c.285 0 .632.089.905.167.315.09.693.215 1.1.358.816.288 1.8.67 2.741 1.046a176 176 0 0 1 3.342 1.38q.146.061.226.096l.059.025.016.006.004.002v.001a1 1 0 0 1 .607.919v5a9.6 9.6 0 0 1-.662 3.473l-1.414-2.435Q18.999 11.53 19 11V6.662l-.495-.208c-.669-.28-1.57-.653-2.501-1.025a73 73 0 0 0-2.665-1.017 20 20 0 0 0-.84-.277V7.86l-1 1.723V4.135a20 20 0 0 0-.838.277c-.778.275-1.732.644-2.665 1.017A174 174 0 0 0 5 6.662V11c0 2.216 1.017 4.168 2.358 5.713l-1.053 1.814C4.556 16.691 3 14.114 3 11V6a1 1 0 0 1 .606-.919h.001l.004-.003.016-.006.06-.025.225-.097a187 187 0 0 1 3.342-1.379 75 75 0 0 1 2.741-1.046c.407-.143.785-.268 1.1-.358.273-.078.62-.167.905-.167ZM14.5 12a1 1 0 0 0-1 1v3.5a1 1 0 0 0 2 0V13a1 1 0 0 0-1-1"/></svg></template>
+<script setup lang="ts">
+/**
+ * CybersecurityWarning24 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/CybersecurityWarning32/CybersecurityWarning32.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 d="M18.013 12.731c.566-1.05 2.075-1.051 2.641 0l7.66 14.224a1.5 1.5 0 0 1-1.322 2.211H11.674a1.5 1.5 0 0 1-1.32-2.21zM19.2 25a1 1 0 0 0 0 2h.267a1.001 1.001 0 0 0 0-2zM16.002 3c.326 0 .747.105 1.115.21.41.117.907.281 1.447.472 1.081.381 2.388.888 3.642 1.39a235 235 0 0 1 4.45 1.835l.3.128.078.034.02.01.007.001v.001a1 1 0 0 1 .607.919v6.667c0 1.52-.288 2.944-.767 4.257l-1.404-2.42c.11-.595.17-1.208.171-1.837V8.662a249 249 0 0 0-4.204-1.733 98 98 0 0 0-3.566-1.36 24 24 0 0 0-1.33-.435l-.068-.019v5.653l-1 1.721V5.115l-.065.019c-.354.101-.807.25-1.33.434-1.043.369-2.32.863-3.565 1.36a232 232 0 0 0-4.205 1.734v6.005c0 3.1 1.44 5.807 3.3 7.92l-1.052 1.814c-2.268-2.404-4.248-5.735-4.248-9.734V8a1 1 0 0 1 .606-.919h.002l.005-.003.02-.009.08-.034.3-.128a246 246 0 0 1 4.449-1.836c1.254-.501 2.56-1.008 3.643-1.39.54-.19 1.035-.354 1.446-.471.368-.105.79-.21 1.116-.21m3.331 13.333a1 1 0 0 0-1 1V22a1 1 0 0 0 2 0v-4.667a1 1 0 0 0-1-1"/></svg></template>
+<script setup lang="ts">
+/**
+ * CybersecurityWarning32 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/CybersecurityWarning48/CybersecurityWarning48.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 d="M27.68 18.398c.566-1.05 2.074-1.051 2.64 0L42.647 41.29a1.5 1.5 0 0 1-1.32 2.211H16.673a1.5 1.5 0 0 1-1.32-2.21L27.68 18.397ZM28.8 37.5a1.5 1.5 0 0 0 0 3h.4a1.5 1.5 0 0 0 0-3zm-4.798-33c.49 0 1.12.157 1.674.315.616.176 1.359.423 2.169.708 1.622.573 3.582 1.332 5.464 2.084a352 352 0 0 1 7.124 2.946l.119.05.03.013.01.005.102.048A1.5 1.5 0 0 1 41.502 12v10c0 2.28-.43 4.417-1.149 6.387l-2.107-3.63A15 15 0 0 0 38.502 22v-9.008a383 383 0 0 0-6.307-2.6 148 148 0 0 0-5.348-2.04A38 38 0 0 0 25 7.744v7.978l-2 3.444V7.746a38 38 0 0 0-1.843.606c-1.565.552-3.48 1.293-5.348 2.04a347 347 0 0 0-6.307 2.6V22c0 4.651 2.159 8.715 4.95 11.886l-1.579 2.72C9.47 32.998 6.502 28 6.502 22V12c0-.6.358-1.143.91-1.379l.01-.005.03-.012q.04-.019.12-.051a283 283 0 0 1 2.07-.874 352 352 0 0 1 5.053-2.072c1.882-.752 3.842-1.51 5.464-2.084.81-.285 1.553-.532 2.17-.708.552-.158 1.183-.315 1.673-.315m4.997 20a1.5 1.5 0 0 0-1.5 1.5v7a1.5 1.5 0 0 0 3 0v-7a1.5 1.5 0 0 0-1.5-1.5"/></svg></template>
+<script setup lang="ts">
+/**
+ * CybersecurityWarning48 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/CybersecurityWarning64/CybersecurityWarning64.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 d="M37.346 24.064c.566-1.05 2.075-1.05 2.641 0L56.98 55.621a1.5 1.5 0 0 1-1.32 2.212H21.674a1.5 1.5 0 0 1-1.32-2.212zM38.399 50.5a1.5 1.5 0 0 0 0 3h.534a1.5 1.5 0 0 0 0-3zm-6.397-44c.573 0 1.35.189 2.095.401a52 52 0 0 1 2.863.935c2.154.76 4.76 1.769 7.266 2.771a469 469 0 0 1 9.488 3.923l.158.068.04.017.01.005.004.001a1.5 1.5 0 0 1 .91 1.379v13.333c0 2.824-.508 5.48-1.362 7.946l-2.1-3.616c.297-1.394.462-2.839.462-4.33v-12.34a493 493 0 0 0-8.724-3.6c-2.493-.998-5.055-1.99-7.151-2.729a49 49 0 0 0-2.688-.878L33 9.712v11.825l-2 3.444V9.713l-.268.073c-.723.207-1.64.508-2.689.878-2.096.74-4.657 1.731-7.15 2.729a464 464 0 0 0-8.724 3.6v12.34c0 6.422 3.009 11.997 6.837 16.304l-1.58 2.72c-4.44-4.742-8.257-11.253-8.257-19.024V16c0-.6.358-1.143.91-1.379h.003l.01-.006.04-.017.159-.068.6-.255a481 481 0 0 1 8.887-3.668c2.507-1.002 5.113-2.01 7.267-2.771a52 52 0 0 1 2.863-.935c.744-.212 1.52-.4 2.094-.401m6.664 26.667a1.5 1.5 0 0 0-1.5 1.5V44a1.5 1.5 0 0 0 3 0v-9.333a1.5 1.5 0 0 0-1.5-1.5"/></svg></template>
+<script setup lang="ts">
+/**
+ * CybersecurityWarning64 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/Danger20/Danger20.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 d="M8.5 4.377a1.75 1.75 0 0 1 3 0l5.735 9.556c.7 1.167-.14 2.65-1.501 2.65H4.267c-1.36 0-2.2-1.483-1.5-2.65zm1.714.772a.25.25 0 0 0-.428 0l-5.734 9.556a.25.25 0 0 0 .215.379h11.467a.25.25 0 0 0 .215-.38L10.214 5.15Zm-.13 7.435a.75.75 0 0 1 0 1.5h-.167a.75.75 0 0 1 0-1.5zm-.084-5a.75.75 0 0 1 .75.75v2.917a.75.75 0 0 1-1.5 0V8.334a.75.75 0 0 1 .75-.75"/></svg></template>
+<script setup lang="ts">
+/**
+ * Danger20 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/Danger24/Danger24.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 d="M10.286 4.915c.776-1.295 2.652-1.294 3.43 0L20.95 16.97c.8 1.333-.162 3.029-1.716 3.029H4.767c-1.555 0-2.516-1.697-1.716-3.03l7.235-12.055ZM4.766 18h14.468L12 5.943 4.767 18Zm7.334-3a1 1 0 0 1 0 2h-.2a1 1 0 0 1 0-2zM12 9a1 1 0 0 1 1 1v3.5a1 1 0 0 1-2 0V10a1 1 0 0 1 1-1"/></svg></template>
+<script setup lang="ts">
+/**
+ * Danger24 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/Danger32/Danger32.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 d="M14.286 6.249c.776-1.295 2.653-1.295 3.43 0L27.95 23.305c.799 1.333-.162 3.029-1.716 3.029H5.767c-1.554 0-2.515-1.696-1.716-3.029L14.286 6.25ZM5.767 24.334h20.467L16 7.277zm10.365-4a1 1 0 1 1 0 2h-.266a1 1 0 0 1 0-2zm-.133-8a1 1 0 0 1 1 1V18a1 1 0 0 1-2 0v-4.667a1 1 0 0 1 1-1Z"/></svg></template>
+<script setup lang="ts">
+/**
+ * Danger32 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/Danger48/Danger48.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 d="M21.857 8.657c.94-1.568 3.172-1.616 4.193-.147l.095.147 16.234 27.057c1 1.666-.2 3.786-2.144 3.786H7.768c-1.943 0-3.144-2.12-2.144-3.786zM8.652 36.5h30.7l-15.35-25.585zm15.548-6a1.5 1.5 0 0 1 0 3h-.4a1.5 1.5 0 0 1 0-3zm-.2-12a1.5 1.5 0 0 1 1.5 1.5v7a1.5 1.5 0 0 1-3 0v-7a1.5 1.5 0 0 1 1.5-1.5"/></svg></template>
+<script setup lang="ts">
+/**
+ * Danger48 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/Danger64/Danger64.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 d="M29.857 11.324c.94-1.568 3.171-1.616 4.192-.146l.096.146 22.234 37.057c1 1.666-.2 3.786-2.144 3.786H9.768c-1.943 0-3.144-2.12-2.144-3.786zM10.652 49.167h42.7L32 13.583 10.65 49.167Zm21.613-8a1.5 1.5 0 0 1 0 3h-.533a1.5 1.5 0 0 1 0-3zm-.267-16a1.5 1.5 0 0 1 1.5 1.5V36a1.5 1.5 0 0 1-3 0v-9.333a1.5 1.5 0 0 1 1.5-1.5"/></svg></template>
+<script setup lang="ts">
+/**
+ * Danger64 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/Data20/Data20.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="M14.167 1.75a.75.75 0 0 0 0 1.5h1.522L10 8.94 7.197 6.135a.75.75 0 0 0-1.06 0L1.97 10.303a.75.75 0 0 0 1.06 1.06l3.637-3.636L9.47 10.53a.75.75 0 0 0 1.06 0l6.22-6.22v1.523a.75.75 0 0 0 1.5 0V2.5a.75.75 0 0 0-.75-.75zm4.083 7.417a.75.75 0 0 0-1.5 0V17.5a.75.75 0 0 0 1.5 0zm-3.75 1.666a.75.75 0 0 0-1.5 0V17.5a.75.75 0 0 0 1.5 0zm-7.5.834a.75.75 0 0 0-1.5 0V17.5a.75.75 0 0 0 1.5 0zm3.75 5.833v-4.167a.75.75 0 0 0-1.5 0V17.5a.75.75 0 0 0 1.5 0m-7.5-3.333a.75.75 0 0 0-1.5 0V17.5a.75.75 0 0 0 1.5 0z"/></svg></template>
+<script setup lang="ts">
+/**
+ * Data20 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/Data24/Data24.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="M16 3a1 1 0 0 0 1 1h1.586L12 10.586 8.707 7.293a1 1 0 0 0-1.414 0l-5 5a1 1 0 1 0 1.414 1.414L8 9.414l3.293 3.293a1 1 0 0 0 1.414 0L20 5.414V7a1 1 0 1 0 2 0V3a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1m6 8a1 1 0 1 0-2 0v10a1 1 0 1 0 2 0zm-5.5 11a1 1 0 0 0 1-1v-8a1 1 0 1 0-2 0v8a1 1 0 0 0 1 1m-8-8a1 1 0 1 0-2 0v7a1 1 0 1 0 2 0zm4.5 2a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0zm-9 1a1 1 0 1 0-2 0v4a1 1 0 1 0 2 0z"/></svg></template>
+<script setup lang="ts">
+/**
+ * Data24 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/Data32/Data32.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="M21.667 4a1 1 0 0 0 1 1h2.919L16 14.586 11.374 9.96a1 1 0 0 0-1.414 0l-6.667 6.666a1 1 0 1 0 1.414 1.414l5.96-5.96 4.626 4.627a1 1 0 0 0 1.414 0L27 6.414v2.92a1 1 0 1 0 2 0V4a1 1 0 0 0-1-1h-5.333a1 1 0 0 0-1 1M29 14.667a1 1 0 1 0-2 0V28a1 1 0 1 0 2 0zM23 28V17.333a1 1 0 1 0-2 0V28a1 1 0 1 0 2 0m-12-9.333a1 1 0 1 0-2 0V28a1 1 0 1 0 2 0zm6 2.666a1 1 0 1 0-2 0V28a1 1 0 1 0 2 0zM5 22.667a1 1 0 1 0-2 0V28a1 1 0 1 0 2 0z"/></svg></template>
+<script setup lang="ts">
+/**
+ * Data32 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/Data48/Data48.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="M34 4.5a1.5 1.5 0 0 0 0 3h4.379L24 21.879l-6.94-6.94a1.5 1.5 0 0 0-2.12 0l-10 10a1.5 1.5 0 0 0 2.12 2.122L16 18.12l6.94 6.94a1.5 1.5 0 0 0 2.12 0L40.5 9.62V14a1.5 1.5 0 0 0 3 0V6A1.5 1.5 0 0 0 42 4.5zM43.5 22a1.5 1.5 0 0 0-3 0v20a1.5 1.5 0 0 0 3 0zm-9 4a1.5 1.5 0 0 0-3 0v16a1.5 1.5 0 0 0 3 0zm-18 2a1.5 1.5 0 0 0-3 0v14a1.5 1.5 0 0 0 3 0zm9 14V32a1.5 1.5 0 0 0-3 0v10a1.5 1.5 0 0 0 3 0m-18-8a1.5 1.5 0 0 0-3 0v8a1.5 1.5 0 0 0 3 0z"/></svg></template>
+<script setup lang="ts">
+/**
+ * Data48 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/Data64/Data64.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="M43.833 8a1.5 1.5 0 0 0 1.5 1.5h7.046L32 29.879l-9.606-9.606a1.5 1.5 0 0 0-2.121 0L6.939 33.606a1.5 1.5 0 1 0 2.122 2.121l12.272-12.272 9.606 9.606a1.5 1.5 0 0 0 2.122 0L54.5 11.62v7.046a1.5 1.5 0 0 0 3 0V8A1.5 1.5 0 0 0 56 6.5H45.333a1.5 1.5 0 0 0-1.5 1.5M57.5 29.333a1.5 1.5 0 0 0-3 0V56a1.5 1.5 0 0 0 3 0zm-12 5.334a1.5 1.5 0 1 0-3 0V56a1.5 1.5 0 0 0 3 0zm-24 2.666a1.5 1.5 0 0 0-3 0V56a1.5 1.5 0 0 0 3 0zm12 5.334a1.5 1.5 0 1 0-3 0V56a1.5 1.5 0 0 0 3 0zm-24 2.666a1.5 1.5 0 0 0-3 0V56a1.5 1.5 0 0 0 3 0z"/></svg></template>
+<script setup lang="ts">
+/**
+ * Data64 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/Database20/Database20.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 d="M10 1.75c2.14 0 4.111.336 5.575.905.73.284 1.371.64 1.843 1.074.473.435.832 1.005.832 1.688v9.167c0 .683-.36 1.253-.832 1.688-.472.433-1.114.79-1.843 1.073-1.464.569-3.435.905-5.575.905s-4.111-.336-5.575-.905c-.73-.284-1.371-.64-1.843-1.073-.472-.435-.832-1.005-.832-1.688V5.417c0-.683.36-1.253.832-1.688.472-.433 1.113-.79 1.843-1.074C5.889 2.086 7.86 1.75 10 1.75m6.75 11.596a6.7 6.7 0 0 1-1.266.64c-1.428.556-3.367.889-5.484.889-1.664 0-3.218-.207-4.5-.565v.273a.5.5 0 1 1-1 0v-.604a6.7 6.7 0 0 1-1.25-.633v1.238c0 .122.06.32.347.583.287.264.744.536 1.372.78 1.25.486 3.029.803 5.031.803s3.78-.317 5.031-.803c.628-.244 1.085-.516 1.372-.78.286-.263.347-.461.347-.583zm0-2.916a6.7 6.7 0 0 1-1.266.64c-1.428.556-3.367.889-5.484.889-1.664 0-3.217-.208-4.5-.565v.481a.5.5 0 0 1-1 0v-.812a6.7 6.7 0 0 1-1.25-.633v1.61q.075.09.178.186c.318.292.805.578 1.45.829 1.286.5 3.097.82 5.122.82s3.836-.32 5.122-.82c.645-.251 1.132-.537 1.45-.83q.104-.095.178-.186zm0-2.828c-.35.217-.747.41-1.175.576-1.464.569-3.435.905-5.575.905-1.653 0-3.205-.201-4.5-.555v.639a.5.5 0 0 1-1 0v-.962l-.075-.027a7 7 0 0 1-1.175-.576v1.521q.075.09.178.187c.318.292.805.578 1.45.829 1.286.5 3.097.82 5.122.82s3.836-.32 5.122-.82c.645-.25 1.132-.537 1.45-.83q.104-.095.178-.186zM10 3.25c-2.002 0-3.78.317-5.031.804-.628.244-1.085.515-1.372.779-.287.263-.347.462-.347.584s.06.32.347.583c.287.264.744.536 1.372.78 1.25.487 3.029.803 5.031.803s3.78-.316 5.031-.803c.628-.244 1.085-.516 1.372-.78.286-.263.347-.461.347-.583s-.06-.32-.347-.584-.744-.535-1.372-.78c-1.25-.486-3.029-.803-5.031-.803"/></svg></template>
+<script setup lang="ts">
+/**
+ * Database20 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/Database24/Database24.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 d="M12 2c2.577 0 4.956.404 6.727 1.093.882.343 1.664.776 2.243 1.308C21.55 4.934 22 5.642 22 6.5v11c0 .858-.45 1.566-1.03 2.099-.579.532-1.361.965-2.243 1.308C16.956 21.596 14.577 22 12 22s-4.956-.404-6.727-1.093c-.882-.343-1.664-.776-2.243-1.308C2.45 19.066 2 18.358 2 17.5v-11c0-.858.45-1.566 1.03-2.099.579-.532 1.361-.965 2.243-1.308C7.044 2.404 9.423 2 12 2m8 13.962c-.42.272-.91.517-1.455.728-1.7.661-4.014 1.06-6.545 1.06-2.045 0-3.948-.261-5.5-.71v.46a.5.5 0 0 1-1 0v-.793q-.023-.008-.045-.017A8 8 0 0 1 4 15.962V17.5c0 .109.053.322.384.626.332.305.868.627 1.614.917C7.485 19.621 9.606 20 12 20s4.515-.379 6.002-.957c.746-.29 1.282-.612 1.614-.917.331-.305.384-.517.384-.626zm0-3.5c-.42.272-.91.517-1.455.728-1.7.661-4.014 1.06-6.545 1.06-2.045 0-3.948-.261-5.5-.71v.71a.5.5 0 0 1-1 0v-1.043q-.023-.008-.045-.017A8 8 0 0 1 4 12.462v2.236l.046.046c.394.362.991.711 1.771 1.015 1.558.605 3.744.991 6.183.991 2.44 0 4.625-.386 6.183-.991.78-.304 1.377-.653 1.771-1.015l.046-.046zM20 9.3a9 9 0 0 1-1.273.606C16.956 10.596 14.577 11 12 11c-2.021 0-3.92-.25-5.5-.69V11a.5.5 0 0 1-1 0V9.991q-.114-.041-.227-.084A9 9 0 0 1 4 9.301v1.897l.046.046c.394.362.991.711 1.771 1.015 1.558.605 3.744.991 6.183.991 2.44 0 4.625-.386 6.183-.991.78-.304 1.377-.653 1.771-1.015l.046-.046zM12 4c-2.394 0-4.515.379-6.002.957-.746.29-1.282.612-1.614.917C4.053 6.178 4 6.391 4 6.5s.053.322.384.626c.332.305.868.627 1.614.917C7.485 8.621 9.606 9 12 9s4.515-.379 6.002-.957c.746-.29 1.282-.612 1.614-.917.331-.304.384-.517.384-.626s-.053-.322-.384-.626c-.332-.305-.868-.627-1.614-.917C16.516 4.379 14.394 4 12 4"/></svg></template>
+<script setup lang="ts">
+/**
+ * Database24 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/Database32/Database32.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 d="M16 3c3.405 0 6.534.535 8.848 1.435 1.153.448 2.155 1.008 2.885 1.68C28.465 6.786 29 7.647 29 8.666v14.667c0 1.018-.535 1.88-1.267 2.553-.73.671-1.732 1.23-2.885 1.678C22.534 28.465 19.405 29 16 29s-6.534-.535-8.848-1.435c-1.153-.448-2.155-1.007-2.885-1.678C3.535 25.214 3 24.352 3 23.334V8.667c0-1.019.535-1.88 1.267-2.553.73-.671 1.732-1.23 2.885-1.68C9.466 3.535 12.595 3 16 3m11 17.844c-.625.477-1.418.899-2.333 1.255C22.424 22.97 19.36 23.5 16 23.5c-2.81 0-5.411-.372-7.5-1.003v.836a.5.5 0 1 1-1 0V22.16l-.167-.061c-.915-.356-1.708-.778-2.333-1.255v2.49c0 .27.137.636.62 1.08.484.445 1.24.891 2.257 1.287C9.907 26.491 12.778 27 16 27s6.094-.51 8.123-1.299c1.017-.396 1.773-.842 2.257-1.287.483-.444.62-.81.62-1.08zm0-4.666c-.625.477-1.418.899-2.333 1.255-2.243.872-5.308 1.401-8.667 1.401-2.809 0-5.411-.372-7.5-1.003V19l-.01.1a.5.5 0 0 1-.98 0L7.5 19v-1.506l-.167-.061c-.915-.356-1.708-.778-2.333-1.255v3.31q.123.147.281.293c.546.502 1.364.977 2.415 1.386 2.1.817 5.036 1.333 8.304 1.333s6.203-.516 8.304-1.333c1.052-.409 1.87-.884 2.415-1.386a3 3 0 0 0 .281-.293zm0-4.384c-.617.422-1.347.791-2.152 1.104-2.314.9-5.443 1.435-8.848 1.435-2.783 0-5.38-.358-7.5-.98v1.314a.5.5 0 0 1-1 0v-1.64q-.177-.063-.348-.129c-.805-.313-1.535-.682-2.152-1.104v3.028q.123.146.281.293c.546.502 1.364.977 2.415 1.386 2.1.817 5.036 1.333 8.304 1.333s6.203-.516 8.304-1.333c1.051-.409 1.87-.884 2.415-1.386a3 3 0 0 0 .281-.293zM16 5c-3.222 0-6.094.51-8.123 1.299-1.018.396-1.773.842-2.257 1.287-.483.444-.62.811-.62 1.081s.137.636.62 1.08c.484.445 1.24.891 2.257 1.287 2.03.79 4.901 1.299 8.123 1.299s6.094-.51 8.123-1.299c1.018-.396 1.773-.842 2.257-1.287.483-.444.62-.81.62-1.08s-.137-.637-.62-1.081c-.484-.445-1.24-.891-2.257-1.287C22.093 5.509 19.222 5 16 5"/></svg></template>
+<script setup lang="ts">
+/**
+ * Database32 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/Database48/Database48.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 d="M24 4.5c5.108 0 9.8.803 13.272 2.152 1.73.673 3.233 1.511 4.329 2.519C42.698 10.18 43.5 11.47 43.5 13v22c0 1.528-.802 2.82-1.9 3.83-1.095 1.007-2.598 1.845-4.328 2.518C33.8 42.698 29.108 43.5 24 43.5s-9.8-.803-13.271-2.152c-1.731-.673-3.234-1.511-4.33-2.519S4.5 36.53 4.5 35V13c0-1.528.802-2.82 1.9-3.83 1.095-1.007 2.598-1.845 4.329-2.518C14.199 5.302 18.892 4.5 24 4.5m16.5 27.083c-.937.686-2.096 1.288-3.41 1.799C33.692 34.704 29.063 35.5 24 35.5c-4.09 0-7.896-.52-11-1.417V35a1 1 0 1 1-2 0v-1.585l-.09-.033c-1.314-.51-2.473-1.113-3.41-1.799V35c0 .405.205.954.93 1.62.726.668 1.859 1.338 3.385 1.932C14.86 39.736 19.167 40.5 24 40.5s9.14-.764 12.185-1.948c1.526-.594 2.66-1.264 3.385-1.932.725-.666.93-1.215.93-1.62zm0-7c-.937.686-2.096 1.288-3.41 1.799C33.692 27.704 29.063 28.5 24 28.5c-4.09 0-7.896-.52-11-1.417V28.5a1 1 0 1 1-2 0v-2.085l-.09-.033c-1.314-.51-2.473-1.113-3.41-1.799v4.251c.156.212.35.432.592.654.787.724 1.982 1.423 3.543 2.03C14.75 32.729 19.12 33.5 24 33.5c4.879 0 9.25-.771 12.365-1.982 1.56-.607 2.756-1.306 3.543-2.03.242-.222.436-.442.592-.654zm0-6.888c-.925.632-2.021 1.183-3.228 1.653C33.8 20.698 29.108 21.5 24 21.5c-4.066 0-7.867-.51-11-1.398V22a1 1 0 1 1-2 0v-2.552q-.137-.05-.271-.1c-1.208-.47-2.304-1.02-3.229-1.653v4.139c.156.212.35.432.592.654.787.724 1.982 1.423 3.543 2.03C14.75 25.729 19.12 26.5 24 26.5c4.879 0 9.25-.771 12.365-1.982 1.56-.607 2.756-1.306 3.543-2.03.242-.222.436-.442.592-.654zM24 7.5c-4.833 0-9.14.764-12.185 1.948-1.526.594-2.66 1.264-3.385 1.932-.725.666-.93 1.215-.93 1.62s.205.954.93 1.62c.726.668 1.859 1.338 3.385 1.932C14.86 17.736 19.167 18.5 24 18.5s9.14-.764 12.185-1.948c1.526-.594 2.66-1.264 3.385-1.932.725-.666.93-1.215.93-1.62s-.205-.954-.93-1.62c-.726-.668-1.859-1.338-3.385-1.932C33.14 8.264 28.833 7.5 24 7.5"/></svg></template>
+<script setup lang="ts">
+/**
+ * Database48 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/Database64/Database64.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 d="M32 6.5c6.765 0 12.958 1.064 17.515 2.836 2.273.884 4.215 1.973 5.614 3.26s2.37 2.887 2.371 4.737v29.333c0 1.85-.97 3.45-2.371 4.737-1.4 1.287-3.341 2.377-5.614 3.261C44.958 56.436 38.765 57.5 32 57.5s-12.958-1.064-17.515-2.836c-2.273-.884-4.215-1.974-5.614-3.26-1.4-1.289-2.371-2.888-2.371-4.738V17.333c0-1.85.97-3.45 2.371-4.737 1.4-1.287 3.341-2.376 5.614-3.26C19.042 7.564 25.235 6.5 32 6.5m22.5 34.793c-1.314 1.121-3.085 2.096-5.167 2.905C44.848 45.943 38.719 47 32 47c-5.618 0-10.823-.743-15-2.005v1.672a1 1 0 0 1-2 0v-2.346q-.167-.06-.333-.123c-2.082-.81-3.853-1.784-5.167-2.905v5.373c0 .727.373 1.584 1.401 2.53 1.03.946 2.603 1.867 4.672 2.672C19.703 53.474 25.51 54.5 32 54.5s12.297-1.026 16.427-2.632c2.07-.805 3.642-1.726 4.672-2.673 1.028-.945 1.401-1.802 1.401-2.529zm0-9.334c-1.314 1.121-3.085 2.096-5.167 2.905C44.848 36.61 38.719 37.666 32 37.666c-5.619 0-10.823-.743-15-2.005V38l-.005.102a1 1 0 0 1-1.99 0L15 38v-3.013q-.167-.06-.333-.123c-2.082-.81-3.853-1.784-5.167-2.905v6.345c.251.413.6.835 1.063 1.26 1.09 1.003 2.725 1.953 4.829 2.771C19.592 43.969 25.464 45 32 45s12.407-1.031 16.608-2.665c2.104-.818 3.738-1.768 4.83-2.772a5.9 5.9 0 0 0 1.062-1.26V31.96Zm0-9.354c-1.33 1.056-3.035 1.968-4.985 2.726-4.557 1.772-10.75 2.836-17.515 2.836-5.591 0-10.791-.729-15-1.982v3.148a1 1 0 1 1-2 0v-3.811q-.26-.094-.515-.19c-1.95-.76-3.656-1.67-4.985-2.727v6.366c.251.413.6.834 1.063 1.259 1.09 1.003 2.725 1.953 4.829 2.771 4.2 1.634 10.072 2.665 16.608 2.665s12.407-1.031 16.608-2.665c2.104-.818 3.738-1.768 4.83-2.771a5.9 5.9 0 0 0 1.062-1.26zM32 9.5c-6.49 0-12.297 1.026-16.427 2.632-2.07.805-3.642 1.726-4.672 2.673-1.028.945-1.4 1.801-1.401 2.528 0 .727.373 1.584 1.401 2.53 1.03.946 2.603 1.867 4.672 2.672 4.13 1.606 9.937 2.632 16.427 2.632s12.297-1.026 16.427-2.632c2.07-.805 3.642-1.726 4.672-2.673 1.028-.945 1.401-1.802 1.401-2.529s-.373-1.583-1.401-2.528c-1.03-.947-2.603-1.868-4.672-2.673C44.297 10.526 38.49 9.5 32 9.5"/></svg></template>
+<script setup lang="ts">
+/**
+ * Database64 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>