puzel, close, document, edit icon component created

components/svg/closeIcon.vue

@@ -0,0 +1,34 @@
+<template>
+ <svg 
+ :fill="props.fill" 
+ xmlns="http:https://www.w3.org/2000/svg" 
+ viewBox="0 0 24 24" 
+ :width="props.width"
+ :height="props.height"
+ > 
+ <path 
+ d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z"
+ :fill="props.fill"
+ :stroke="props.fill"
+ />
+ </svg>
+</template>
+
+<script setup>
+ const props = defineProps({
+ width: {
+ type: String,
+ default: "26",
+ },
+ height: {
+ type: String,
+ default: "26",
+ },
+ fill: {
+ type: String,
+ default: "#DCDCDC",
+ },
+ })
+</script>
+
+<style></style>

components/svg/documentIcon.vue

@@ -0,0 +1,34 @@
+<template>
+ <svg 
+ :fill="props.fill" 
+ xmlns="http:https://www.w3.org/2000/svg" 
+ viewBox="0 0 24 24" 
+ :width="props.width"
+ :height="props.height"
+ > 
+ <path 
+ d="M 6 2 C 4.9057453 2 4 2.9057453 4 4 L 4 20 C 4 21.094255 4.9057453 22 6 22 L 18 22 C 19.094255 22 20 21.094255 20 20 L 20 8 L 14 2 L 6 2 z M 6 4 L 13 4 L 13 9 L 18 9 L 18 20 L 6 20 L 6 4 z M 8 12 L 8 14 L 16 14 L 16 12 L 8 12 z M 8 16 L 8 18 L 16 18 L 16 16 L 8 16 z"
+ :fill="props.fill"
+ :stroke="props.fill"
+ />
+ </svg>
+</template>
+
+<script setup>
+ const props = defineProps({
+ width: {
+ type: String,
+ default: "26",
+ },
+ height: {
+ type: String,
+ default: "26",
+ },
+ fill: {
+ type: String,
+ default: "#DCDCDC",
+ },
+ })
+</script>
+
+<style></style>

components/svg/editIcon.vue

@@ -0,0 +1,34 @@
+<template>
+ <svg 
+ :fill="props.fill" 
+ xmlns="http:https://www.w3.org/2000/svg" 
+ viewBox="0 0 24 24" 
+ :width="props.width"
+ :height="props.height"
+ > 
+ <path 
+ d="M 18.414062 2 C 18.158062 2 17.902031 2.0979687 17.707031 2.2929688 L 15.707031 4.2929688 L 14.292969 5.7070312 L 3 17 L 3 21 L 7 21 L 21.707031 6.2929688 C 22.098031 5.9019687 22.098031 5.2689063 21.707031 4.8789062 L 19.121094 2.2929688 C 18.926094 2.0979687 18.670063 2 18.414062 2 z M 18.414062 4.4140625 L 19.585938 5.5859375 L 18.292969 6.8789062 L 17.121094 5.7070312 L 18.414062 4.4140625 z M 15.707031 7.1210938 L 16.878906 8.2929688 L 6.171875 19 L 5 19 L 5 17.828125 L 15.707031 7.1210938 z"
+ :fill="props.fill"
+ :stroke="props.fill"
+ />
+ </svg>
+</template>
+
+<script setup>
+ const props = defineProps({
+ width: {
+ type: String,
+ default: "26",
+ },
+ height: {
+ type: String,
+ default: "26",
+ },
+ fill: {
+ type: String,
+ default: "#DCDCDC",
+ },
+ })
+</script>
+
+<style></style>

components/svg/puzzelIcon.vue

@@ -0,0 +1,34 @@
+<template>
+ <svg 
+ :fill="props.fill" 
+ xmlns="http:https://www.w3.org/2000/svg" 
+ viewBox="0 0 24 24" 
+ :width="props.width"
+ :height="props.height"
+ > 
+ <path 
+ d="M 11 1 C 9.3550302 1 8 2.3550302 8 4 L 4 4 C 2.9069372 4 2 4.9069372 2 6 L 2 12 L 4 12 C 4.5650302 12 5 12.43497 5 13 C 5 13.56503 4.5650302 14 4 14 L 2 14 L 2 20 C 2 21.093063 2.9069372 22 4 22 L 10 22 L 10 20 C 10 19.43497 10.43497 19 11 19 C 11.56503 19 12 19.43497 12 20 L 12 22 L 18 22 C 19.093063 22 20 21.093063 20 20 L 20 16 C 21.64497 16 23 14.64497 23 13 C 23 11.35503 21.64497 10 20 10 L 20 6 C 20 4.9069372 19.093063 4 18 4 L 14 4 C 14 2.3550302 12.64497 1 11 1 z M 11 3 C 11.56503 3 12 3.4349698 12 4 L 12 6 L 18 6 L 18 12 L 20 12 C 20.56503 12 21 12.43497 21 13 C 21 13.56503 20.56503 14 20 14 L 18 14 L 18 20 L 14 20 C 14 18.35503 12.64497 17 11 17 C 9.3550302 17 8 18.35503 8 20 L 4 20 L 4 16 C 5.6449698 16 7 14.64497 7 13 C 7 11.35503 5.6449698 10 4 10 L 4 6 L 10 6 L 10 4 C 10 3.4349698 10.43497 3 11 3 z"
+ :fill="props.fill"
+ :stroke="props.fill"
+ />
+ </svg>
+</template>
+
+<script setup>
+ const props = defineProps({
+ width: {
+ type: String,
+ default: "26",
+ },
+ height: {
+ type: String,
+ default: "26",
+ },
+ fill: {
+ type: String,
+ default: "#DCDCDC",
+ },
+ })
+</script>
+
+<style></style>