arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-26 01:40:32 +01:00
Code Issues 31 Packages Projects Releases Wiki Activity

Change all SVG in code into Vue Components

Browse Source
This commit is contained in:
Arthur Danjou
2021-07-02 23:46:05 +02:00
parent eb93bac593
commit 0cae02babf
28 changed files with 444 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/icons/BookIcon.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
<path
d="M21 4H7a2 2 0 1 0 0 4h14v13a1 1 0 0 1-1 1H7a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h13a1 1 0 0 1 1 1v1zM5 18a2 2 0 0 0 2 2h12V10H7a3.982 3.982 0 0 1-2-.535V18zM20 7H7a1 1 0 1 1 0-2h13v2z"
fill="currentColor"
/>
</svg>
</template>
<script lang="ts">
export default {
name: "BookIcon",
props: {
active: {
type: Boolean,
default: false
}
}
}
</script>

20
src/components/icons/ComputerIcon.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
<path
d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"
fill="currentColor"
/>
</svg>
</template>
<script lang="ts">
export default {
name: "ComputerIcon",
props: {
active: {
type: Boolean,
default: false
}
}
}
</script>

20
src/components/icons/ContactIcon.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
<path
d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-1 14H5c-.55 0-1-.45-1-1V8l6.94 4.34c.65.41 1.47.41 2.12 0L20 8v9c0 .55-.45 1-1 1zm-7-7L4 6h16l-8 5z"
fill="currentColor"
/>
</svg>
</template>
<script lang="ts">
export default {
name: "ContactIcon",
props: {
active: {
type: Boolean,
default: false
}
}
}
</script>

15
src/components/icons/CpuIcon.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" focusable="false">
<g fill="currentColor">
<path
d="M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 14 4.5h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14a2.5 2.5 0 0 1-2.5 2.5v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 2 11.5H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2A2.5 2.5 0 0 1 4.5 2V.5A.5.5 0 0 1 5 0zm-.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3h-7zM5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3zM6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"
/>
</g>
</svg>
</template>
<script>
export default {
name: "CpuIcon"
}
</script>

29
src/components/icons/CubeIcon.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<svg class="inline" width="1em" height="1em" viewBox="0 0 24 24" focusable="false">
<g
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<path d="M6 17.6l-2-1.1V14"/>
<path d="M4 10V7.5l2-1.1"/>
<path d="M10 4.1L12 3l2 1.1"/>
<path d="M18 6.4l2 1.1V10"/>
<path d="M20 14v2.5l-2 1.12"/>
<path d="M14 19.9L12 21l-2-1.1"/>
<path d="M12 12l2-1.1"/>
<path d="M18 8.6l2-1.1"/>
<path d="M12 12v2.5"/>
<path d="M12 18.5V21"/>
<path d="M12 12l-2-1.12"/>
<path d="M6 8.6L4 7.5"/>
</g>
</svg>
</template>
<script>
export default {
name: "CubeIcon"
}
</script>

15
src/components/icons/DegreeHatIcon.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<svg class="inline" width="1em" height="1em" viewBox="0 0 48 48" focusable="false">
<g fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round">
<path d="M2 17.4L23.022 9l21.022 8.4l-21.022 8.4L2 17.4z"/>
<path d="M44.044 17.51v9.223" stroke-linecap="round"/>
<path d="M11.556 21.825v12.442S16.366 39 23.021 39c6.657 0 11.467-4.733 11.467-4.733V21.825" stroke-linecap="round"/>
</g>
</svg>
</template>
<script>
export default {
name: "DegreeHatIcon"
}
</script>

