@autoafleveren/ui 1.3.2 → 1.4.0

package/src/modules/icons/HeroPersonRoundedIcon.vue

@@ -0,0 +1,412 @@
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { useLayout } from '~/modules/composables';
+
+  const props = defineProps<{
+    primaryColor?: string;
+    secondaryColor?: string;
+  }>();
+
+  const { colors } = useLayout();
+
+  const primaryColorWithFallback = computed(() => props.primaryColor ?? colors.primaryColor.value);
+  const secondaryColorWithFallback = computed(() => props.secondaryColor ?? colors.primaryColorActive.value);
+</script>
+
+<template>
+  <svg
+    width="234"
+    height="234"
+    viewBox="0 0 234 234"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_3922_7911"
+      style="mask-type:alpha"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="234"
+      height="234"
+    >
+      <circle
+        cx="117"
+        cy="117"
+        r="117"
+        fill="#D9D9D9"
+      ></circle>
+    </mask>
+
+    <g mask="url(#mask0_3922_7911)">
+      <circle
+        cx="120"
+        cy="118"
+        r="122"
+        fill="#F4F4F5"
+      ></circle>
+
+      <mask
+        id="mask1_3922_7911"
+        style="mask-type:alpha"
+        maskUnits="userSpaceOnUse"
+        x="-100"
+        y="6"
+        width="393"
+        height="256"
+      >
+        <rect
+          x="-100"
+          y="6"
+          width="392.589"
+          height="255.692"
+          fill="#D9D9D9"
+        ></rect>
+      </mask>
+
+      <g mask="url(#mask1_3922_7911)">
+        <path
+          :fill="primaryColorWithFallback"
+          d="M63.8026 222.813C45.9038 264.498 6.55029 250.221 -22.2123 233.867C-27.7168 230.741 -32.8299 227.535
+          -37.332 224.634C-35.2589 221.704 -31.0949 213.183 -29.8374 207.513C-29.8344 207.507 -29.8344 207.498
+          -29.8344 207.495C-29.3391 205.241 -29.3036 203.441 -30.0421 202.625C-26.664 203.052 -23.363 203.654
+          -20.2192 204.464C8.89922 211.926 56.4117 165.594 82.0809 122.678C91.9185 106.227 90.3022 161.098 63.8026
+          222.816V222.813Z"
+        ></path>
+
+        <path
+          d="M116.718 94.9443C117.474 104.889 110.125 112.994 108.503 114.293C106.88 115.589 115.54 135.155 123.263
+          135.588C130.986 136.021 138.953 123.203 139.237 117.129C139.522 111.055 133.146 107.164 134.012
+          96.5696C134.878 85.9757 116.718 94.9473 116.718 94.9473V94.9443Z"
+          fill="#EAAA79"
+        ></path>
+
+        <path
+          d="M115.356 314.955H132.869L141.865 119.599L116.554 123.238L107.286 116.411L97.0273 314.955H115.356Z"
+          fill="#EBEFF2"
+        ></path>
+
+        <path
+          d="M115.356 314.956C112.809 315.107 109.896 316.623 109.17 314.956C108.443 313.289 112.269 242.314 112.447
+          230.305C112.625 218.294 117.358 231.669 117.358 231.669L115.356 314.956Z"
+          fill="white"
+        ></path>
+
+        <path
+          d="M110.154 232.417C110.697 235.582 113.719 276.344 114.081 277.922C114.446 279.499 127.175 238.491
+          126.573 236.551C125.971 234.609 110.154 232.417 110.154 232.417Z"
+          fill="#71717A"
+        ></path>
+
+        <path
+          d="M108.726 118.058C115.176 123.298 119.171 140.714 119.462 143.235C119.753 145.756 138.36 123.512 138.686
+          122.679C139.013 121.845 138.686 112.114 138.686 112.114C138.686 112.114 128.733 114.202 126.411
+          118.752C124.089 123.301 121.496 122.679 121.496 122.679C121.496 122.679 119.041 116.702 116.674
+          116.75C114.307 116.797 108.723 118.061 108.723 118.061L108.726 118.058Z"
+          fill="#71717A"
+        ></path>
+
+        <path
+          :fill="secondaryColorWithFallback"
+          d="M101.934 320.825C101.074 324.363 98.8914 327.195 95.7654 329.432C77.1519 342.727 25.0424 334.77
+          18.3634 327.774C10.5633 319.603 55.0773 233.182 60.9704 189.967C66.8575 146.746 80.2749 111.53 101.676
+          109.021L108.679 113.552L108.729 118.057C112.638 128.835 107.928 296.223 101.937 320.825H101.934Z"
+        ></path>
+
+        <path
+          :fill="primaryColorWithFallback"
+          d="M101.932 320.825C101.072 324.363 98.8895 327.195 95.7636 329.432C97.5668 309.024 101.921 258.75 102.626
+          240.967C103.525 218.433 96.3953 201.495 90.9382 197.381C85.484 193.271 101.989 183.134 101.28
+          172.418C100.571 161.703 81.32 162.207 85.6116 150.895C89.9061 139.58 105.423 114.166 101.668
+          109.021L106.755 110.088L108.718 118.057C112.627 128.835 107.918 296.223 101.927 320.825H101.932Z"
+        ></path>
+
+        <path
+          :fill="secondaryColorWithFallback"
+          d="M127.476 316.901C128.034 320.499 129.965 323.506 132.892 326C150.307 340.829 202.906 337.333 210.158
+          330.927C218.625 323.447 181.908 219.708 191.55 177.513C201.266 134.989 166.854 110.204 145.743
+          105.883L138.382 109.804L137.949 114.288C133.138 124.695 123.603 291.876 127.479 316.898L127.476 316.901Z"
+        ></path>
+
+        <path
+          :fill="primaryColorWithFallback"
+          d="M127.477 316.901C128.035 320.499 129.966 323.506 132.893 326C132.831 305.512 132.765 255.052 133.575
+          237.272C134.595 214.74 143.14 198.47 148.926 194.837C154.71 191.204 139.127 179.699 140.743 169.085C142.36
+          158.47 161.501 160.608 158.183 148.97C154.867 137.332 141.565 110.69 145.741 105.883L140.58 106.515L137.947
+          114.288C133.136 124.695 123.601 291.876 127.477 316.898V316.901Z"
+        ></path>
+
+        <path
+          d="M121.719 122.45C121.9 118.052 139.33 103.638 143.692 104.857C148.055 106.076 143.612 107.541 143.399
+          111.578C143.185 115.614 144.416 117.216 142.414 118.052C140.415 118.888 138.713 113.064 133.09
+          115.724C127.466 118.381 121.986 125.656 121.986 125.656L121.719 122.453V122.45Z"
+          fill="white"
+        ></path>
+
+        <path
+          :fill="primaryColorWithFallback"
+          d="M245.982 212.412L185.239 183.522C190.64 174.764 165.294 152.449 155.824 138.474C143.724 120.62
+          148.742 111.23 175.339 120.599C214.224 134.298 258.587 172.949 245.982 212.412Z"
+        ></path>
+
+        <path
+          :fill="primaryColorWithFallback"
+          d="M185.242 183.525C194.76 178.563 198.073 164.36 194.075 153.342C190.077 142.324 154.17 127.364 149.593
+          131.247C145.017 135.129 185.242 183.525 185.242 183.525Z"
+        ></path>
+
+        <path
+          d="M142.897 62.9228C142.882 66.9267 142.796 69.94 142.828 70.3137C142.917 71.3843 143.377 100.322 130.844
+          103.311C118.31 106.301 110.522 97.5755 105.943 79.0865L104.593 71.6483C104.593 71.6483 104.288 69.7205
+          103.866 66.8585C103.095 61.6208 101.945 53.2453 101.607 47.8831C101.476 45.8456 101.464 44.2381 101.636
+          43.4077C102.505 39.1962 138.11 35.5067 140.868 40.8779C140.933 41.0024 140.996 41.1388 141.055
+          41.2812C142.689 45.1635 142.914 55.6654 142.897 62.9228Z"
+          fill="#F6CBA5"
+        ></path>
+
+        <path
+          d="M105.272 57.1574C112.324 59.9868 127.364 47.8803 137.208 53.0378C147.051 58.1954 140.188 44.3391
+          121.948 47.5599C103.706 50.7808 104.521 52.5396 104.245 54.328C103.97 56.1164 105.272 57.1574
+          105.272 57.1574Z"
+          fill="#EAAA79"
+        ></path>
+
+        <path
+          d="M138.424 71.5113C138.747 65.1526 145.853 58.3549 149.145 62.8274C152.44 67.3028 140.669 79.4804 140.034
+          79.1661C139.4 78.8547 138.424 71.5083 138.424 71.5083V71.5113Z"
+          fill="#F5CAA4"
+        ></path>
+
+        <path
+          d="M108.748 73.9792C107.378 67.7628 99.2489 62.2286 96.7398 67.1874C94.2307 72.1463 107.85 82.2123 108.425
+           81.8C109.001 81.3878 108.748 73.9821 108.748 73.9821V73.9792Z"
+          fill="#F5CAA4"
+        ></path>
+
+        <path
+          d="M109.519 51.8511C104.371 59.1263 103.863 66.8581 103.863 66.8581C103.092 61.6205 101.942 53.245 101.604
+          47.8828C104.896 48.4997 109.519 51.8511 109.519 51.8511Z"
+          fill="black"
+        ></path>
+
+        <path
+          d="M142.897 62.9229C142.817 62.6203 138.95 48.2272 127.33 49.7338C118.474 50.8816 132.564 43.7874 141.053
+          41.2812C142.687 45.1635 142.912 55.6655 142.894 62.9229H142.897Z"
+          fill="black"
+        ></path>
+
+        <path
+          d="M142.829 56.3032C142.496 49.4759 151.085 27.941 122.869 25.7226C94.6547 23.5041 83.96 28.8664 85.1582
+          41.0915C86.3564 53.3166 109.653 55.6715 121.813 51.4659C133.973 47.2604 142.829 56.3032 142.829 56.3032Z"
+          fill="#1F1F1F"
+        ></path>
+
+        <path
+          d="M142.43 70.3519C142.789 67.9258 146.843 64.8325 146.808 66.7929C146.772 68.7533 143.148 71.7695 142.745
+          72.68C142.341 73.5935 142.43 70.3489 142.43 70.3489V70.3519Z"
+          fill="#EAAA79"
+        ></path>
+
+        <path
+          d="M105.506 74.08C104.768 71.7904 100.343 69.4563 100.696 71.3455C101.049 73.2347 105.044 75.5688 105.58
+          76.3844C106.117 77.203 105.506 74.08 105.506 74.08Z"
+          fill="#EAAA79"
+        ></path>
+
+        <path
+          d="M125.912 72.0645C125.686 73.351 124.827 76.4646 123.2 78.626C121.167 81.3278 124.556 80.5559 125.912
+          82.0998"
+          stroke="#EAAA79"
+        ></path>
+
+        <path
+          d="M101.672 109.021C105.616 109.605 107.286 120.911 105.952 123.882C104.617 126.854 110.047 117.515 115.404
+          118.226C120.76 118.938 120.122 127.391 121.472 126.792C122.821 126.193 123.459 119.932 117.42
+          113.191C111.382 106.449 101.675 109.021 101.675 109.021H101.672Z"
+          fill="white"
+        ></path>
+
+        <path
+          d="M157.248 191.942C157.248 192.182 157.245 192.452 157.236 192.74C157.239 192.452 157.242 192.185 157.248
+           191.942Z"
+          fill="#0E53E4"
+        ></path>
+
+        <path
+          d="M107.239 145.412C107.185 145.418 107.129 145.412 107.073 145.397C106.83 145.332 106.687 145.083
+          106.755 144.839C106.809 144.644 109.772 117.091 113.34 106.198C113.417 105.96 113.675 105.83 113.912
+          105.907C114.149 105.984 114.28 106.242 114.203 106.479C110.641 117.352 107.687 144.884 107.633
+          145.08C107.583 145.266 107.423 145.394 107.242 145.412H107.239Z"
+          fill="#18181B"
+        ></path>
+
+        <path
+          d="M107.029 144.883C107.183 145.082 107.468 145.115 107.666 144.961C128.765 128.491 138.537 107.737
+          135.388 103.353C135.242 103.148 134.958 103.104 134.753 103.249C134.548 103.395 134.504 103.679 134.649
+          103.884C137.158 107.378 128.655 127.424 107.106 144.246C106.907 144.4 106.874 144.685 107.029 144.883Z"
+          fill="#18181B"
+        ></path>
+
+        <path
+          d="M102.721 174.426L90.7631 169.847C90.3983 169.707 90.1166 169.443 89.9475 169.12C89.7488 168.743 89.7102
+          168.284 89.8734 167.854L99.4292 142.893C99.5746 142.514 99.8563 142.223 100.194 142.057C100.565 141.876
+          101.004 141.843 101.419 142.004L113.378 146.583C113.716 146.713 113.983 146.948 114.155 147.238C114.386
+          147.63 114.442 148.116 114.267 148.573L104.711 173.533C104.56 173.931 104.261 174.23 103.899 174.39C103.54
+          174.551 103.116 174.574 102.718 174.423L102.721 174.426Z"
+          fill="#575757"
+        ></path>
+
+        <path
+          d="M105.806 157.041L100.082 154.849C99.7976 154.739 99.5722 154.544 99.4269 154.3C99.2282 153.968 99.1808
+          153.553 99.329 153.165L101.521 147.44C101.648 147.105 101.903 146.85 102.209 146.714C102.514 146.577 102.87
+          146.557 103.208 146.687L108.932 148.879C109.267 149.006 109.523 149.261 109.659 149.567C109.795 149.872
+          109.816 150.228 109.686 150.566L107.494 156.29C107.366 156.626 107.111 156.881 106.806 157.017C106.5 157.154
+           106.144 157.174 105.806 157.044V157.041Z"
+          fill="#1E1E1E"
+        ></path>
+
+        <path
+          d="M96.0977 157.895C97.0645 158.164 98.0136 158.482 98.9627 158.805C99.9118 159.125 100.849 159.475
+          101.783 159.828C102.714 160.19 103.649 160.555 104.565 160.949L105.944 161.545C106.398 161.759 106.858
+          161.958 107.306 162.186C106.819 162.056 106.345 161.898 105.864 161.753L104.441 161.276C103.491 160.955
+          102.554 160.605 101.62 160.252C100.689 159.891 99.7575 159.526 98.8381 159.131C97.9157 158.74 96.9993
+          158.342 96.0977 157.897V157.895Z"
+          fill="#1E1E1E"
+        ></path>
+
+        <path
+          d="M95.0508 160.638C96.0176 160.908 96.9667 161.225 97.9158 161.548C98.8649 161.869 99.8021 162.218
+          100.736 162.571C101.668 162.933 102.602 163.298 103.518 163.693L104.897 164.289C105.351 164.502 105.811
+          164.701 106.259 164.929C105.772 164.799 105.298 164.642 104.817 164.496L103.394 164.019C102.445 163.698
+           101.507 163.348 100.573 162.996C99.6419 162.634 98.7106 162.269 97.7912 161.874C96.8688 161.483 95.9524
+           161.086 95.0508 160.641V160.638Z"
+          fill="#1E1E1E"
+        ></path>
+
+        <path
+          d="M94 163.381C94.9669 163.651 95.9159 163.968 96.865 164.291C97.814 164.612 98.7512 164.962 99.6855
+           165.315C100.617 165.676 101.551 166.041 102.467 166.436L103.847 167.032C104.3 167.245 104.76 167.444
+            105.208 167.672C104.721 167.542 104.247 167.385 103.766 167.239L102.343 166.762C101.394 166.442 100.457
+            166.092 99.5223 165.739C98.5911 165.377 97.6598 165.012 96.7404 164.618C95.818 164.226 94.9016 163.829 94
+             163.384V163.381Z"
+          fill="#1E1E1E"
+        ></path>
+
+        <path
+          d="M127.778 116.652C127.523 117.369 104.781 190.272 104.781 190.272C104.781 190.272 194.497 146.995
+          194.076 145.773C193.655 144.554 193.794 137.575 188.999 133.136C184.203 128.696 128.582 114.395 127.778
+          116.652Z"
+          fill="#D3DCE2"
+        ></path>
+
+        <path
+          d="M130.793 122.856C133.296 120.825 191.231 136.65 193.725 138.545C196.219 140.438 194.075 145.773 194.075
+          145.773L119.461 145.993C119.461 145.993 125.915 126.003 127.397 124.063C128.883 122.124 130.793 122.856
+          130.793 122.856Z"
+          fill="#EBEFF2"
+        ></path>
+
+        <path
+          d="M168.173 245.362C167.313 245.834 161.852 245.434 154.204 244.553V244.559C131.901 241.996 90.9455
+          235.385 90.7498 234.593C90.6519 234.172 94.7566 221.188 99.9943 204.994C100.694 202.841 101.412 200.626
+          102.145 198.378C109.796 174.841 118.839 147.511 120.933 141.793C124.726 131.43 126.817 127.738 129.231
+          128.352C135.098 129.846 195.461 139.358 194.079 145.776C193.112 150.257 182.515 196.082 175.065
+          223.994C171.832 236.079 169.19 244.805 168.173 245.365V245.362Z"
+          fill="white"
+        ></path>
+
+        <path
+          d="M139.21 216.36C136.876 215.443 134.646 214.527 132.54 213.622C119.333 207.957 111.005 202.83 112.657
+          201.258C115.288 198.74 127.039 196.646 140.379 194.516C139.646 198.669 137.784 210.594 139.21
+          216.357V216.36Z"
+          fill="#F6CBA5"
+        ></path>
+
+        <path
+          :fill="primaryColorWithFallback"
+          d="M245.988 212.412C245.543 213.808 245.027 215.202 244.434 216.599C235.788 237.043 201.373 234.605
+          169.855 226.357C165.003 225.088 160.222 223.679 155.613 222.196C156.076 217.824 156.699 207.103
+          157.025 199.223C157.028 199.187 157.028 199.148 157.028 199.116C157.126 196.758 157.2 194.661 157.233
+          193.071C157.236 192.959 157.239 192.846 157.239 192.736C157.242 192.449 157.244 192.182 157.25
+          191.938V191.823C168.096 190.008 177.922 188.047 182.703 185.698C183.878 185.117 184.711 184.388 185.248
+          183.521L245.991 212.409L245.988 212.412Z"
+        ></path>
+
+        <path
+          :fill="primaryColorWithFallback"
+          d="M157.249 191.824C157.207 197.744 156.255 216.117 155.612 222.197C155.487 223.342 155.374 224.054 155.282
+          224.163C154.618 224.949 143.888 223.285 140.216 218.659C139.774 218.104 139.448 217.315 139.21
+          216.357C137.784 210.592 139.649 198.669 140.379 194.52C140.539 193.597 140.646 193.058 140.646
+          193.058C142.897 191.593 156.813 188.309 157.195 190.038C157.243 190.243 157.257 190.872 157.252
+          191.824H157.249Z"
+        ></path>
+
+        <path
+          :fill="secondaryColorWithFallback"
+          d="M169.851 226.358C164.999 225.089 160.218 223.68 155.609 222.197C156.072 217.825 156.695 207.104
+          157.021 199.224C156.849 206.383 157.072 215.823 160.485 219.222C163.407 222.132 167.232 224.73 169.851
+          226.355V226.358Z"
+        ></path>
+
+        <path
+          :fill="secondaryColorWithFallback"
+          d="M147.507 217.748C149.182 217.748 150.541 216.389 150.541 214.714C150.541 213.038 149.182 211.68
+          147.507 211.68C145.831 211.68 144.473 213.038 144.473 214.714C144.473 216.389 145.831 217.748 147.507
+          217.748Z"
+        ></path>
+
+        <path
+          d="M139.211 216.36C136.877 215.443 134.647 214.527 132.541 213.622C133.917 213.48 135.187 213.228
+          135.922 212.789C138.143 211.463 136.405 200.76 140.38 194.517C139.647 198.669 137.785 210.594 139.211
+          216.357V216.36Z"
+          fill="#EAAA79"
+        ></path>
+
+        <circle
+          cx="135.949"
+          cy="79.4244"
+          r="4.68316"
+          fill="#FCA573"
+        ></circle>
+
+        <circle
+          cx="115.209"
+          cy="82.1002"
+          r="4.68316"
+          fill="#FCA573"
+        ></circle>
+
+        <path
+          d="M119.156 88.001C122.341 93.6682 129.862 101.343 134.47 86.707C130.916 90.285 123.26 90.932
+           119.156 88.001Z"
+          fill="white"
+        ></path>
+
+        <path
+          d="M119.156 88.001C122.341 93.6682 129.862 101.343 134.47 86.707C130.971 90.9359 122.807 92.7807
+          119.156 88.001Z"
+          fill="#FE9661"
+        ></path>
+
+        <ellipse
+          cx="130.291"
+          cy="67.3939"
+          rx="1.67256"
+          ry="4.01413"
+          transform="rotate(0.433469 130.291 67.3939)"
+          fill="#232426"
+        ></ellipse>
+
+        <ellipse
+          cx="118.007"
+          cy="68.6687"
+          rx="1.56967"
+          ry="3.76722"
+          transform="rotate(-8.84128 118.007 68.6687)"
+          fill="#232426"
+        ></ellipse>
+      </g>
+    </g>
+  </svg>
+</template>
+