From dbfbf40e5f0648e60c88ff7e2722aede851d3ad4 Mon Sep 17 00:00:00 2001
From: Pablo Sirera <psirera4@gmail.com>
Date: Wed, 16 Dec 2020 21:48:23 +0100
Subject: [PATCH] feat: change color icons

---
 assets/icons/dark.svg             |   1 -
 assets/icons/light.svg            |   1 -
 components/icons/IconMoon.vue     | 114 ++++++++++++++++++++++++++++++
 components/icons/IconSun.vue      |  32 +++++++++
 components/ui/ColorModePicker.vue |  29 ++++----
 components/ui/IconBase.vue        |  43 +++++++++++
 components/ui/TheHeader.vue       |   2 +-
 mixins/IconMixin.vue              |  22 ++++++
 8 files changed, 227 insertions(+), 17 deletions(-)
 delete mode 100644 assets/icons/dark.svg
 delete mode 100644 assets/icons/light.svg
 create mode 100644 components/icons/IconMoon.vue
 create mode 100644 components/icons/IconSun.vue
 create mode 100644 components/ui/IconBase.vue
 create mode 100644 mixins/IconMixin.vue

diff --git a/assets/icons/dark.svg b/assets/icons/dark.svg
deleted file mode 100644
index dbf7c6c..0000000
--- a/assets/icons/dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/light.svg b/assets/icons/light.svg
deleted file mode 100644
index 7f51b94..0000000
--- a/assets/icons/light.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
\ No newline at end of file
diff --git a/components/icons/IconMoon.vue b/components/icons/IconMoon.vue
new file mode 100644
index 0000000..031018d
--- /dev/null
+++ b/components/icons/IconMoon.vue
@@ -0,0 +1,114 @@
+<template>
+  <IconBase view-box="0 0 512 512" icon-name="moon" v-bind="$props">
+    <g>
+      <g>
+        <path
+          d="m469.5 256c0 48.07-15.886 92.43-42.696 128.115-38.952 51.848-95.996 76.502-165.838 76.502-117.913 0-208.534-86.704-208.534-204.617 0-68.407 22.24-129.3 72.28-168.374 36.212-28.277 81.782-45.126 131.288-45.126 117.913 0 213.5 95.587 213.5 213.5z"
+          fill="#e3e0e4"
+        />
+        <path
+          d="m433.97 373.97c-38.24 57.58-103.67 95.53-177.97 95.53-117.91 0-213.5-95.59-213.5-213.5 0-74.3 37.95-139.73 95.53-177.97-22.45 33.79-35.53 74.35-35.53 117.97 0 117.91 95.59 213.5 213.5 213.5 43.62 0 84.18-13.08 117.97-35.53z"
+          fill="#d4cfd5"
+        />
+        <path
+          d="m430.674 11.078 7.746 15.493c.194.387.507.701.894.894l15.493 7.746c1.474.737 1.474 2.841 0 3.578l-15.493 7.746c-.387.194-.701.507-.894.894l-7.746 15.493c-.737 1.474-2.841 1.474-3.578 0l-7.746-15.492c-.194-.387-.507-.701-.894-.894l-15.493-7.746c-1.474-.737-1.474-2.841 0-3.578l15.493-7.746c.387-.194.701-.507.894-.894l7.746-15.493c.737-1.475 2.841-1.475 3.578-.001z"
+          fill="#5d91b9"
+        />
+        <path
+          d="m68.211 500.922-7.746-15.493c-.194-.387-.507-.701-.894-.894l-15.493-7.746c-1.474-.737-1.474-2.841 0-3.578l15.493-7.746c.387-.194.701-.507.894-.894l7.746-15.493c.737-1.474 2.841-1.474 3.578 0l7.746 15.493c.194.387.507.701.894.894l15.493 7.746c1.474.737 1.474 2.841 0 3.578l-15.493 7.746c-.387.194-.701.507-.894.894l-7.746 15.493c-.737 1.474-2.841 1.474-3.578 0z"
+          fill="#5d91b9"
+        />
+        <path
+          d="m194 224c0 5.247-1.063 10.245-2.986 14.791-5.769 13.639-19.104 17.709-34.844 17.709-20.987 0-30.745-10.013-30.745-31 0-15.68 2.071-30.641 15.626-36.447 4.589-1.965 9.642-3.053 14.949-3.053 20.987 0 38 17.013 38 38z"
+          fill="#d4cfd5"
+        />
+        <path
+          d="m288.5 383.5c0 8.686-2.914 16.691-7.818 23.091-6.945 9.064-17.881 8.238-30.182 8.238-20.987 0-38-10.343-38-31.33s17.013-38 38-38 38 17.014 38 38.001z"
+          fill="#d4cfd5"
+        />
+        <path
+          d="m280.68 406.59c-6.94 9.07-17.88 14.91-30.18 14.91-20.99 0-38-17.01-38-38 0-.24 0-.48.01-.72 20.83 11.57 43.8 19.76 68.17 23.81z"
+          fill="#c5bec6"
+        />
+        <path
+          d="m378.5 172.5c0 4.425-1.25 8.558-3.415 12.066-4.051 6.562-10.658 9.328-18.936 9.328-12.703 0-21.362-8.481-21.362-21.184 0-9.192 3.105-17.335 10.899-21.017 2.977-1.406 6.303-2.193 9.814-2.193 12.703 0 23 10.297 23 23z"
+          fill="#d4cfd5"
+        />
+        <path
+          d="m395.5 348.5c0 3.035-.588 5.933-1.656 8.586-3.402 8.45-11.677 10.085-21.344 10.085-12.703 0-16.351-5.758-16.351-18.46 0-11.115 1.235-20.598 11.716-22.743 1.497-.306 3.047-.467 4.635-.467 12.703-.001 23 10.296 23 22.999z"
+          fill="#d4cfd5"
+        /><path
+          d="m190.95 238.95c-5.8 13.55-19.27 23.05-34.95 23.05-20.99 0-38-17.01-38-38 0-15.68 9.5-29.15 23.05-34.95-1.96 4.59-3.05 9.64-3.05 14.95 0 20.99 17.01 38 38 38 5.31 0 10.36-1.09 14.95-3.05z"
+          fill="#c5bec6"
+        />
+        <path
+          d="m376.83 181.08c-3.39 8.45-11.66 14.42-21.33 14.42-12.7 0-23-10.3-23-23 0-11.22 8.04-20.57 18.67-22.58-1.08 2.65-1.67 5.55-1.67 8.58 0 12.7 10.3 23 23 23 1.48 0 2.93-.14 4.33-.42z"
+          fill="#c5bec6"
+        />
+        <path
+          d="m393.83 357.08c-3.39 8.45-11.66 14.42-21.33 14.42-12.7 0-23-10.3-23-23 0-11.22 8.04-20.57 18.67-22.58-1.08 2.65-1.67 5.55-1.67 8.58 0 12.7 10.3 23 23 23 1.48 0 2.93-.14 4.33-.42z"
+          fill="#c5bec6"
+        />
+        <circle cx="264.5" cy="110" fill="#d4cfd5" r="15.5" />
+        <circle cx="254" cy="243" fill="#d4cfd5" r="17.5" />
+        <circle cx="94" cy="298" fill="#c5bec6" r="14.5" />
+        <circle cx="400" cy="271" fill="#d4cfd5" r="14.5" />
+        <circle cx="163.5" cy="149.5" fill="#d4cfd5" r="7.33" />
+        <circle cx="152.5" cy="351.5" fill="#c5bec6" r="7.33" />
+        <g fill="#d4cfd5"
+          ><circle cx="345.5" cy="399.5" r="7.33" />
+          <circle cx="429.5" cy="218.5" r="7.33" />
+          <circle cx="325.5" cy="107.5" r="7.33" />
+        </g>
+      </g>
+      <g>
+        <path
+          d="m441.706 136.144c-22.484-34.769-54.117-62.469-91.477-80.104-3.745-1.768-8.216-.166-9.983 3.581-1.769 3.746-.165 8.216 3.581 9.984 71.787 33.887 118.173 107.051 118.173 186.395 0 19.146-2.624 38.103-7.798 56.344-1.131 3.985 1.184 8.132 5.168 9.262.685.194 1.373.287 2.051.287 3.27 0 6.275-2.154 7.211-5.455 5.553-19.573 8.368-39.907 8.368-60.438 0-42.707-12.204-84.152-35.294-119.856z"
+        /><path
+          d="m452.248 340.549c-3.738-1.773-8.215-.178-9.989 3.565-33.94 71.613-107.051 117.886-186.259 117.886-113.589 0-206-92.411-206-206s92.411-206 206-206c18.854 0 37.529 2.544 55.509 7.563 3.994 1.116 8.127-1.218 9.24-5.207 1.114-3.99-1.218-8.127-5.207-9.24-19.293-5.386-39.326-8.116-59.542-8.116-59.031 0-114.529 22.988-156.271 64.729s-64.729 97.24-64.729 156.271 22.988 114.529 64.729 156.271 97.24 64.729 156.271 64.729c42.646 0 84.043-12.172 119.714-35.202 34.734-22.425 62.433-53.982 80.1-91.26 1.774-3.743.177-8.215-3.566-9.989z"
+        /><path
+          d="m396.03 43.708 17.432 8.716 8.715 17.43c1.271 2.541 3.867 4.146 6.708 4.146s5.438-1.605 6.708-4.146l8.715-17.43 17.432-8.716c2.54-1.27 4.146-3.867 4.146-6.708s-1.605-5.438-4.146-6.708l-17.432-8.716-8.715-17.43c-1.271-2.541-3.867-4.146-6.708-4.146s-5.438 1.605-6.708 4.146l-8.715 17.43-17.432 8.716c-2.54 1.27-4.146 3.867-4.146 6.708s1.606 5.438 4.146 6.708zm26.376-9.833c1.451-.726 2.628-1.902 3.354-3.354l3.125-6.25 3.125 6.25c.726 1.452 1.902 2.628 3.354 3.354l6.25 3.125-6.251 3.125c-1.451.726-2.628 1.902-3.354 3.354l-3.125 6.25-3.125-6.25c-.726-1.452-1.902-2.628-3.354-3.354l-6.25-3.125z"
+        /><path
+          d="m504.5 376.5h-5v-5c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v5h-5c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5h5v5c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-5h5c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5z"
+        /><path
+          d="m102.854 468.292-17.432-8.716-8.715-17.43c-1.269-2.541-3.866-4.146-6.707-4.146s-5.438 1.605-6.708 4.146l-8.715 17.43-17.432 8.716c-2.54 1.27-4.145 3.867-4.145 6.708s1.605 5.438 4.146 6.708l17.432 8.716 8.715 17.43c1.27 2.541 3.866 4.146 6.707 4.146s5.438-1.605 6.708-4.146l8.715-17.43 17.432-8.716c2.54-1.27 4.146-3.867 4.146-6.708s-1.606-5.438-4.147-6.708zm-26.375 9.833c-1.451.726-2.628 1.902-3.354 3.354l-3.125 6.25-3.125-6.25c-.726-1.452-1.902-2.628-3.354-3.354l-6.25-3.125 6.251-3.125c1.451-.726 2.628-1.902 3.354-3.354l3.125-6.25 3.125 6.25c.726 1.452 1.902 2.628 3.354 3.354l6.249 3.125z"
+        /><path
+          d="m40 118c0-4.142-3.357-7.5-7.5-7.5h-5v-5c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v5h-5c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5h5v5c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-5h5c4.143 0 7.5-3.358 7.5-7.5z"
+        /><path
+          d="m201.5 224c0-25.089-20.411-45.5-45.5-45.5-10.938 0-21.51 3.938-29.77 11.09-3.132 2.711-3.472 7.448-.761 10.579 2.712 3.133 7.448 3.47 10.579.761 5.534-4.791 12.619-7.43 19.951-7.43 16.817 0 30.5 13.682 30.5 30.5s-13.683 30.5-30.5 30.5c-15.699 0-28.742-11.755-30.339-27.344-.422-4.12-4.092-7.127-8.226-6.697-4.12.422-7.118 4.104-6.696 8.225 2.384 23.269 21.842 40.816 45.262 40.816 25.089 0 45.5-20.411 45.5-45.5z"
+        /><path
+          d="m250.5 414c-1.62 0-3.244-.127-4.828-.379-4.092-.653-7.935 2.141-8.583 6.231-.649 4.091 2.141 7.934 6.231 8.583 2.359.375 4.774.564 7.18.564 25.089 0 45.5-20.411 45.5-45.5s-20.411-45.499-45.5-45.499-45.5 20.411-45.5 45.5c0 7.008 1.553 13.733 4.615 19.988 1.822 3.719 6.313 5.258 10.034 3.438 3.721-1.821 5.26-6.314 3.438-10.034-2.049-4.184-3.088-8.689-3.088-13.392 0-16.818 13.683-30.5 30.5-30.5s30.5 13.682 30.5 30.5-13.682 30.5-30.499 30.5z"
+        /><path
+          d="m355.5 142c-16.817 0-30.5 13.682-30.5 30.5s13.683 30.5 30.5 30.5 30.5-13.682 30.5-30.5-13.683-30.5-30.5-30.5zm0 46c-8.547 0-15.5-6.953-15.5-15.5s6.953-15.5 15.5-15.5 15.5 6.953 15.5 15.5-6.953 15.5-15.5 15.5z"
+        /><path
+          d="m403 348.5c0-16.818-13.683-30.5-30.5-30.5s-30.5 13.682-30.5 30.5 13.683 30.5 30.5 30.5 30.5-13.682 30.5-30.5zm-46 0c0-8.547 6.953-15.5 15.5-15.5s15.5 6.953 15.5 15.5-6.953 15.5-15.5 15.5-15.5-6.953-15.5-15.5z"
+        /><path
+          d="m287.5 110c0-12.682-10.317-23-23-23s-23 10.318-23 23 10.317 23 23 23 23-10.318 23-23zm-31 0c0-4.411 3.589-8 8-8s8 3.589 8 8-3.589 8-8 8-8-3.589-8-8z"
+        /><path
+          d="m229 243c0 13.785 11.215 25 25 25s25-11.215 25-25-11.215-25-25-25-25 11.215-25 25zm25-10c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10z"
+        /><path
+          d="m94 276c-12.131 0-22 9.869-22 22s9.869 22 22 22 22-9.869 22-22-9.869-22-22-22zm0 29c-3.859 0-7-3.14-7-7s3.141-7 7-7 7 3.14 7 7-3.141 7-7 7z"
+        /><path
+          d="m422 271c0-12.131-9.869-22-22-22s-22 9.869-22 22 9.869 22 22 22 22-9.869 22-22zm-22 7c-3.859 0-7-3.14-7-7s3.141-7 7-7 7 3.14 7 7-3.141 7-7 7z"
+        /><circle cx="163.5" cy="149.504" r="7.496" />
+        <circle cx="325.5" cy="107.5" r="7.496" />
+        <circle cx="429.5" cy="218.503" r="7.496" />
+        <circle cx="345.5" cy="399.5" r="7.496" />
+        <circle cx="152.5" cy="351.5" r="7.496" />
+      </g>
+    </g>
+  </IconBase>
+</template>
+
+<script>
+import IconMixin from '@/mixins/IconMixin.vue'
+import IconBase from '@/components/ui/IconBase.vue'
+
+export default {
+  name: 'IconMoon',
+  components: {
+    IconBase,
+  },
+  mixins: [IconMixin],
+}
+</script>
diff --git a/components/icons/IconSun.vue b/components/icons/IconSun.vue
new file mode 100644
index 0000000..75d091a
--- /dev/null
+++ b/components/icons/IconSun.vue
@@ -0,0 +1,32 @@
+<template>
+  <IconBase view-box="0 0 512 512" icon-name="sun" v-bind="$props">
+    <path
+      style="fill: #ffa600;"
+      d="M507.834,301.608l-54.769-48.312l52.832-50.399c1.941-1.852,2.74-4.591,2.099-7.189 c-0.642-2.597-2.629-4.655-5.211-5.401l-70.316-20.292l25.988-68.056c0.955-2.5,0.495-5.316-1.204-7.389 c-1.7-2.072-4.383-3.085-7.038-2.657l-72.274,11.652l-5.878-72.561c-0.216-2.666-1.846-5.015-4.275-6.161 c-2.429-1.146-5.291-0.917-7.504,0.601l-60.266,41.342L263.409,3.742C262.064,1.426,259.579,0,256.889,0 c-2.69,0-5.174,1.426-6.519,3.742L208.347,76.11l-72.69-41.953c-2.327-1.343-5.197-1.349-7.528-0.018 c-2.333,1.331-3.773,3.799-3.78,6.473l-0.176,72.795l-72.965-6.014c-2.675-0.22-5.275,0.997-6.807,3.194 c-1.533,2.197-1.771,5.041-0.622,7.459l31.242,65.835L6.508,209.562c-2.516,0.943-4.335,3.15-4.773,5.789 c-0.438,2.638,0.575,5.308,2.656,7.003l56.619,46.152l-50.813,52.41c-1.866,1.925-2.559,4.694-1.816,7.264 c0.744,2.57,2.81,4.55,5.419,5.194l71.055,17.551L61.56,419.936c-0.856,2.535-0.286,5.331,1.494,7.336 c1.781,2.005,4.502,2.913,7.137,2.382l71.76-14.443l8.721,72.278c0.319,2.655,2.041,4.938,4.513,5.99 c2.474,1.052,5.323,0.712,7.475-0.891l58.596-43.647l39.055,59.566c1.382,2.179,3.789,3.492,6.367,3.492 c0.098,0,0.196-0.002,0.295-0.006c2.687-0.104,5.115-1.626,6.368-3.992l34.107-62.405l61.839,38.974 c2.273,1.432,5.137,1.55,7.522,0.31c2.382-1.24,3.919-3.65,4.03-6.322l3.031-72.734l72.674,8.84c2.664,0.324,5.31-0.791,6.928-2.927 c1.618-2.137,1.966-4.969,0.914-7.43l-28.636-66.997l69.465-23.003c2.552-0.845,4.456-2.979,4.997-5.599 C510.752,306.09,509.845,303.383,507.834,301.608z"
+    />
+    <ellipse
+      style="fill: #ffdb2d;"
+      cx="254.35"
+      cy="254.691"
+      rx="155.069"
+      ry="154.949"
+    />
+    <path
+      style="fill: #ffca00;"
+      d="M254.354,99.743c-3.884,0-7.732,0.147-11.543,0.428c80.25,5.901,143.525,72.825,143.525,154.521 c0,81.695-63.275,148.619-143.525,154.521c3.811,0.28,7.66,0.428,11.543,0.428c85.641,0,155.068-69.373,155.068-154.948 C409.422,169.116,339.995,99.743,254.354,99.743z"
+    />
+  </IconBase>
+</template>
+
+<script>
+import IconMixin from '@/mixins/IconMixin.vue'
+import IconBase from '@/components/ui/IconBase.vue'
+
+export default {
+  name: 'IconSun',
+  components: {
+    IconBase,
+  },
+  mixins: [IconMixin],
+}
+</script>
diff --git a/components/ui/ColorModePicker.vue b/components/ui/ColorModePicker.vue
index 1cef5f2..38510b2 100644
--- a/components/ui/ColorModePicker.vue
+++ b/components/ui/ColorModePicker.vue
@@ -1,30 +1,30 @@
 <template>
   <div>
     <ul class="flex items-center justify-center">