14
src/components/icons/DevelopmentIcon.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<svg class="inline" width="1.2em" height="1.2em" viewBox="0 0 32 32" focusable="false">
<path
d="M5 6v13.563l-2.281 2.314A2.444 2.444 0 0 0 2 23.594A2.418 2.418 0 0 0 4.406 26h23.188A2.418 2.418 0 0 0 30 23.594a2.45 2.45 0 0 0-.719-1.719L27 19.562V6H5zm2 2h18v11H7V8zm9 1l-1.5 9H16l1.5-9H16zm-3.914 2l-1.719 2.068L10 13.5l.367.432L12.086 16l1.086-.863L11.81 13.5l1.36-1.637L12.087 11zm7.828 0l-1.086.863L20.19 13.5l-1.36 1.637l1.085.863l1.719-2.068L22 13.5l-.367-.432L19.914 11zM6.437 21h19.125l2.313 2.281a.464.464 0 0 1 .125.313a.386.386 0 0 1-.406.406H4.406A.386.386 0 0 1 4 23.594c0-.11.047-.234.125-.313L6.438 21z"
fill="currentColor"
/>
</svg>
</template>
<script>
export default {
name: "DevelopmentIcon"
}
</script>

26
src/components/icons/FireIcon.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<svg class="inline" width="1em" height="1em" viewBox="0 0 24 24" focusable="false">
<g fill="none">
<path
d="M17.657 18.657A8 8 0 0 1 6.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0 1 20 13a7.975 7.975 0 0 1-2.343 5.657z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M9.879 16.121A3 3 0 1 0 12.015 11L11 14H9c0 .768.293 1.536.879 2.121z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</g>
</svg>
</template>
<script>
export default {
name: "FireIcon"
}
</script>

21
src/components/icons/HomeIcon.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
<path
d="M20 20V9.132l-8-4.8l-8 4.8V20h4v-2.75a4 4 0 1 1 8 0V20h4zm-6 2v-4.75a2 2 0 1 0-4 0V22H4a2 2 0 0 1-2-2V9.132a2 2 0 0 1 .971-1.715l8-4.8a2 2 0 0 1 2.058 0l8 4.8A2 2 0 0 1 22 9.132V20a2 2 0 0 1-2 2h-6z"
stroke="currentColor"
:class="{active: 'fill-black dark:fill-white'}"
/>
</svg>
</template>
<script lang="ts">
export default {
name: "HomeIcon",
props: {
active: {
type: Boolean,
default: false
}
}
}
</script>

14
src/components/icons/InfiniteIcon.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<svg class="inline" width="1.2em" height="1.2em" viewBox="0 0 512 512" focusable="false">
<path
d="M382 136c-40.87 0-73.46 20.53-93.6 37.76l-.71.61l-11.47 12.47l25.32 41.61l18.74-18.79C339.89 193.1 361.78 184 382 184c40.8 0 74 32.3 74 72s-33.2 72-74 72c-62 0-104.14-81.95-104.56-82.78C275 240.29 221.56 136 130 136C62.73 136 8 189.83 8 256s54.73 120 122 120c32.95 0 65.38-13.11 93.79-37.92l.61-.54l11.38-12.38l-25.33-41.61l-18.83 18.88C172 319.4 151.26 328 130 328c-40.8 0-74-32.3-74-72s33.2-72 74-72c62 0 104.14 81.95 104.56 82.78C237 271.71 290.44 376 382 376c67.27 0 122-53.83 122-120s-54.73-120-122-120z"
fill="currentColor"
/>
</svg>
</template>
<script>
export default {
name: "InfiniteIcon"
}
</script>

20
src/components/icons/LightbulbIcon.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<svg class="inline" width="1.5em" height="2.5em" viewBox="0 0 352 512" focusable="false">
<path
d="M176 80c-52.94 0-96 43.06-96 96c0 8.84 7.16 16 16 16s16-7.16 16-16c0-35.3 28.72-64 64-64c8.84 0 16-7.16 16-16s-7.16-16-16-16zM96.06 459.17c0 3.15.93 6.22 2.68 8.84l24.51 36.84c2.97 4.46 7.97 7.14 13.32 7.14h78.85c5.36 0 10.36-2.68 13.32-7.14l24.51-36.84c1.74-2.62 2.67-5.7 2.68-8.84l.05-43.18H96.02l.04 43.18zM176 0C73.72 0 0 82.97 0 176c0 44.37 16.45 84.85 43.56 115.78c16.64 18.99 42.74 58.8 52.42 92.16v.06h48v-.12c-.01-4.77-.72-9.51-2.15-14.07c-5.59-17.81-22.82-64.77-62.17-109.67c-20.54-23.43-31.52-53.15-31.61-84.14c-.2-73.64 59.67-128 127.95-128c70.58 0 128 57.42 128 128c0 30.97-11.24 60.85-31.65 84.14c-39.11 44.61-56.42 91.47-62.1 109.46a47.507 47.507 0 0 0-2.22 14.3v.1h48v-.05c9.68-33.37 35.78-73.18 52.42-92.16C335.55 260.85 352 220.37 352 176C352 78.8 273.2 0 176 0z"
fill="currentColor"
/>
</svg>
</template>
<script lang="ts">
export default {
name: "LightbulbIcon",
props: {
active: {
type: Boolean,
default: false
}
}
}
</script>

