Added keywords, added link button

src/images/copy.svg

@@ -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>

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"
       />
       <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">
           <input
@@ -50,7 +50,16 @@
           />
           <span class="ml-2">Copy SVG Code</span>
         </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">&lt;img/&gt; Link</span>
+        </label>
+        <label class="inline-flex items-center md:ml-6">
           <input
             type="radio"
             class="form-radio text-green-600"
@@ -60,7 +69,7 @@
           <span class="ml-2">Download SVGs</span>
         </label>
         <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">
             <svg
@@ -98,40 +107,11 @@
           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"
         >
-          <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
             class="text-xs leading-none text-center mt-8"
             x-text="item.icon_name"
           ></p>
+          <span class="hidden" x-text="item.icon_keywords"></span>
         </a>
       </template>
     </div>
@@ -150,162 +130,242 @@
         {
           id: "1",
           icon_name: "Cog",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "cog, settings",
         },
         {
           id: "2",
           icon_name: "User",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "user, people, person, avatar",
         },
         {
           id: "3",
           icon_name: "Heart",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "heart, love, beating",
         },
         {
           id: "4",
           icon_name: "Filter",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "filter, filtering",
         },
         {
           id: "5",
           icon_name: "Add",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "add, plus",
         },
         {
           id: "6",
           icon_name: "Minus",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "minus, negative",
         },
         {
           id: "7",
           icon_name: "Remove",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "8",
           icon_name: "Email",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "9",
           icon_name: "Battery",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "10",
           icon_name: "Battery - Empty",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "11",
           icon_name: "Battery - Half",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "12",
           icon_name: "Battery - Full",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "13",
           icon_name: "Dashboard",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "14",
           icon_name: "External",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "15",
           icon_name: "Send",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "16",
           icon_name: "Favourite",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "17",
           icon_name: "News",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "18",
           icon_name: "Copy",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "19",
           icon_name: "Duplicate",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "20",
           icon_name: "3D",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "21",
           icon_name: "Cog",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "22",
           icon_name: "User",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "23",
           icon_name: "Heart",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "24",
           icon_name: "Filter",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "25",
           icon_name: "Add",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "26",
           icon_name: "Minus",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "27",
           icon_name: "Remove",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "28",
           icon_name: "Email",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "29",
           icon_name: "Battery",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "30",
           icon_name: "Battery - Empty",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "31",
           icon_name: "Battery - Half",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "32",
           icon_name: "Battery - Full",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "33",
           icon_name: "Dashboard",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "34",
           icon_name: "External",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "35",
           icon_name: "Send",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "36",
           icon_name: "Favourite",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "37",
           icon_name: "News",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "38",
           icon_name: "Copy",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "39",
           icon_name: "Duplicate",
+          icon_path: "https://randomuser.me/api/portraits/men/1.jpg",
+          icon_keywords: "copy",
         },
         {
           id: "40",
           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.filter((item) => {
-              return item.icon_name
+              return item.icon_keywords
                 .toLowerCase()
                 .includes(this.search.toLowerCase());
             });

webpack.config.js

@@ -1,9 +1,9 @@
-const path = require("path")
-const glob = require("glob-all")
-const ExtractTextPlugin = require("extract-text-webpack-plugin")
-const HtmlWebpackPlugin = require("html-webpack-plugin")
-const CopyWebpackPlugin = require("copy-webpack-plugin")
-const PurgecssPlugin = require("purgecss-webpack-plugin")
+const path = require("path");
+const glob = require("glob-all");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const PurgecssPlugin = require("purgecss-webpack-plugin");
 
 /**
  * Custom PurgeCSS Extractor
@@ -12,7 +12,7 @@ const PurgecssPlugin = require("purgecss-webpack-plugin")
  */
 class TailwindExtractor {
   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",
     }),
     /// Enable images folder
-    // new CopyWebpackPlugin([
-    //   {
-    //     from: "src/images",
-    //     to: "images",
-    //   },
-    // ]),
+    new CopyWebpackPlugin([
+      {
+        from: "src/images",
+        to: "images",
+      },
+    ]),
     new PurgecssPlugin({
       paths: glob.sync([path.join(__dirname, "src/**/*.html")]),
       extractors: [
@@ -58,4 +58,4 @@ module.exports = {
       ],
     }),
   ],
-}
+};