@bookklik/senangstart-icons 1.0.3

package/src/index.js

@@ -0,0 +1,9 @@
+// Main entry point for webpack bundle
+import icons from "./svg/index.js";
+import "./ss-icon.js";
+import "./ss-loader.js";
+import "./style.css";
+
+// Export icons for library usage
+export { icons };
+export default { icons };

package/src/ss-icon.js

@@ -0,0 +1,62 @@
+import icons from "./svg/index.js";
+
+class SSIcon extends HTMLElement {
+  static get observedAttributes() {
+    return ["icon", "thickness"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "icon" || name === "thickness") {
+      this.render();
+    }
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    const iconName = this.getAttribute("icon");
+    const iconSvg = icons[iconName];
+
+    if (!iconSvg) {
+      this.shadowRoot.innerHTML = "";
+      return;
+    }
+
+    const thicknessAttr = this.getAttribute("thickness");
+    // If thickness is provided, we need to inject it into the SVG string
+    // This is a bit hacky but works for simple SVGs
+    let finalSvg = iconSvg;
+    if (thicknessAttr) {
+      finalSvg = finalSvg.replace(
+        /stroke-width="[^"]*"/,
+        `stroke-width="${thicknessAttr}"`
+      );
+    }
+
+    // Render initial markup
+    this.shadowRoot.innerHTML = `
+    <style>
+      :host {
+        display: inline-flex;
+        width: 1em;
+        height: 1em;
+        vertical-align: middle;
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+    ${finalSvg}
+  `;
+  }
+}
+
+customElements.define("ss-icon", SSIcon);

package/src/ss-loader.js

@@ -0,0 +1,64 @@
+import icons from "./svg/index.js";
+
+function replaceIcons() {
+  const elements = document.querySelectorAll("i.ss");
+  elements.forEach((el) => {
+    if (el.dataset.ssLoaded) return;
+
+    const classes = Array.from(el.classList);
+    const iconClass = classes.find(
+      (c) => (c.startsWith("ss-") || c.startsWith("sw-")) && c !== "ss"
+    );
+
+    if (iconClass) {
+      const iconName = iconClass.startsWith("sw-")
+        ? iconClass
+        : iconClass.replace("ss-", "");
+      const iconSvg = icons[iconName];
+
+      if (iconSvg) {
+        el.innerHTML = iconSvg;
+        el.dataset.ssLoaded = "true";
+      }
+    }
+  });
+}
+
+// Initial replacement
+document.addEventListener("DOMContentLoaded", replaceIcons);
+
+// Observe for new icons
+const observer = new MutationObserver((mutations) => {
+  let shouldUpdate = false;
+  mutations.forEach((mutation) => {
+    if (
+      mutation.addedNodes.length ||
+      (mutation.type === "attributes" && mutation.attributeName === "class")
+    ) {
+      shouldUpdate = true;
+    }
+  });
+
+  if (shouldUpdate) {
+    replaceIcons();
+  }
+});
+
+// Start observing only after DOM is ready
+if (document.body) {
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+} else {
+  document.addEventListener("DOMContentLoaded", () => {
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+  });
+}

package/src/style.css

@@ -0,0 +1,12 @@
+.ss {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+}
+
+.ss svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/ss.svg