15
src/components/icons/MoonIcon.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 16 16" focusable="false">
<g fill="currentColor">
<path
d="M6 .278a.768.768 0 0 1 .08.858a7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277c.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316a.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71C0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
/>
</g>
</svg>
</template>
<script>
export default {
name: "MoonIcon"
}
</script>

19
src/components/icons/MotorcycleIcon.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<svg class="inline" width="1.2em" height="1.2em" viewBox="0 0 24 24" focusable="false">
<path
d="M12 11.39c0-.65-.39-1.23-.98-1.48L5.44 7.55c-1.48 1.68-2.32 3.7-2.8 5.45h7.75c.89 0 1.61-.72 1.61-1.61z"
fill="currentColor"
/>
<path
d="M21.96 11.22c-.41-4.41-4.56-7.49-8.98-7.2c-2.51.16-4.44.94-5.93 2.04l4.74 2.01c1.33.57 2.2 1.87 2.2 3.32c0 1.99-1.62 3.61-3.61 3.61H2.21C2 16.31 2 17.2 2 17.2v.8c0 1.1.9 2 2 2h10c4.67 0 8.41-4.01 7.96-8.78z"
stroke="currentColor"
fill="none"
/>
</svg>
</template>
<script>
export default {
name: "MotorcycleIcon"
}
</script>

18
src/components/icons/PlaneIcon.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<svg class="inline" width="1.2em" height="1.2em" viewBox="0 0 36 36" focusable="false">
<path
d="M35.77 8.16a2.43 2.43 0 0 0-1.9-2L28 4.87a4.5 4.5 0 0 0-3.65.79L7 18.3l-4.86-.2a1.86 1.86 0 0 0-1.23 3.31l5 3.93c.6.73 1 .59 10.93-4.82l.93 9.42a1.36 1.36 0 0 0 .85 1.18a1.43 1.43 0 0 0 .54.1a1.54 1.54 0 0 0 1-.41l2.39-2.18a1.52 1.52 0 0 0 .46-.83l2.19-11.9c3.57-2 6.95-3.88 9.36-5.25a2.43 2.43 0 0 0 1.21-2.49zm-2.2.75c-2.5 1.42-6 3.41-9.76 5.47l-.41.23l-2.33 12.67l-1.47 1.34l-1.1-11.3l-1.33.68C10 22 7.61 23.16 6.79 23.52l-4.3-3.41l5.08.22l18-13.06a2.51 2.51 0 0 1 2-.45l5.85 1.26a.43.43 0 0 1 .35.37a.42.42 0 0 1-.2.46z"
fill="currentColor"
/>
<path
d="M7 12.54l3.56 1l1.64-1.19l-4-1.16l1.8-1.1l5.47-.16l2.3-1.67L10 8.5a1.25 1.25 0 0 0-.7.17L6.67 10.2A1.28 1.28 0 0 0 7 12.54z"
fill="currentColor"
/>
</svg>
</template>
<script>
export default {
name: "PlaneIcon"
}
</script>

25
src/components/icons/PresentationIcon.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<svg class="inline" width="1em" height="1 em" viewBox="0 0 24 24" focusable="false">
<g
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M9 12V8"/>
<path d="M15 12v-2"/>
<path d="M12 12v-1"/>
<path d="M3 4h18"/>
<path d="M4 4v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4"/>
<path d="M12 16v4"/>
<path d="M9 20h6"/>
</g>
</svg>
</template>
<script>
export default {
name: "PresentationIcon"
}
</script>

