nicolas.marsal
/
cv
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: add icons

main
nicolas.marsal 3 years ago
parent
88348bb3e6
commit
950cc68710
No known key found for this signature in database
GPG Key ID: 268AB819B6453541
5 changed files with 313 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 56
      src/components/icons/DownloadIcon.vue
  2. 104
      src/components/icons/EmailIcon.vue
  3. 35
      src/components/icons/HouseIcon.vue
  4. 41
      src/components/icons/LinkedInIcon.vue
  5. 77
      src/components/icons/PhoneIcon.vue

56
src/components/icons/DownloadIcon.vue
Unescape View File

@ -0,0 +1,56 @@
<template>
<svg :width="width" :height="height" x="0px" y="0px" viewBox="0 0 32 32">
<line
fill="none"
:stroke="color"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
x1="16"
y1="3"
x2="16"
y2="19"
/>
<polyline
fill="none"
:stroke="color"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
points="20,15 16,19 12,15 "
/>
<polyline
fill="none"
:stroke="color"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
points="9,13 3,16.5 3,21.5 16,29 29,21.5 29,16.5 23,13 "
/>
</svg>
</template>
<script>
export default {
name: "DownloadIcon",
props: {
width: {
type: [Number, String],
default: 16,
},
height: {
type: [Number, String],
default: 16,
},
color: {
type: String,
default: "#000000",
},
},
};
</script>
<style scoped></style>

104
src/components/icons/EmailIcon.vue
Unescape View File

@ -0,0 +1,104 @@
<template>
<svg x="0px" y="0px" viewBox="0 0 32 32" :width="width" :height="height">
<rect
x="4"
y="7"
fill="none"
:stroke="color"
stroke-width="2"
stroke-linejoin="round"
stroke-miterlimit="10"
width="24"
height="18"
/>
<polyline
fill="none"
:stroke="color"
stroke-width="2"
stroke-linejoin="round"
stroke-miterlimit="10"
points="8,11 16,18 24,11 "
/>
<line
fill="none"
:stroke="color"
stroke-width="2"
stroke-linejoin="round"
stroke-miterlimit="10"
x1="13.7"
y1="16"
x2="8"
y2="21"
/>
<line
fill="none"
:stroke="color"
stroke-width="2"
stroke-linejoin="round"
stroke-miterlimit="10"
x1="24"
y1="21"
x2="18.3"
y2="16"
/>
</svg>
</template>
<script>
export default {
name: "EmailIcon",
props: {
width: {
type: [Number, String],
default: 16,
},
height: {
type: [Number, String],
default: 16,
},
color: {
type: String,
default: "#000000",
},
},
};
</script>
<style scoped>
.st0 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st2 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st3 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st4 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-linejoin: round;
stroke-miterlimit: 10;
stroke-dasharray: 3;
}
</style>

35
src/components/icons/HouseIcon.vue
Unescape View File

@ -0,0 +1,35 @@
<template>
<svg :width="width" :height="height" x="0px" y="0px" viewBox="0 0 32 32">
<polyline
fill="none"
:stroke="color"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
points="13.3,11.9 16,9 23.3,17 28,17 16,4 4,17 8,17 8,28 24,28 24,21 "
/>
</svg>
</template>
<script>
export default {
name: "HouseIcon",
props: {
width: {
type: [Number, String],
default: 16,
},
height: {
type: [Number, String],
default: 16,
},
color: {
type: String,
default: "#000000",
},
},
};
</script>
<style scoped></style>

41
src/components/icons/LinkedInIcon.vue
Unescape View File

@ -0,0 +1,41 @@
<template>
<svg viewBox="0 0 72 72" :width="width" :height="height">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-376.000000, -267.000000)">
<g transform="translate(376.000000, 267.000000)">
<path
d="M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z"
id="Rounded"
:fill="color"
></path>
<path
d="M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z"
fill="#FFFFFF"
></path>
</g>
</g>
</g>
</svg>
</template>
<script>
export default {
name: "LinkedInIcon",
props: {
width: {
type: [Number, String],
default: 16,
},
height: {
type: [Number, String],
default: 16,
},
color: {
type: String,
default: "#007EBB",
},
},
};
</script>
<style scoped></style>

77
src/components/icons/PhoneIcon.vue
Unescape View File

@ -0,0 +1,77 @@
<template>
<svg :width="width" :height="height" x="0px" y="0px" viewBox="0 0 32 32">
<circle
fill="none"
:stroke="color"
stroke-width="2"
stroke-linejoin="round"
stroke-miterlimit="10"
cx="16"
cy="19"
r="3"
/>
<path
fill="none"
:stroke="color"
stroke-width="2"
stroke-linejoin="round"
stroke-miterlimit="10"
d="M12.7,12h6.6c1.2,0,2.1,0.4,2.1,1.7v0c0,1.3,1,2.3,2.2,2.3H29c0-4.4-3.4-8-7.6-8H10.6C6.4,8,3,11.6,3,16h5.4
c1.2,0,2.2-1.1,2.2-2.3v0C10.6,12.4,11.5,12,12.7,12z"
/>
<line
fill="none"
:stroke="color"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
x1="23"
y1="25"
x2="23"
y2="27"
/>
<line
fill="none"
:stroke="color"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
x1="9"
y1="25"
x2="9"
y2="27"
/>
<path
fill="none"
:stroke="color"
stroke-width="2"
stroke-linejoin="round"
stroke-miterlimit="10"
d="M9,16c-1.5,2.4-3,6.1-3,9v0h20v0c0-2.9-1.5-6.6-3-9"
/>
</svg>
</template>
<script>
export default {
name: "PhoneIcon",
props: {
width: {
type: [Number, String],
default: 16,
},
height: {
type: [Number, String],
default: 16,
},
color: {
type: String,
default: "#000000",
},
},
};
</script>
<style scoped></style>
Write Preview
Loading…
Cancel
Save