Added third batch of icons

This commit is contained in:
Corey 2020-05-26 21:01:07 +08:00
parent 95a92a04f0
commit 2c628f430e
21 changed files with 115 additions and 259 deletions

1
src/images/coffee.svg Normal file
View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="translate(4 2)"><path d="m2.5 6.5h6c1.1045695 0 2 .8954305 2 2v2.5c0 2.4852814-2.01471863 4.5-4.5 4.5h-1c-2.48528137 0-4.5-2.0147186-4.5-4.5v-2.5c0-1.1045695.8954305-2 2-2zm8 2h1c1.1045695 0 2 .8954305 2 2s-.8954305 2-2 2h-1"/><path d="m4.5 4.5v-4"/><path d="m6.5 4.5v-2"/></g></svg>

After

Width:  |  Height:  |  Size: 476 B

1
src/images/compass.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="#2A2E3B" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 2)"><circle cx="8.5" cy="8.5" r="8"/><polygon points="8.5 3.5 10.5 8.5 8.5 13.5 6.5 8.5" transform="rotate(30 8.5 8.5)"/></g></svg>

After

Width:  |  Height:  |  Size: 336 B

1
src/images/document.svg Normal file
View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="translate(4 3)"><path d="m12.5 12.5v-7l-5-5h-5c-1.1045695 0-2 .8954305-2 2v10c0 1.1045695.8954305 2 2 2h8c1.1045695 0 2-.8954305 2-2z"/><path d="m2.5 7.5h5"/><path d="m2.5 9.5h7"/><path d="m2.5 11.5h3"/><path d="m7.5.5v3c0 1.1045695.8954305 2 2 2h3"/></g></svg>

After

Width:  |  Height:  |  Size: 454 B

1
src/images/download.svg Normal file
View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="translate(4 3)"><path d="m9.221 4.716.165 5.821-5.792-.135" transform="matrix(-.70710678 .70710678 .70710678 .70710678 5.685139 -2.354861)"/><path d="m6.5.5v11"/><path d="m.5 14.5h12"/></g></svg>

After

Width:  |  Height:  |  Size: 388 B

View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 3)"><path d="m10.334 5.685-5.641-.016-.016 5.673" transform="matrix(.70710678 -.70710678 -.70710678 -.70710678 8.212726 19.827274)"/><path d="m7.522.521v11.979"/><path d="m.5 9v4.5c0 1.1045695.8954305 2 2 2h10c1.1045695 0 2-.8954305 2-2v-4.5"/></g></svg>

After

Width:  |  Height:  |  Size: 459 B

1
src/images/location.svg Normal file
View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="translate(4 2)"><path d="m6.5 16.5407715c4-4.4500928 6-7.78586659 6-10.00732153 0-3.33218241-2.6862915-6.03344997-6-6.03344997s-6 2.70126756-6 6.03344997c0 2.22145494 2 5.55722873 6 10.00732153z"/><circle cx="6.5" cy="6.5" r="2.5"/></g></svg>

After

Width:  |  Height:  |  Size: 435 B

1
src/images/lock.svg Normal file
View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="translate(4 1)"><path d="m2.5 8.5-.00586729-1.99475098c-.00728549-4.00349935 1.32800361-6.00524902 4.00586729-6.00524902s4.0112203 2.00174967 4.0000699 6.00524902v1.99475098m-8.0000699 0h8.0225317c1.1045695 0 2 .8954305 2 2 0 .0018783-.0000026.0037566-.0000079.0056349l-.0169048 6c-.0031058 1.1023652-.8976224 1.9943651-1.999992 1.9943651h-8.005627c-1.1045695 0-2-.8954305-2-2v-6c0-1.1045695.8954305-2 2-2z" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round"/><circle cx="6.5" cy="13.5" fill="#2a2e3b" r="1.5"/></g></svg>

After

Width:  |  Height:  |  Size: 663 B

1
src/images/lock_open.svg Normal file
View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="translate(4 1)"><path d="m2.5 8.5-.00586729-1.99475098c-.00728549-4.00349935 1.32800361-6.00524902 4.00586729-6.00524902 2.19134421 0 3.6093703 1.31907891 4 4m-8 4h8.0225317c1.1045695 0 2 .8954305 2 2 0 .0018783-.0000026.0037566-.0000079.0056349l-.0169048 6c-.0031058 1.1023652-.8976224 1.9943651-1.999992 1.9943651h-8.005627c-1.1045695 0-2-.8954305-2-2v-6c0-1.1045695.8954305-2 2-2z" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round"/><circle cx="6.5" cy="13.5" fill="#2a2e3b" r="1.5"/></g></svg>

After

Width:  |  Height:  |  Size: 640 B

