[WIP] Перевел часть иконок в компоненты

src/components/icons/BigText.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(d="M7.83333 7.20833C7.02792 7.20833 6.375 7.86125 6.375 8.66667V9.47024C6.375 9.81542 6.65482 10.0952 7 10.0952C7.34518 10.0952 7.625 9.81542 7.625 9.47024V8.66667C7.625 8.55161 7.71827 8.45833 7.83333 8.45833H10.9583V16.375H9.94643C9.60125 16.375 9.32143 16.6548 9.32143 17C9.32143 17.3452 9.60125 17.625 9.94643 17.625H13.2202C13.5654 17.625 13.8452 17.3452 13.8452 17C13.8452 16.6548 13.5654 16.375 13.2202 16.375H12.2083V8.45833H15.3333C15.4484 8.45833 15.5417 8.55161 15.5417 8.66667V9.47024C15.5417 9.81542 15.8215 10.0952 16.1667 10.0952C16.5118 10.0952 16.7917 9.81542 16.7917 9.47024V8.66667C16.7917 7.86125 16.1387 7.20833 15.3333 7.20833H7.83333Z")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M2.83333 2C2.3731 2 2 2.3731 2 2.83333V4.5C2 4.96024 2.3731 5.33333 2.83333 5.33333H3.04167V18.6667H2.83333C2.3731 18.6667 2 19.0398 2 19.5V21.1667C2 21.6269 2.3731 22 2.83333 22H4.5C4.96024 22 5.33333 21.6269 5.33333 21.1667V20.9583H18.6667V21.1667C18.6667 21.6269 19.0398 22 19.5 22H21.1667C21.6269 22 22 21.6269 22 21.1667V19.5C22 19.0398 21.6269 18.6667 21.1667 18.6667H20.9583V5.33333H21.1667C21.6269 5.33333 22 4.96024 22 4.5V2.83333C22 2.3731 21.6269 2 21.1667 2H19.5C19.0398 2 18.6667 2.3731 18.6667 2.83333V3.04167H5.33333V2.83333C5.33333 2.3731 4.96024 2 4.5 2H2.83333ZM5.33333 19.5V19.7083H18.6667V19.5C18.6667 19.0398 19.0398 18.6667 19.5 18.6667H19.7083V5.33333H19.5C19.0398 5.33333 18.6667 4.96024 18.6667 4.5V4.29167H5.33333V4.5C5.33333 4.96024 4.96024 5.33333 4.5 5.33333H4.29167V18.6667H4.5C4.96024 18.6667 5.33333 19.0398 5.33333 19.5Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "BigText",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconBold.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(d="M8.84766 18H13.207C14.1152 18 14.8945 17.8535 15.5449 17.5605C16.2012 17.2617 16.7051 16.8428 17.0566 16.3037C17.4141 15.7646 17.5928 15.126 17.5928 14.3877V14.3701C17.5928 13.8252 17.4668 13.333 17.2148 12.8936C16.9629 12.4541 16.6172 12.0967 16.1777 11.8213C15.7441 11.5459 15.2461 11.3877 14.6836 11.3467V11.1973C15.123 11.127 15.5156 10.9629 15.8613 10.7051C16.207 10.4473 16.4795 10.1279 16.6787 9.74707C16.8838 9.36035 16.9863 8.94141 16.9863 8.49023V8.47266C16.9863 7.82227 16.8281 7.2627 16.5117 6.79395C16.2012 6.31934 15.7529 5.95605 15.167 5.7041C14.5869 5.44629 13.8838 5.31738 13.0576 5.31738H8.84766V7.28613H12.3809C13.0137 7.28613 13.5029 7.43262 13.8486 7.72559C14.2002 8.0127 14.376 8.41406 14.376 8.92969V8.94727C14.376 9.46875 14.1855 9.87305 13.8047 10.1602C13.4238 10.4473 12.873 10.5908 12.1523 10.5908H8.84766V12.3398H12.46C12.9873 12.3398 13.4297 12.4102 13.7871 12.5508C14.1504 12.6855 14.4229 12.8877 14.6045 13.1572C14.792 13.4268 14.8857 13.7607 14.8857 14.1592V14.1768C14.8857 14.7744 14.6836 15.2314 14.2793 15.5479C13.8809 15.8643 13.2979 16.0225 12.5303 16.0225H8.84766V18ZM7.52051 18H10.1748V5.31738H7.52051V18Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconBold",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconExport.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M11.487 1.45285C11.7755 1.18238 12.2245 1.18238 12.513 1.45285L16.7796 5.45285C17.0818 5.73615 17.0971 6.21077 16.8138 6.51296C16.5305 6.81514 16.0559 6.83045 15.7537 6.54715L12.75 3.73117V13.5C12.75 13.9142 12.4142 14.25 12 14.25C11.5858 14.25 11.25 13.9142 11.25 13.5V3.73117L8.24629 6.54715C7.94411 6.83045 7.46948 6.81514 7.18618 6.51296C6.90288 6.21077 6.91819 5.73615 7.22038 5.45285L11.487 1.45285ZM3.25 10.5C3.25 9.5335 4.0335 8.75 5 8.75H7.2C7.61421 8.75 7.95 9.08579 7.95 9.5C7.95 9.91421 7.61421 10.25 7.2 10.25H5C4.86193 10.25 4.75 10.3619 4.75 10.5V20C4.75 20.1381 4.86193 20.25 5 20.25H19C19.1381 20.25 19.25 20.1381 19.25 20V10.5C19.25 10.3619 19.1381 10.25 19 10.25H16.8C16.3858 10.25 16.05 9.91421 16.05 9.5C16.05 9.08579 16.3858 8.75 16.8 8.75H19C19.9665 8.75 20.75 9.5335 20.75 10.5V20C20.75 20.9665 19.9665 21.75 19 21.75H5C4.0335 21.75 3.25 20.9665 3.25 20V10.5Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconExport",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconGroup.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M3.25 4C3.25 3.58579 3.58579 3.25 4 3.25H7C7.41421 3.25 7.75 3.58579 7.75 4C7.75 4.41421 7.41421 4.75 7 4.75H4.75V19.25H7C7.41421 19.25 7.75 19.5858 7.75 20C7.75 20.4142 7.41421 20.75 7 20.75H4C3.58579 20.75 3.25 20.4142 3.25 20H4C3.25 20 3.25 20.0001 3.25 20V4ZM6.25 8C6.25 7.58579 6.58579 7.25 7 7.25H20C20.4142 7.25 20.75 7.58579 20.75 8C20.75 8.41421 20.4142 8.75 20 8.75H7C6.58579 8.75 6.25 8.41421 6.25 8ZM6.25 12C6.25 11.5858 6.58579 11.25 7 11.25H20C20.4142 11.25 20.75 11.5858 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75H7C6.58579 12.75 6.25 12.4142 6.25 12ZM6.25 16C6.25 15.5858 6.58579 15.25 7 15.25H20C20.4142 15.25 20.75 15.5858 20.75 16C20.75 16.4142 20.4142 16.75 20 16.75H7C6.58579 16.75 6.25 16.4142 6.25 16Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconGroup",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconItalic.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(d="M9.42188 18H11.3115L13.3418 8.4375H11.4521L9.42188 18ZM12.9814 6.78516C13.3096 6.78516 13.5879 6.66504 13.8164 6.4248C14.0508 6.18457 14.168 5.89746 14.168 5.56348C14.168 5.21777 14.0508 4.92773 13.8164 4.69336C13.5879 4.45312 13.3096 4.33301 12.9814 4.33301C12.6533 4.33301 12.3721 4.45312 12.1377 4.69336C11.9033 4.92773 11.7861 5.21777 11.7861 5.56348C11.7861 5.89746 11.9033 6.18457 12.1377 6.4248C12.3721 6.66504 12.6533 6.78516 12.9814 6.78516Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconItalic",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconSearch.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M10.5 2.75C8.44457 2.75 6.47333 3.56652 5.01992 5.01992C3.56652 6.47333 2.75 8.44457 2.75 10.5C2.75 12.5554 3.56652 14.5267 5.01992 15.9801C6.47333 17.4335 8.44457 18.25 10.5 18.25C12.5477 18.25 14.5119 17.4396 15.9637 15.9964C15.9703 15.9893 15.9772 15.9822 15.9841 15.9752C15.9906 15.9688 15.9971 15.9625 16.0037 15.9564C17.4423 14.5053 18.25 12.5443 18.25 10.5C18.25 8.44457 17.4335 6.47333 15.9801 5.01992C14.5267 3.56652 12.5554 2.75 10.5 2.75ZM17.5528 16.4851C18.966 14.8198 19.75 12.7003 19.75 10.5C19.75 8.04675 18.7754 5.69397 17.0407 3.95926C15.306 2.22455 12.9533 1.25 10.5 1.25C8.04675 1.25 5.69397 2.22455 3.95926 3.95926C2.22455 5.69397 1.25 8.04675 1.25 10.5C1.25 12.9533 2.22455 15.306 3.95926 17.0407C5.69397 18.7754 8.04675 19.75 10.5 19.75C12.7037 19.75 14.8263 18.9636 16.4927 17.5463L20.4692 21.5299C20.7618 21.823 21.2367 21.8234 21.5299 21.5308C21.823 21.2382 21.8234 20.7633 21.5308 20.4701L17.5528 16.4851Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconSearch",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconStriketrought.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(d="M11.7568 18.2988C12.7002 18.2988 13.5234 18.1436 14.2266 17.833C14.9297 17.5166 15.4746 17.0713 15.8613 16.4971C16.248 15.9229 16.4414 15.2402 16.4414 14.4492V14.4404C16.4414 13.8311 16.3154 13.3037 16.0635 12.8584C15.8174 12.4072 15.4248 12.0264 14.8857 11.7158C14.3467 11.4053 13.6348 11.1533 12.75 10.96L11.3438 10.6436C10.4824 10.4561 9.86426 10.1895 9.48926 9.84375C9.11426 9.49805 8.92676 9.07324 8.92676 8.56934V8.56055C8.92676 8.11523 9.0498 7.74023 9.2959 7.43555C9.54785 7.13086 9.88477 6.89648 10.3066 6.73242C10.7285 6.5625 11.2031 6.47754 11.7305 6.47754C12.2812 6.47168 12.7617 6.55371 13.1719 6.72363C13.582 6.89355 13.9102 7.125 14.1562 7.41797C14.4023 7.71094 14.5547 8.04492 14.6133 8.41992L14.6309 8.53418H16.2129L16.2041 8.41113C16.1631 7.77832 15.9492 7.20703 15.5625 6.69727C15.1816 6.18164 14.666 5.77441 14.0156 5.47559C13.3652 5.1709 12.6182 5.01855 11.7744 5.01855C10.9014 5.01855 10.1279 5.1709 9.4541 5.47559C8.78613 5.78027 8.26172 6.20215 7.88086 6.74121C7.50586 7.28027 7.31543 7.90137 7.30957 8.60449V8.61328C7.30957 9.5332 7.59668 10.2891 8.1709 10.8809C8.75098 11.4668 9.67676 11.9004 10.9482 12.1816L12.3545 12.4893C13.2275 12.6826 13.8574 12.9609 14.2441 13.3242C14.6309 13.6816 14.8242 14.124 14.8242 14.6514V14.6602C14.8242 15.0879 14.6953 15.4658 14.4375 15.7939C14.1797 16.1221 13.8252 16.3799 13.374 16.5674C12.9287 16.749 12.4189 16.8398 11.8447 16.8398C11.2354 16.8398 10.6904 16.7549 10.21 16.585C9.73535 16.415 9.35449 16.1777 9.06738 15.873C8.78613 15.5625 8.625 15.1963 8.58398 14.7744L8.5752 14.6689H6.99316L7.00195 14.7744C7.06641 15.46 7.29785 16.0693 7.69629 16.6025C8.10059 17.1299 8.64551 17.5459 9.33105 17.8506C10.0225 18.1494 10.8311 18.2988 11.7568 18.2988Z")
+    path(d="M6 12.5508H17.4346V13.6055H6V12.5508Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconStriketrought",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconTable.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M1.5 5.5C1.5 4.5335 2.2835 3.75 3.25 3.75H20.75C21.7165 3.75 22.5 4.5335 22.5 5.5V18.5C22.5 19.4665 21.7165 20.25 20.75 20.25H3.25C2.2835 20.25 1.5 19.4665 1.5 18.5V5.5ZM3 7.5H21V5.5C21 5.36193 20.8881 5.25 20.75 5.25H3.25C3.11193 5.25 3 5.36193 3 5.5V7.5ZM21 9H12.75V11.25H21V9ZM21 12.75H12.75V15H21V12.75ZM21 16.5H12.75V18.75H20.75C20.8881 18.75 21 18.6381 21 18.5V16.5ZM11.25 16.5H3V18.5C3 18.6381 3.11193 18.75 3.25 18.75H11.25V16.5ZM3 15H11.25V12.75H3V15ZM3 11.25H11.25V9H3V11.25Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconTable",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconText.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M3.75 6.5C3.75 5.5335 4.5335 4.75 5.5 4.75H17.5C18.4665 4.75 19.25 5.5335 19.25 6.5V8C19.25 8.41421 18.9142 8.75 18.5 8.75C18.0858 8.75 17.75 8.41421 17.75 8V6.5C17.75 6.36193 17.6381 6.25 17.5 6.25H12.25V18.75H14C14.4142 18.75 14.75 19.0858 14.75 19.5C14.75 19.9142 14.4142 20.25 14 20.25H9C8.58579 20.25 8.25 19.9142 8.25 19.5C8.25 19.0858 8.58579 18.75 9 18.75H10.75V6.25H5.5C5.36193 6.25 5.25 6.36193 5.25 6.5V8C5.25 8.41421 4.91421 8.75 4.5 8.75C4.08579 8.75 3.75 8.41421 3.75 8V6.5Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconText",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconUnderlite.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="'none'")
+    path(d="M8.11115 6C8 15 9.22227 15.3913 12 15.3913C14.7778 15.3913 16 15 15.8889 6M7 18H17" :stroke="color" stroke-width="1.5")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconUnderlite",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/SortNumber.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H17.8696C18.2838 3.75 18.6196 4.08579 18.6196 4.5C18.6196 4.91421 18.2838 5.25 17.8696 5.25H3C2.58579 5.25 2.25 4.91421 2.25 4.5ZM17.087 7.5C17.5012 7.5 17.837 7.83579 17.837 8.25V17.4945L20.434 14.5079C20.7058 14.1953 21.1796 14.1622 21.4921 14.434C21.8047 14.7058 21.8378 15.1796 21.566 15.4921L17.6529 19.9921C17.5105 20.1559 17.304 20.25 17.087 20.25C16.8699 20.25 16.6634 20.1559 16.521 19.9921L12.608 15.4921C12.3362 15.1796 12.3692 14.7058 12.6818 14.434C12.9943 14.1622 13.4681 14.1953 13.7399 14.5079L16.337 17.4945V8.25C16.337 7.83579 16.6727 7.5 17.087 7.5ZM2.25 9.75C2.25 9.33579 2.58579 9 3 9H13.1739C13.5881 9 13.9239 9.33579 13.9239 9.75C13.9239 10.1642 13.5881 10.5 13.1739 10.5H3C2.58579 10.5 2.25 10.1642 2.25 9.75ZM2.25 15C2.25 14.5858 2.58579 14.25 3 14.25H9.26087C9.67508 14.25 10.0109 14.5858 10.0109 15C10.0109 15.4142 9.67508 15.75 9.26087 15.75H3C2.58579 15.75 2.25 15.4142 2.25 15Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "SortNumber",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/SortWord.vue

@@ -0,0 +1,18 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M6.91305 3.75C7.32727 3.75 7.66305 4.08579 7.66305 4.5V17.4945L10.2601 14.5079C10.5319 14.1953 11.0057 14.1622 11.3182 14.434C11.6308 14.7058 11.6639 15.1796 11.3921 15.4921L7.47901 19.9921C7.33657 20.1559 7.13013 20.25 6.91305 20.25C6.69597 20.25 6.48954 20.1559 6.3471 19.9921L2.43406 15.4921C2.16226 15.1796 2.19531 14.7058 2.50788 14.434C2.82045 14.1622 3.29417 14.1953 3.56597 14.5079L6.16305 17.4945V4.5C6.16305 4.08579 6.49884 3.75 6.91305 3.75Z")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M17.6748 3.38123C17.9541 3.38123 18.2103 3.53641 18.3396 3.78396L21.6267 10.0764C21.8185 10.4435 21.6763 10.8966 21.3092 11.0884C20.9421 11.2802 20.489 11.138 20.2972 10.7709L19.2699 8.80448H16.0797L15.0525 10.7709C14.8607 11.138 14.4076 11.2802 14.0404 11.0884C13.6733 10.8966 13.5312 10.4435 13.7229 10.0764L17.0101 3.78396C17.1394 3.53641 17.3955 3.38123 17.6748 3.38123ZM16.8633 7.30448H18.4863L17.6748 5.75102L16.8633 7.30448Z")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M16.8616 12.2831C17.7739 12.0852 18.8349 12.1555 19.5647 12.261C19.9337 12.3143 20.2074 12.6305 20.2074 13.0033V19.5C20.2074 19.9142 19.8716 20.25 19.4574 20.25C19.0432 20.25 18.7074 19.9142 18.7074 19.5V17.592L15.515 20.0906C15.1888 20.3459 14.7174 20.2885 14.4621 19.9623C14.2068 19.6361 14.2643 19.1647 14.5905 18.9094L17.2294 16.844C17.0463 16.8049 16.8648 16.7568 16.6894 16.6977C16.2534 16.5505 15.7989 16.3173 15.4492 15.932C15.0843 15.5299 14.8773 15.0098 14.8773 14.3878C14.8773 13.768 15.1236 13.2634 15.5337 12.9014C15.9174 12.5625 16.4045 12.3822 16.8616 12.2831ZM18.7074 15.508C18.1839 15.4857 17.6273 15.431 17.169 15.2764C16.8751 15.1772 16.6787 15.0547 16.5599 14.9238C16.4563 14.8097 16.3773 14.6534 16.3773 14.3878C16.3773 14.2022 16.4358 14.1058 16.5264 14.0258C16.6434 13.9226 16.8529 13.8198 17.1794 13.749C17.6361 13.65 18.1897 13.6409 18.7074 13.6769V15.508Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconTable",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/ThreeBlock.vue

@@ -0,0 +1,18 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M2.25 4C2.25 3.0335 3.0335 2.25 4 2.25H6C6.9665 2.25 7.75 3.0335 7.75 4V20C7.75 20.9665 6.9665 21.75 6 21.75H4C3.0335 21.75 2.25 20.9665 2.25 20V4ZM4 3.75C3.86193 3.75 3.75 3.86193 3.75 4V20C3.75 20.1381 3.86193 20.25 4 20.25H6C6.13807 20.25 6.25 20.1381 6.25 20V4C6.25 3.86193 6.13807 3.75 6 3.75H4Z")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M9.25 4C9.25 3.0335 10.0335 2.25 11 2.25H13C13.9665 2.25 14.75 3.0335 14.75 4V20C14.75 20.9665 13.9665 21.75 13 21.75H11C10.0335 21.75 9.25 20.9665 9.25 20V4ZM11 3.75C10.8619 3.75 10.75 3.86193 10.75 4V20C10.75 20.1381 10.8619 20.25 11 20.25H13C13.1381 20.25 13.25 20.1381 13.25 20V4C13.25 3.86193 13.1381 3.75 13 3.75H11Z")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M16.25 4C16.25 3.0335 17.0335 2.25 18 2.25H20C20.9665 2.25 21.75 3.0335 21.75 4V20C21.75 20.9665 20.9665 21.75 20 21.75H18C17.0335 21.75 16.25 20.9665 16.25 20V4ZM18 3.75C17.8619 3.75 17.75 3.86193 17.75 4V20C17.75 20.1381 17.8619 20.25 18 20.25H20C20.1381 20.25 20.25 20.1381 20.25 20V4C20.25 3.86193 20.1381 3.75 20 3.75H18Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "ThreeBlock",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/TwoBlock.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M2.25 4C2.25 3.0335 3.0335 2.25 4 2.25H9C9.9665 2.25 10.75 3.0335 10.75 4V20C10.75 20.9665 9.9665 21.75 9 21.75H4C3.0335 21.75 2.25 20.9665 2.25 20V4ZM4 3.75C3.86193 3.75 3.75 3.86193 3.75 4V20C3.75 20.1381 3.86193 20.25 4 20.25H9C9.13807 20.25 9.25 20.1381 9.25 20V4C9.25 3.86193 9.13807 3.75 9 3.75H4Z")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M13.25 4C13.25 3.0335 14.0335 2.25 15 2.25H20C20.9665 2.25 21.75 3.0335 21.75 4V20C21.75 20.9665 20.9665 21.75 20 21.75H15C14.0335 21.75 13.25 20.9665 13.25 20V4ZM15 3.75C14.8619 3.75 14.75 3.86193 14.75 4V20C14.75 20.1381 14.8619 20.25 15 20.25H20C20.1381 20.25 20.25 20.1381 20.25 20V4C20.25 3.86193 20.1381 3.75 20 3.75H15Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "TwoBlock",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>