@@ -0,0 +1 @@
+<svg width="946" height="153" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="clip0"><rect x="1208" y="1335" width="756" height="126"/></clipPath><clipPath id="clip1"><rect x="1208" y="1335" width="756" height="126"/></clipPath><clipPath id="clip2"><rect x="1208" y="1335" width="756" height="126"/></clipPath></defs><g transform="translate(-1019 -1322)"><g><g><g><path d="M1040.65 1428.36 1039.42 1430.18C1033.58 1439.41 1031.01 1450.17 1031.68 1460.85L1031.72 1461.24 1032.11 1461.28C1042.79 1461.95 1053.55 1459.38 1062.77 1453.54L1064.6 1452.31 1063.7 1453.59C1062.25 1455.52 1060.66 1457.38 1058.9 1459.13 1048.2 1469.83 1033.83 1474.7 1019.58 1473.8L1019.19 1473.77 1019.16 1473.37C1018.26 1459.13 1023.13 1444.76 1033.82 1434.06 1035.58 1432.3 1037.43 1430.7 1039.37 1429.26ZM1136.21 1356.75C1129.29 1349.82 1118.06 1349.82 1111.13 1356.75 1104.21 1363.67 1104.21 1374.9 1111.13 1381.82 1118.06 1388.75 1129.29 1388.75 1136.21 1381.82 1143.13 1374.9 1143.13 1363.67 1136.21 1356.75ZM1169.64 1323.31 1169.71 1324.32C1171.18 1358.34 1159.71 1392.91 1135.33 1420.04L1133.51 1421.96 1136.21 1457.05 1065.16 1469.59 1084.28 1450.47 1080.48 1448.08C1073.6 1443.43 1067.07 1438.06 1060.98 1431.98 1054.9 1425.89 1049.53 1419.36 1044.88 1412.48L1042.48 1408.68 1023.37 1427.8 1035.91 1356.75 1071 1359.45 1072.92 1357.63C1100.04 1333.25 1134.62 1321.78 1168.64 1323.25Z" fill-rule="evenodd"/></g></g></g><g clip-path="url(#clip0)"><g clip-path="url(#clip1)"><g clip-path="url(#clip2)"><path d="M501.292 179.01C501.015 178.943 499.654 178.709 498.268 178.484 495.039 177.961 490.572 176.507 487.595 175.007 484.264 173.33 480.021 170.023 477.898 167.451L476.078 165.243 481.624 159.697 487.171 154.151 488.939 155.852C493.798 160.523 497.81 162.437 503.921 163.001 513.436 163.879 520.163 160.868 523.252 154.347 524.256 152.228 524.312 151.891 524.422 147.295 524.551 141.984 524.672 142.189 522.44 143.923 520.812 145.188 516.974 147.075 514.731 147.714 511.904 148.518 506.783 149.029 503.98 148.784 490.382 147.6 480.268 138.911 476.578 125.244 475.828 122.467 475.544 114.071 476.085 110.711 477.258 103.431 480.312 97.6177 485.607 92.5881 491.815 86.691 500.619 83.7759 509.35 84.7259 514.689 85.3066 518.557 86.7428 522.71 89.6872L524.81 91.1759 524.81 88.4709 524.81 85.7666 533.56 85.7666 542.309 85.7666 542.186 119.112C542.052 155.862 542.156 154.004 539.906 159.624 537.837 164.792 533.497 170.08 528.735 173.236 525.754 175.211 521.651 176.991 517.754 178.001 514.654 178.805 513.474 178.929 508.011 179.022 504.592 179.083 501.568 179.075 501.291 179.007ZM516.836 131.383C523.19 128.365 526.484 121.761 525.468 114.08 524.333 105.505 517.686 100.182 508.683 100.639 500.083 101.076 494.348 106.695 493.682 115.332 493.197 121.639 496.175 127.737 501.17 130.664 504.065 132.36 506.125 132.817 510.383 132.705 514.05 132.609 514.409 132.535 516.836 131.383ZM125.166 151.743C114.534 150.586 106.019 146.478 98.8182 139.03L96.3248 136.452 102.328 130.443 108.331 124.433 111.037 127.236C116.875 133.285 123.01 135.837 131.678 135.821 138.99 135.806 143.992 133.583 146.247 129.34 147.295 127.368 147.316 122.912 146.285 120.677 144.476 116.75 139.496 113.75 128.187 109.775 124.676 108.541 120.429 106.888 118.751 106.103 108.324 101.228 103.462 94.608 102.674 84.2134 101.744 71.9625 108.11 62.0245 119.788 57.4974 124.337 55.7337 128.146 55.092 134.234 55.0638 137.374 55.0495 140.658 55.2266 142.13 55.4902 149.829 56.8687 157.821 60.9095 162.786 65.9334L164.794 67.9666 158.76 74.0079 152.726 80.0489 150.703 78.098C145.613 73.1855 141.076 71.2898 134.234 71.2157 127.231 71.14 122.393 73.5592 121.145 77.7611 120.492 79.9604 120.493 81.161 121.15 83.3737 122.407 87.6057 126.176 90.0189 138.266 94.3334 150.659 98.7567 155.594 101.52 159.459 106.201 162.63 110.042 164.244 113.87 164.988 119.319 165.792 125.204 164.95 131.126 162.616 135.995 158.889 143.769 151.649 148.795 141.055 150.962 137.659 151.657 128.505 152.107 125.163 151.743ZM202.776 151.575C187.883 149.715 176.026 138.733 173.543 124.503 172.522 118.643 173.074 111.757 175.002 106.307 178.402 96.7 187.72 88.221 197.747 85.609 205.021 83.7152 213.413 84.1969 220.086 86.8921 229.469 90.6822 236.543 99.5828 238.416 109.956 238.971 113.031 239.027 119.388 238.524 122.276L238.153 124.404 214.465 124.404 190.776 124.404 191.005 125.317C191.57 127.569 193.101 130.065 195.191 132.147 198.944 135.883 203.209 137.368 209.328 137.068 214.91 136.794 219.099 135.197 222.684 131.974L224.329 130.494 229.464 135.636 234.599 140.779 232.73 142.647C225.691 149.686 214.459 153.034 202.776 151.575ZM221.901 110.377C221.435 108.288 219.39 104.546 217.903 103.058 212.282 97.4376 200.985 97.7602 195.033 103.713 193.341 105.405 190.85 109.668 190.85 110.871 190.85 111.213 194.015 111.3 206.479 111.3L222.108 111.3ZM348.759 151.752C342.549 150.605 339.602 149.493 335.451 146.731 328.859 142.345 323.964 134.794 322.174 126.251 321.519 123.119 321.279 115.939 321.723 112.737 323.621 99.0666 332.757 88.4521 345.272 85.3772 349.347 84.3755 355.8 84.3845 359.678 85.3997 363.06 86.2821 366.592 88.0454 369.226 90.1682L371.269 91.8144 371.269 88.792 371.269 85.7696 380.005 85.7696 388.74 85.7696 388.74 118.192 388.74 150.613 380.005 150.613 371.269 150.613 371.269 147.574 371.269 144.535 369.169 146.235C366.616 148.303 362.457 150.406 359.51 151.119 357.348 151.642 350.378 152.056 348.759 151.756ZM358.837 135.474C363.577 134.717 367.861 131.664 369.999 127.52 371.714 124.193 372.11 122.409 372.104 118.02 372.098 113.467 371.369 110.853 369.195 107.599 367.538 105.117 365.714 103.593 362.682 102.158 360.403 101.078 360.245 101.053 355.814 101.053L351.278 101.053 348.675 102.296C344.529 104.276 341.535 107.781 340.125 112.308 339.393 114.658 339.314 121.146 339.987 123.563 342.379 132.145 349.902 136.899 358.837 135.474ZM581.926 151.575C573.288 150.579 565.503 146.649 558.866 139.937 557.136 138.187 555.72 136.656 555.72 136.536 555.72 136.416 557.232 134.813 559.079 132.972L562.438 129.626 563.009 130.458C564.14 132.109 568.025 135.931 570 137.336 572.75 139.292 574.967 140.361 578.464 141.412 582.344 142.579 590.69 142.92 594.682 142.075 600.305 140.885 605.136 137.474 606.963 133.403 608.671 129.595 608.432 123.776 606.407 119.875 603.976 115.195 599.298 112.257 587.135 107.774 575.837 103.609 571.42 101.202 567.644 97.1517 563.592 92.8042 561.975 88.2578 561.979 81.2307 561.983 74.8874 563.344 70.6336 566.664 66.586 569.766 62.8046 575.008 59.5974 580.415 58.1736 583.832 57.2738 591.734 56.9437 595.761 57.5326 603.161 58.6145 609.611 61.8866 615.097 67.3414L617.557 69.7868 614.192 73.1516 610.827 76.5163 608.388 74.1236C604.065 69.8819 599.659 67.4848 594.554 66.5958 591.174 66.0073 584.307 66.3543 581.829 67.2387 577.237 68.8771 574.565 71.0881 572.909 74.6202 572.097 76.3535 572.016 76.8945 572.016 80.5659 572.016 84.4542 572.061 84.6899 573.12 86.8494 575.326 91.3267 579.885 94.3184 590.327 98.1392 601.267 102.142 603.478 103.126 607.293 105.692 609.919 107.459 613.387 111.019 614.793 113.392 618.171 119.096 618.974 128.231 616.722 135.36 612.995 147.158 599.232 153.572 581.927 151.576ZM702.723 151.605C691.373 149.823 681.889 141.72 678.062 130.536 676.141 124.921 675.832 116.348 677.333 110.31 678.179 106.906 680.474 101.932 682.509 99.0898 684.22 96.7022 687.875 93.1088 690.221 91.5106 692.458 89.9858 696.87 87.9952 699.687 87.2396 702.948 86.3654 712.116 86.3384 715.31 87.1945 719.293 88.2623 723.466 90.6281 726.37 93.4645 727.809 94.8684 729.305 96.4704 729.696 97.0249L730.407 98.0326 730.415 92.7411 730.422 87.4497 735.126 87.4497 739.83 87.4497 739.83 119.031 739.83 150.613 735.126 150.613 730.422 150.613 730.422 145.375 730.422 140.137 729.135 141.765C725.61 146.226 720.06 149.892 714.967 151.123 712.31 151.766 705.456 152.036 702.717 151.606ZM715.109 142.222C718.694 141.305 721.465 139.744 724.071 137.174 728.863 132.447 730.825 127.125 730.82 118.863 730.818 113.939 730.176 110.798 728.419 107.118 726.446 102.985 722.811 99.1859 719.079 97.3588 712.43 94.103 703.002 94.5487 696.888 98.4078 692.543 101.15 688.923 105.758 687.261 110.665 686.001 114.383 685.686 120.889 686.57 124.974 688.381 133.345 694.766 140.063 702.95 142.207 706.343 143.096 711.665 143.102 715.108 142.222ZM249.646 118.191 249.646 85.7689 258.548 85.7689 267.452 85.7689 267.452 88.7913 267.452 91.8137 269.552 90.1164C274.089 86.4487 279.278 84.7056 285.763 84.6719 291.665 84.6411 295.22 85.6676 299.816 88.732 303.886 91.446 307.444 95.8738 309.355 100.606 310.99 104.653 311.105 106.349 311.117 126.624 311.124 136.99 311.031 146.628 310.912 148.042L310.694 150.613 302.008 150.613 293.322 150.613 293.322 130.683C293.322 108.793 293.329 108.925 291.276 105.82 289.955 103.825 287.026 101.705 284.601 100.987 281.911 100.191 277.848 100.289 275.432 101.208 272.753 102.229 270.107 104.724 268.719 107.542L267.619 109.776 267.523 130.194 267.427 150.613 258.536 150.613 249.646 150.613ZM404.195 118.191 404.195 85.7689 413.098 85.7689 422.001 85.7689 422.001 88.8213 422.001 91.8737 423.469 90.5854C430.915 84.0483 443.182 82.6744 452.134 87.3739 458.103 90.5081 463.255 97.0782 464.839 103.576 465.642 106.869 465.792 113.395 465.515 132.89L465.263 150.613 456.577 150.613 447.892 150.613 447.798 130.034 447.704 109.455 446.778 107.57C445.69 105.357 442.781 102.469 440.721 101.557 438.879 100.742 435.743 100.247 433.593 100.431 428.787 100.844 425.168 103.393 423.089 107.83L422.17 109.791 422.076 130.202 421.982 150.613 413.089 150.613 404.196 150.613ZM644.418 123.398 644.418 96.1845 636.345 96.1845 628.271 96.1845 628.365 91.9007 628.459 87.617 636.438 87.5269 644.418 87.4369 644.418 74.172 644.418 60.907 649.121 60.907 653.825 60.907 653.825 74.1781 653.825 87.4489 661.72 87.4489 669.616 87.4489 669.616 91.8167 669.616 96.1845 661.72 96.1845 653.825 96.1845 653.825 123.399 653.825 150.613 649.121 150.613 644.418 150.613ZM758.987 119.031 758.987 87.4489 763.692 87.4489 768.397 87.4489 768.404 91.5646 768.412 95.6803 769.125 94.6725C770.633 92.5686 773.679 89.9138 775.983 88.7117 779.134 87.0647 781.896 86.4524 786.21 86.4464 790.21 86.4412 792.753 86.9754 795.77 88.4506 797.886 89.4884 801.983 92.6151 801.983 93.1936 801.983 93.3797 800.647 94.9126 799.011 96.6002L796.032 99.6676 794.532 98.4393C791.875 96.2633 789.527 95.4154 785.7 95.2503 777.596 94.9006 771.961 98.5774 769.342 105.928 768.569 108.11 768.569 108.131 768.464 129.362L768.359 150.613 763.67 150.613 758.98 150.613ZM821.477 123.398 821.477 96.1845 813.418 96.1845 805.352 96.1845 805.352 91.8167 805.352 87.4489 813.418 87.4489 821.477 87.4489 821.477 74.178 821.477 60.9069 826.181 60.9069 830.886 60.9069 830.886 74.178 830.886 87.4489 838.78 87.4489 846.673 87.4489 846.673 91.8167 846.673 96.1845 838.78 96.1845 830.886 96.1845 830.886 123.398 830.886 150.613 826.181 150.613 821.477 150.613Z" transform="matrix(1 0 0 1.01613 1114.5 1279.05)"/></g></g></g></g></svg>

package/webpack.config.js

@@ -0,0 +1,68 @@
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+
+module.exports = {
+  mode: "production",
+  entry: {
+    "senangstart-icon": "./src/index.js",
+  },
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "[name].min.js",
+    library: {
+      name: "SenangStartIcons",
+      type: "umd",
+      export: "default",
+    },
+    globalObject: "this",
+    clean: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["@babel/preset-env"],
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
+      },
+      {
+        test: /\.json$/,
+        type: "json",
+      },
+      {
+        test: /\.svg$/,
+        type: "asset/source",
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "senangstart.min.css",
+    }),
+  ],
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          format: {
+            comments: false,
+          },
+        },
+        extractComments: false,
+      }),
+      new CssMinimizerPlugin(),
+    ],
+  },
+  devtool: "source-map",
+};