1
src/images/mail.svg Normal file
View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="matrix(0 -1 1 0 2.5 16.5)"><path d="m2 .5h8c1.1045695 0 2 .8954305 2 2v10c0 1.1045695-.8954305 2-2 2h-8c-1.1045695 0-2-.8954305-2-2v-10c0-1.1045695.8954305-2 2-2z"/><path d="m2 6 5 3 5-3" transform="matrix(0 1 -1 0 14.5 .5)"/></g></svg>

After

Width:  |  Height:  |  Size: 429 B

1
src/images/mail_add.svg Normal file
View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="matrix(0 -1 1 0 2 17)"><path d="m7 14.5h-4.5c-1.1045695 0-2-.8954305-2-2v-10c0-1.1045695.8954305-2 2-2h7c1.1045695 0 2 .8954305 2 2v7.5"/><path d="m11.5 12.5v4"/><path d="m11.5 12.5v4" transform="matrix(0 1 -1 0 26 3)"/><path d="m2 6 5 3 5-3" transform="matrix(0 1 -1 0 14.5 .5)"/></g></svg>

After

Width:  |  Height:  |  Size: 484 B

View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="matrix(0 -1 1 0 3 18)"><path d="m2.5.5h7.26393202c.75754408 0 1.45007038.42800475 1.78885438 1.10557281l2.5 5c.2815275.56305498.2815275 1.2257994 0 1.78885438l-2.5 5.00000001c-.338784.677568-1.0313103 1.1055728-1.78885438 1.1055728h-7.26393202c-1.1045695 0-2-.8954305-2-2v-10c0-1.1045695.8954305-2 2-2z"/><g transform="matrix(0 1 -1 0 14 1)"><path d="m3.5 10.5 6-6"/><path d="m3.5 4.5 6 6"/></g></g></svg>

After

Width:  |  Height:  |  Size: 598 B

View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="matrix(0 -1 1 0 2 17)"><path d="m9 14.5h-6.5c-1.1045695 0-2-.8954305-2-2v-10c0-1.1045695.8954305-2 2-2h7c1.1045695 0 2 .8954305 2 2v7.5"/><path d="m11.5 12.5v4"/><path d="m2 6 5 3 5-3" transform="matrix(0 1 -1 0 14.5 .5)"/></g></svg>

After

Width:  |  Height:  |  Size: 426 B

1
src/images/mail_open.svg Normal file
View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="matrix(0 -1 1 0 3 17)"><path d="m2.5.5h7.26393202c.75754408 0 1.45007038.42800475 1.78885438 1.10557281l2.5 5c.2815275.56305498.2815275 1.2257994 0 1.78885438l-2.5 5.00000001c-.338784.677568-1.0313103 1.1055728-1.78885438 1.1055728h-7.26393202c-1.1045695 0-2-.8954305-2-2v-10c0-1.1045695.8954305-2 2-2z"/><path d="m3 6 5.019 3 4.981-3" transform="matrix(0 1 -1 0 15.5 -.5)"/></g></svg>

After

Width:  |  Height:  |  Size: 578 B

View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="matrix(0 -1 1 0 3 17)"><path d="m2.5.5h7.26393202c.75754408 0 1.45007038.42800475 1.78885438 1.10557281l2.5 5c.2815275.56305498.2815275 1.2257994 0 1.78885438l-2.5 5.00000001c-.338784.677568-1.0313103 1.1055728-1.78885438 1.1055728h-7.26393202c-1.1045695 0-2-.8954305-2-2v-10c0-1.1045695.8954305-2 2-2z"/><path d="m3.5 7.5h6" transform="matrix(0 1 -1 0 14 1)"/></g></svg>

After

Width:  |  Height:  |  Size: 564 B

1
src/images/maximise.svg Normal file
View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 2)"><path d="m14.5.5h-12c-1.1045695 0-2 .8954305-2 2v12c0 1.1045695.8954305 2 2 2h12c1.1045695 0 2-.8954305 2-2v-12c0-1.1045695-.8954305-2-2-2z" transform="matrix(0 1 -1 0 17 0)"/><path d="m.5 12.5h10c1.1045695 0 2-.8954305 2-2v-10"/><path d="m.5 8.5h7c.55228475 0 1-.44771525 1-1v-7"/></g></svg>

After

Width:  |  Height:  |  Size: 501 B

1
src/images/paper.svg Normal file
View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="translate(4 3)"><path d="m12.5 12.5v-7l-5-5h-5c-1.1045695 0-2 .8954305-2 2v10c0 1.1045695.8954305 2 2 2h8c1.1045695 0 2-.8954305 2-2z"/><path d="m7.5.5v3c0 1.1045695.8954305 2 2 2h3"/></g></svg>

After

Width:  |  Height:  |  Size: 387 B

