Added keywords, added link button
This commit is contained in:
parent
9e7182f247
commit
852421579a
|
@ -0,0 +1,30 @@
|
||||||
|
<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"
|
||||||
|
transform="translate(4 3)"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="m7.061 6.732.707 3.536-3.536-.707z"
|
||||||
|
fill="#2a2e3b"
|
||||||
|
transform="matrix(-.70710678 .70710678 -.70710678 -.70710678 16.253048 10.267767)"
|
||||||
|
/>
|
||||||
|
<g stroke-linejoin="round">
|
||||||
|
<path d="m5.5 8.5h9" />
|
||||||
|
<path
|
||||||
|
d="m4.50276494 1.99784965h-3.50491525c-.55228475 0-1 .44771525-1 1 0 .00081971.00000101.00163942.00000302.00245913l.00491223 1.99754087m0 6.00000005-.00491223 1.9975408c-.00135814.5522831.44525477 1.001098.99753785 1.0024561.00081971.000002.00163942.0000031.00245913.0000031h10.99753791c.5520446-.000615.9996604-.4479557 1.0006147-.9999999l.0061479-10.00000033c.0009541-.55228427-.4464858-1.00027469-.9987704-1.00061422-.000205-.00000013-.0004099-.00000019-.0006148.0006144h-2.50000006"
|
||||||
|
transform="matrix(0 1 -1 0 14.498 1.498)"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="m4.5.5h4c.55228475 0 1 .44771525 1 1s-.44771525 1-1 1h-4c-.55228475 0-1-.44771525-1-1s.44771525-1 1-1z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.2 KiB |
128
src/index.html
128
src/index.html
|
@ -38,7 +38,7 @@
|
||||||
class="flex flex-1 w-full py-4 focus:outline-none placeholder-gray-400 appearance-none text-black focus:text-black tracking-tighter text-xl lg:text-3xl xl:text-5xl"
|
class="flex flex-1 w-full py-4 focus:outline-none placeholder-gray-400 appearance-none text-black focus:text-black tracking-tighter text-xl lg:text-3xl xl:text-5xl"
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col space-y-4 sm:space-y-0 sm:flex-row border-t border-gray-300 bg-white pt-4"
|
class="flex flex-col space-y-4 md:space-y-0 md:flex-row border-t border-gray-300 bg-white pt-4"
|
||||||
>
|
>
|
||||||
<label class="inline-flex items-center">
|
<label class="inline-flex items-center">
|
||||||
<input
|
<input
|
||||||
|
@ -50,7 +50,16 @@
|
||||||
/>
|
/>
|
||||||
<span class="ml-2">Copy SVG Code</span>
|
<span class="ml-2">Copy SVG Code</span>
|
||||||
</label>
|
</label>
|
||||||
<label class="inline-flex items-center sm:ml-6">
|
<label class="inline-flex items-center md:ml-6">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
class="form-radio text-green-600"
|
||||||
|
name="clickType"
|
||||||
|
value="link"
|
||||||
|
/>
|
||||||
|
<span class="ml-2"><img/> Link</span>
|
||||||
|
</label>
|
||||||
|
<label class="inline-flex items-center md:ml-6">
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
class="form-radio text-green-600"
|
class="form-radio text-green-600"
|
||||||
|
@ -60,7 +69,7 @@
|
||||||
<span class="ml-2">Download SVGs</span>
|
<span class="ml-2">Download SVGs</span>
|
||||||
</label>
|
</label>
|
||||||
<button
|
<button
|
||||||
class="flex flex-row items-center ml-auto p-3 rounded bg-black text-white hover:bg-gray-900 w-full sm:w-auto"
|
class="flex flex-row items-center ml-auto p-3 rounded bg-black text-white hover:bg-gray-900 w-full md:w-auto"
|
||||||
>
|
>
|
||||||
<span class="mr-4">
|
<span class="mr-4">
|
||||||
<svg
|
<svg
|
||||||
|
@ -98,40 +107,11 @@
|
||||||
href="#"
|
href="#"
|
||||||
class="flex flex-col items-center justify-center text-gray-700 rounded shadow hover:shadow-xl bg-white cursor-pointer transition duration-150 ease-in-out h-48"
|
class="flex flex-col items-center justify-center text-gray-700 rounded shadow hover:shadow-xl bg-white cursor-pointer transition duration-150 ease-in-out h-48"
|
||||||
>
|
>
|
||||||
<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"
|
|
||||||
transform="translate(4 3)"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="m7.061 6.732.707 3.536-3.536-.707z"
|
|
||||||
fill="#2a2e3b"
|
|
||||||
transform="matrix(-.70710678 .70710678 -.70710678 -.70710678 16.253048 10.267767)"
|
|
||||||
/>
|
|
||||||
<g stroke-linejoin="round">
|
|
||||||
<path d="m5.5 8.5h9" />
|
|
||||||
<path
|
|
||||||
d="m4.50276494 1.99784965h-3.50491525c-.55228475 0-1 .44771525-1 1 0 .00081971.00000101.00163942.00000302.00245913l.00491223 1.99754087m0 6.00000005-.00491223 1.9975408c-.00135814.5522831.44525477 1.001098.99753785 1.0024561.00081971.000002.00163942.0000031.00245913.0000031h10.99753791c.5520446-.000615.9996604-.4479557 1.0006147-.9999999l.0061479-10.00000033c.0009541-.55228427-.4464858-1.00027469-.9987704-1.00061422-.000205-.00000013-.0004099-.00000019-.0006148.0006144h-2.50000006"
|
|
||||||
transform="matrix(0 1 -1 0 14.498 1.498)"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="m4.5.5h4c.55228475 0 1 .44771525 1 1s-.44771525 1-1 1h-4c-.55228475 0-1-.44771525-1-1s.44771525-1 1-1z"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
<p
|
<p
|
||||||
class="text-xs leading-none text-center mt-8"
|
class="text-xs leading-none text-center mt-8"
|
||||||
x-text="item.icon_name"
|
x-text="item.icon_name"
|
||||||
></p>
|
></p>
|
||||||
|
<span class="hidden" x-text="item.icon_keywords"></span>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
@ -150,162 +130,242 @@
|
||||||
{
|
{
|
||||||
id: "1",
|
id: "1",
|
||||||
icon_name: "Cog",
|
icon_name: "Cog",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "cog, settings",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "2",
|
id: "2",
|
||||||
icon_name: "User",
|
icon_name: "User",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "user, people, person, avatar",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "3",
|
id: "3",
|
||||||
icon_name: "Heart",
|
icon_name: "Heart",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "heart, love, beating",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "4",
|
id: "4",
|
||||||
icon_name: "Filter",
|
icon_name: "Filter",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "filter, filtering",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "5",
|
id: "5",
|
||||||
icon_name: "Add",
|
icon_name: "Add",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "add, plus",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "6",
|
id: "6",
|
||||||
icon_name: "Minus",
|
icon_name: "Minus",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "minus, negative",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "7",
|
id: "7",
|
||||||
icon_name: "Remove",
|
icon_name: "Remove",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "8",
|
id: "8",
|
||||||
icon_name: "Email",
|
icon_name: "Email",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "9",
|
id: "9",
|
||||||
icon_name: "Battery",
|
icon_name: "Battery",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "10",
|
id: "10",
|
||||||
icon_name: "Battery - Empty",
|
icon_name: "Battery - Empty",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "11",
|
id: "11",
|
||||||
icon_name: "Battery - Half",
|
icon_name: "Battery - Half",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "12",
|
id: "12",
|
||||||
icon_name: "Battery - Full",
|
icon_name: "Battery - Full",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "13",
|
id: "13",
|
||||||
icon_name: "Dashboard",
|
icon_name: "Dashboard",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "14",
|
id: "14",
|
||||||
icon_name: "External",
|
icon_name: "External",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "15",
|
id: "15",
|
||||||
icon_name: "Send",
|
icon_name: "Send",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "16",
|
id: "16",
|
||||||
icon_name: "Favourite",
|
icon_name: "Favourite",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "17",
|
id: "17",
|
||||||
icon_name: "News",
|
icon_name: "News",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "18",
|
id: "18",
|
||||||
icon_name: "Copy",
|
icon_name: "Copy",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "19",
|
id: "19",
|
||||||
icon_name: "Duplicate",
|
icon_name: "Duplicate",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "20",
|
id: "20",
|
||||||
icon_name: "3D",
|
icon_name: "3D",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "21",
|
id: "21",
|
||||||
icon_name: "Cog",
|
icon_name: "Cog",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "22",
|
id: "22",
|
||||||
icon_name: "User",
|
icon_name: "User",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "23",
|
id: "23",
|
||||||
icon_name: "Heart",
|
icon_name: "Heart",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "24",
|
id: "24",
|
||||||
icon_name: "Filter",
|
icon_name: "Filter",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "25",
|
id: "25",
|
||||||
icon_name: "Add",
|
icon_name: "Add",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "26",
|
id: "26",
|
||||||
icon_name: "Minus",
|
icon_name: "Minus",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "27",
|
id: "27",
|
||||||
icon_name: "Remove",
|
icon_name: "Remove",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "28",
|
id: "28",
|
||||||
icon_name: "Email",
|
icon_name: "Email",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "29",
|
id: "29",
|
||||||
icon_name: "Battery",
|
icon_name: "Battery",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "30",
|
id: "30",
|
||||||
icon_name: "Battery - Empty",
|
icon_name: "Battery - Empty",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "31",
|
id: "31",
|
||||||
icon_name: "Battery - Half",
|
icon_name: "Battery - Half",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "32",
|
id: "32",
|
||||||
icon_name: "Battery - Full",
|
icon_name: "Battery - Full",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "33",
|
id: "33",
|
||||||
icon_name: "Dashboard",
|
icon_name: "Dashboard",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "34",
|
id: "34",
|
||||||
icon_name: "External",
|
icon_name: "External",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "35",
|
id: "35",
|
||||||
icon_name: "Send",
|
icon_name: "Send",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "36",
|
id: "36",
|
||||||
icon_name: "Favourite",
|
icon_name: "Favourite",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "37",
|
id: "37",
|
||||||
icon_name: "News",
|
icon_name: "News",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "38",
|
id: "38",
|
||||||
icon_name: "Copy",
|
icon_name: "Copy",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "39",
|
id: "39",
|
||||||
icon_name: "Duplicate",
|
icon_name: "Duplicate",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "40",
|
id: "40",
|
||||||
icon_name: "3D",
|
icon_name: "3D",
|
||||||
|
icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
|
||||||
|
icon_keywords: "copy",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
@ -318,7 +378,7 @@
|
||||||
return this.myForData;
|
return this.myForData;
|
||||||
}
|
}
|
||||||
return this.myForData.filter((item) => {
|
return this.myForData.filter((item) => {
|
||||||
return item.icon_name
|
return item.icon_keywords
|
||||||
.toLowerCase()
|
.toLowerCase()
|
||||||
.includes(this.search.toLowerCase());
|
.includes(this.search.toLowerCase());
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
const path = require("path")
|
const path = require("path");
|
||||||
const glob = require("glob-all")
|
const glob = require("glob-all");
|
||||||
const ExtractTextPlugin = require("extract-text-webpack-plugin")
|
const ExtractTextPlugin = require("extract-text-webpack-plugin");
|
||||||
const HtmlWebpackPlugin = require("html-webpack-plugin")
|
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||||
const CopyWebpackPlugin = require("copy-webpack-plugin")
|
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
||||||
const PurgecssPlugin = require("purgecss-webpack-plugin")
|
const PurgecssPlugin = require("purgecss-webpack-plugin");
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Custom PurgeCSS Extractor
|
* Custom PurgeCSS Extractor
|
||||||
|
@ -12,7 +12,7 @@ const PurgecssPlugin = require("purgecss-webpack-plugin")
|
||||||
*/
|
*/
|
||||||
class TailwindExtractor {
|
class TailwindExtractor {
|
||||||
static extract(content) {
|
static extract(content) {
|
||||||
return content.match(/[A-z0-9-:\/]+/g)
|
return content.match(/[A-z0-9-:\/]+/g);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -42,12 +42,12 @@ module.exports = {
|
||||||
template: "src/index.html",
|
template: "src/index.html",
|
||||||
}),
|
}),
|
||||||
/// Enable images folder
|
/// Enable images folder
|
||||||
// new CopyWebpackPlugin([
|
new CopyWebpackPlugin([
|
||||||
// {
|
{
|
||||||
// from: "src/images",
|
from: "src/images",
|
||||||
// to: "images",
|
to: "images",
|
||||||
// },
|
},
|
||||||
// ]),
|
]),
|
||||||
new PurgecssPlugin({
|
new PurgecssPlugin({
|
||||||
paths: glob.sync([path.join(__dirname, "src/**/*.html")]),
|
paths: glob.sync([path.join(__dirname, "src/**/*.html")]),
|
||||||
extractors: [
|
extractors: [
|
||||||
|
@ -58,4 +58,4 @@ module.exports = {
|
||||||
],
|
],
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
}
|
};
|
||||||
|
|
Loading…
Reference in New Issue