14
src/components/icons/ServerIcon.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<svg class="inline" width="1.2em" height="1.2em" viewBox="0 0 24 24" focusable="false">
<path
d="M15 17a1 1 0 1 0 1 1a1 1 0 0 0-1-1zm-6 0H6a1 1 0 0 0 0 2h3a1 1 0 0 0 0-2zm9 0a1 1 0 1 0 1 1a1 1 0 0 0-1-1zm-3-6a1 1 0 1 0 1 1a1 1 0 0 0-1-1zm-6 0H6a1 1 0 0 0 0 2h3a1 1 0 0 0 0-2zm9-6a1 1 0 1 0 1 1a1 1 0 0 0-1-1zm0 6a1 1 0 1 0 1 1a1 1 0 0 0-1-1zm4-6a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v2a3 3 0 0 0 .78 2A3 3 0 0 0 2 11v2a3 3 0 0 0 .78 2A3 3 0 0 0 2 17v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a3 3 0 0 0-.78-2a3 3 0 0 0 .78-2v-2a3 3 0 0 0-.78-2A3 3 0 0 0 22 7zm-2 14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1zm0-6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1zm0-6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1zm-5-2a1 1 0 1 0 1 1a1 1 0 0 0-1-1zM9 5H6a1 1 0 0 0 0 2h3a1 1 0 0 0 0-2z"
fill="currentColor"
/>
</svg>
</template>
<script>
export default {
name: "ServerIcon"
}
</script>

46
src/components/icons/SunIcon.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 512 512" focusable="false">
<path
d="M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z"
fill="currentColor"
/>
<path
d="M256 486a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z"
fill="currentColor"
/>
<path
d="M369.14 164.86a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44z"
fill="currentColor"
/>
<path
d="M108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45z"
fill="currentColor"
/>
<path
d="M464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z"
fill="currentColor"
/>
<path
d="M96 278H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z"
fill="currentColor"
/>
<path
d="M403.08 425.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56z"
fill="currentColor"
/>
<path
d="M142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55z"
fill="currentColor"
/>
<path
d="M256 358a102 102 0 1 1 102-102a102.12 102.12 0 0 1-102 102z"
fill="currentColor"
/>
</svg>
</template>
<script>
export default {
name: "SunIcon"
}
</script>

14
src/components/icons/TranslateIcon.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<svg class="inline" width="1em" height="1em" viewBox="0 0 24 24" focusable="false">
<path
d="M12.87 15.07l-2.54-2.51l.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35C8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5l3.11 3.11l.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"
fill="currentColor"
/>
</svg>
</template>
<script>
export default {
name: "TranslateIcon"
}
</script>

21
src/components/icons/UserIcon.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
<path
d="M15.71 12.71a6 6 0 1 0-7.42 0a10 10 0 0 0-6.22 8.18a1 1 0 0 0 2 .22a8 8 0 0 1 15.9 0a1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1a10 10 0 0 0-6.25-8.19zM12 12a4 4 0 1 1 4-4a4 4 0 0 1-4 4z"
stroke="currentColor"
:class="{active: 'fill-black dark:fill-white'}"
/>
</svg>
</template>
<script lang="ts">
export default {
name: "UserIcon",
props: {
active: {
type: Boolean,
default: false
}
}
}
</script>

14
src/components/icons/VialIcon.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<svg class="inline" width="1.3em" height="1.3em" viewBox="0 0 32 32" focusable="false">
<path
d="M18.688 3.273L17.27 4.687l1.32 1.32L5.5 19.1c-2 2-2 5.4 0 7.4c1 1 2.4 1.5 3.7 1.5c1.4 0 2.7-.5 3.7-1.5l13.092-13.092l1.25 1.248l1.414-1.414l-9.968-9.969zm1.304 4.135l4.6 4.6L20.6 16h-9.2l8.592-8.592zM9.4 18h9.2l-7.1 7.1c-1.3 1.3-3.3 1.3-4.6 0c-1.3-1.3-1.3-3.3 0-4.6L9.4 18z"
fill="currentColor"
/>
</svg>
</template>
<script>
export default {
name: "VialIcon"
}
</script>