-      <li v-if="$colorMode.preference !== 'light'">
-        <IconLight
-          :class="getClasses('light')"
-          class="cursor-pointer"
-          @click="$colorMode.preference = 'light'"
-        />
+      <li v-if="isLightMode" @click="$colorMode.preference = 'light'">
+        <IconSun :class="getClasses('light')" class="cursor-pointer" />
       </li>
-      <li v-else>
-        <IconDark
-          :class="getClasses('dark')"
-          class="cursor-pointer"
-          @click="$colorMode.preference = 'dark'"
-        />
+      <li v-else @click="$colorMode.preference = 'dark'">
+        <IconMoon :class="getClasses('dark')" class="cursor-pointer" />
       </li>
     </ul>
   </div>
 </template>
 
 <script>
+import IconMoon from '~/components/icons/IconMoon.vue'
+import IconSun from '~/components/icons/IconSun.vue'
+
 export default {
   name: 'ColorModePicker',
   components: {
-    IconLight: () => import('@/assets/icons/light.svg?inline'),
-    IconDark: () => import('@/assets/icons/dark.svg?inline'),
+    IconMoon,
+    IconSun,
+  },
+  computed: {
+    isLightMode() {
+      return this.$colorMode.preference !== 'light'
+    },
   },
   methods: {
     getClasses(color) {
@@ -34,6 +34,7 @@ export default {
       return {
         [this.$colorMode.value]: true,
         selected: color === this.$colorMode.value,
+        'w-6 h-6': true,
       }
     },
     selectColor(color) {
diff --git a/components/ui/IconBase.vue b/components/ui/IconBase.vue
new file mode 100644
index 0000000..06ddf25
--- /dev/null
+++ b/components/ui/IconBase.vue
@@ -0,0 +1,43 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="width"
+    :height="height"
+    :viewBox="viewBox"
+    :aria-labelledby="iconName"
+    role="presentation"
+  >
+    <title :id="iconName" lang="en">{{ iconName }} icon</title>
+    <g :fill="iconColor">
+      <slot />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'IconBase',
+  props: {
+    iconName: {
+      type: String,
+      required: true,
+    },
+    width: {
+      type: [Number, String],
+      default: 18,
+    },
+    height: {
+      type: [Number, String],
+      default: 18,
+    },
+    iconColor: {
+      type: String,
+      default: 'currentColor',
+    },
+    viewBox: {
+      type: String,
+      default: '0 0 18 18',
+    },
+  },
+}
+</script>
diff --git a/components/ui/TheHeader.vue b/components/ui/TheHeader.vue
index 69c26fd..1713b63 100644
--- a/components/ui/TheHeader.vue
+++ b/components/ui/TheHeader.vue
@@ -9,6 +9,7 @@
       </nuxt-link>
       <div class="flex items-center">
         <ul class="text-center hidden sm:flex">
+          <ColorModePicker class="hidden sm:block" />
           <li
             v-for="(link, index) in links"
             :key="index"
@@ -19,7 +20,6 @@
             </nuxt-link>
           </li>
         </ul>
-        <ColorModePicker class="hidden sm:block" />
         <Menu class="block sm:hidden" />
       </div>
     </div>
diff --git a/mixins/IconMixin.vue b/mixins/IconMixin.vue
new file mode 100644
index 0000000..3da04a2
--- /dev/null
+++ b/mixins/IconMixin.vue
@@ -0,0 +1,22 @@
+<script>
+import IconBase from '@/components/ui/IconBase.vue'
+
+export default {
+  name: 'IconMixin',
+  components: { IconBase },
+  props: {
+    width: {
+      type: [Number, String],
+      default: 18,
+    },
+    height: {
+      type: [Number, String],
+      default: 18,
+    },
+    iconColor: {
+      type: String,
+      default: 'currentColor',
+    },
+  },
+}
+</script>