1
src/images/share.svg Normal file
View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 3)"><path d="m10.326 1.666.016 5.641-5.673.016" transform="matrix(.70710678 -.70710678 -.70710678 -.70710678 5.376348 12.979652)"/><path d="m7.522.521v11.979"/><path d="m4.5 7.5h-2c-1.1045695 0-2 .8954305-2 2v4c0 1.1045695.8954305 2 2 2h10c1.1045695 0 2-.8954305 2-2v-4c0-1.1045695-.8954305-2-2-2h-2"/></g></svg>

After

Width:  |  Height:  |  Size: 517 B

1
src/images/upload.svg Normal file
View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="translate(4 3)"><path d="m9.221 1.716.165 5.821-5.792-.135" transform="matrix(-.70710678 -.70710678 .70710678 -.70710678 7.80734 12.487906)"/><path d="m6.5.5v11"/><path d="m.5 14.5h12"/></g></svg>

After

Width:  |  Height:  |  Size: 389 B

View file

@ -0,0 +1 @@
<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 3)"><path d="m10.326 1.666.016 5.641-5.673.016" transform="matrix(.70710678 -.70710678 -.70710678 -.70710678 5.376348 12.979652)"/><path d="m7.522.521v11.979"/><path d="m.5 9v4.5c0 1.1045695.8954305 2 2 2h10c1.1045695 0 2-.8954305 2-2v-4.5"/></g></svg>

After

Width:  |  Height:  |  Size: 457 B

View file

