Skip to content

Commit

Permalink
feat: change color icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@pablosirera
pablosirera committed Dec 16, 2020
1 parent f9e6005 commit dbfbf40
Show file tree
Hide file tree
Showing 8 changed files with 227 additions and 17 deletions.
1 change: 0 additions & 1 deletion assets/icons/dark.svg
View file

This file was deleted.

1 change: 0 additions & 1 deletion assets/icons/light.svg
View file

This file was deleted.

114 changes: 114 additions & 0 deletions components/icons/IconMoon.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
32 changes: 32 additions & 0 deletions components/icons/IconSun.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
29 changes: 15 additions & 14 deletions components/ui/ColorModePicker.vue
View file
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -34,6 +34,7 @@ export default {
return {
[this.$colorMode.value]: true,
selected: color === this.$colorMode.value,
'w-6 h-6': true,
}
},
selectColor(color) {
Expand Down
43 changes: 43 additions & 0 deletions components/ui/IconBase.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion components/ui/TheHeader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -19,7 +20,6 @@
</nuxt-link>
</li>
</ul>
<ColorModePicker class="hidden sm:block" />
<Menu class="block sm:hidden" />
</div>
</div>
Expand Down
22 changes: 22 additions & 0 deletions mixins/IconMixin.vue
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit dbfbf40

Please sign in to comment.