@ -111,6 +111,7 @@
:src="`images/` + item.icon_path + `.svg`"
:alt="item.icon_name"
class="transform transition duration-200 group-hover:scale-150"
loading="lazy"
/>
<p
class="text-xs leading-none text-center mt-8"
@ -337,6 +338,101 @@
icon_path: "versions",
icon_keywords: "versions stacks stacked levels",
},
{
icon_name: "Coffee",
icon_path: "coffee",
icon_keywords: "coffee",
},
{
icon_name: "Compass",
icon_path: "compass",
icon_keywords: "compass",
},
{
icon_name: "Document",
icon_path: "document",
icon_keywords: "document",
},
{
icon_name: "Download",
icon_path: "download",
icon_keywords: "download",
},
{
icon_name: "Download (Alt)",
icon_path: "download_alt",
icon_keywords: "download_alt",
},
{
icon_name: "Upload",
icon_path: "upload",
icon_keywords: "upload",
},
{
icon_name: "Upload (Alt)",
icon_path: "upload_alt",
icon_keywords: "upload_alt",
},
{
icon_name: "Location",
icon_path: "location",
icon_keywords: "location",
},
{
icon_name: "Lock (Closed)",
icon_path: "lock",
icon_keywords: "lock",
},
{
icon_name: "Lock (Open)",
icon_path: "lock_open",
icon_keywords: "lock",
},
{
icon_name: "Mail",
icon_path: "mail",
icon_keywords: "mail",
},
{
icon_name: "Mail (Open)",
icon_path: "mail_open",
icon_keywords: "mail",
},
{
icon_name: "Mail (Add)",
icon_path: "mail_add",
icon_keywords: "mail",
},
{
icon_name: "Mail (Minus)",
icon_path: "mail_minus",
icon_keywords: "mail",
},
{
icon_name: "Mail (Delete)",
icon_path: "mail_delete",
icon_keywords: "mail",
},
{
icon_name: "Mail (Remove)",
icon_path: "mail_remove",
icon_keywords: "mail",
},
{
icon_name: "Maximise",
icon_path: "maximise",
icon_keywords: "maximise",
},
{
icon_name: "Paper",
icon_path: "paper",
icon_keywords: "paper",
},
{
icon_name: "Share",
icon_path: "share",
icon_keywords: "share",
},
];
function loadIcons() {

View file

@ -1,259 +0,0 @@
var sourceData = [
{
id: "1",
icon_name: "Cog",
icon_path: "images/copy.svg",
icon_keywords: "cog, settings",
},
{
id: "2",
icon_name: "User",
icon_path: "images/copy.svg",
icon_keywords: "user, people, person, avatar",
},
{
id: "3",
icon_name: "Heart",
icon_path: "images/copy.svg",
icon_keywords: "heart, love, beating",
},
{
id: "4",
icon_name: "Filter",
icon_path: "images/copy.svg",
icon_keywords: "filter, filtering",
},
{
id: "5",
icon_name: "Add",
icon_path: "images/copy.svg",
icon_keywords: "add, plus",
},
{
id: "6",
icon_name: "Minus",
icon_path: "images/copy.svg",
icon_keywords: "minus, negative",
},
{
id: "7",
icon_name: "Remove",
icon_path: "images/copy.svg",
icon_keywords: "remove, minus, negative, trash, bin",
},
{
id: "8",
icon_name: "Email",
icon_path: "images/copy.svg",
icon_keywords: "email, send",
},
{
id: "9",
icon_name: "Battery",
icon_path: "images/copy.svg",
icon_keywords: "copy",
},
{
id: "10",
icon_name: "Battery - Empty",
icon_path: "images/copy.svg",
icon_keywords: "battery, charge, energy",
},
{
id: "11",
icon_name: "Battery - Half",
icon_path: "images/copy.svg",
icon_keywords: "battery, half, charged, energy",
},
{
id: "12",
icon_name: "Battery - Full",
icon_path: "images/copy.svg",
icon_keywords: "battery, full, charged, energy",
},
{
id: "13",
icon_name: "Dashboard",
icon_path: "images/copy.svg",
icon_keywords: "dashboard",
},
{
id: "14",
icon_name: "External",
icon_path: "images/copy.svg",
icon_keywords: "external",
},
{
id: "15",
icon_name: "Send",
icon_path: "images/copy.svg",
icon_keywords: "send, email",
},
{
id: "16",
icon_name: "Favourite",
icon_path: "images/copy.svg",
icon_keywords: "favourite, favorite",
},
{
id: "17",
icon_name: "News",
icon_path: "images/copy.svg",
icon_keywords: "news, book, paper, zeitgeist",
},
{
id: "18",
icon_name: "Copy",
icon_path: "images/copy.svg",
icon_keywords: "copy, duplicate, replicate",
},
{
id: "19",
icon_name: "Duplicate",
icon_path: "images/copy.svg",
icon_keywords: "copy, duplicate, replicate",
},
{
id: "20",
icon_name: "3D",
icon_path: "images/copy.svg",
icon_keywords: "3D",
},
{
id: "21",
icon_name: "Cog",
icon_path: "images/copy.svg",
icon_keywords: "cog, settings",
},
{
id: "22",
icon_name: "User",
icon_path: "images/copy.svg",
icon_keywords: "user, people, person, avatar",
},
{
id: "23",
icon_name: "Heart",
icon_path: "images/copy.svg",
icon_keywords: "heart, love, beating",
},
{
id: "24",
icon_name: "Filter",
icon_path: "images/copy.svg",
icon_keywords: "filter, filtering",
},
{
id: "25",
icon_name: "Add",
icon_path: "images/copy.svg",
icon_keywords: "add, plus",
},
{
id: "26",
icon_name: "Minus",
icon_path: "images/copy.svg",
icon_keywords: "minus, negative",
},
{
id: "27",
icon_name: "Remove",
icon_path: "images/copy.svg",
icon_keywords: "remove, minus, negative, trash, bin",
},
{
id: "28",
icon_name: "Email",
icon_path: "images/copy.svg",
icon_keywords: "email, send",
},
{
id: "29",
icon_name: "Battery",
icon_path: "images/copy.svg",
icon_keywords: "copy",
},
{
id: "30",
icon_name: "Battery - Empty",
icon_path: "images/copy.svg",
icon_keywords: "battery, charge, energy",
},
{
id: "31",
icon_name: "Battery - Half",
icon_path: "images/copy.svg",
icon_keywords: "battery, half, charged, energy",
},
{
id: "32",
icon_name: "Battery - Full",
icon_path: "images/copy.svg",
icon_keywords: "battery, full, charged, energy",
},
{
id: "33",
icon_name: "Dashboard",
icon_path: "images/copy.svg",
icon_keywords: "dashboard",
},
{
id: "34",
icon_name: "External",
icon_path: "images/copy.svg",
icon_keywords: "external",
},
{
id: "35",
icon_name: "Send",
icon_path: "images/copy.svg",
icon_keywords: "send, email",
},
{
id: "36",
icon_name: "Favourite",
icon_path: "images/copy.svg",
icon_keywords: "favourite, favorite",
},
{
id: "37",
icon_name: "News",
icon_path: "images/copy.svg",
icon_keywords: "news, book, paper, zeitgeist",
},
{
id: "38",
icon_name: "Copy",
icon_path: "images/copy.svg",
icon_keywords: "copy, duplicate, replicate",
},
{
id: "39",
icon_name: "Duplicate",
icon_path: "images/copy.svg",
icon_keywords: "copy, duplicate, replicate",
},
{
id: "40",
icon_name: "3D",
icon_path: "images/copy.svg",
icon_keywords: "3D",
},
];
function loadIcons() {
return {
search: "",
myForData: sourceData,
get filteredIcons() {
if (this.search === "") {
return this.myForData;
}
return this.myForData.filter((item) => {
return item.icon_keywords
.toLowerCase()
.includes(this.search.toLowerCase());
});
},
};
}