@atooyu/uxto-ui 1.1.2 → 1.1.3

package/dist/index.js

@@ -655,29 +655,33 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
       return !!getIcon(props.name);
     });
     const iconSrc = vue.computed(() => {
-      const svgData = getIcon(props.name);
-      if (!svgData) return "";
-      if (props.color && svgData.startsWith("data:image/svg+xml")) {
-        try {
-          let svgContent = decodeURIComponent(svgData.replace("data:image/svg+xml,", ""));
-          if (svgContent.includes('fill="currentColor"')) {
-            svgContent = svgContent.replace(/fill="currentColor"/g, `fill="${props.color}"`);
-          } else if (!svgContent.includes("fill=")) {
-            svgContent = svgContent.replace("<svg", `<svg fill="${props.color}"`);
-          } else {
-            svgContent = svgContent.replace(/fill="[^"]*"/g, `fill="${props.color}"`);
-          }
-          return "data:image/svg+xml," + encodeURIComponent(svgContent);
-        } catch (e) {
-          return svgData;
-        }
-      }
-      return svgData;
+      return getIcon(props.name) || "";
     });
     const sizePx = vue.computed(() => {
       const size = typeof props.size === "number" ? props.size : parseInt(props.size);
       return size + "px";
     });
+    const colorToFilter = (color) => {
+      const colorMap = {
+        "#ff9500": "invert(58%) sepia(97%) saturate(1833%) hue-rotate(351deg) brightness(101%) contrast(101%)",
+        "#12b6af": "invert(47%) sepia(85%) saturate(475%) hue-rotate(131deg) brightness(92%) contrast(92%)",
+        "#333333": "invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)",
+        "#666666": "invert(45%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)",
+        "#999999": "invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)",
+        "#ffffff": "invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)",
+        "#ff4d4f": "invert(46%) sepia(98%) saturate(1925%) hue-rotate(335deg) brightness(101%) contrast(101%)"
+      };
+      const lowerColor = color.toLowerCase();
+      if (colorMap[lowerColor]) {
+        return colorMap[lowerColor];
+      }
+      const hex = color.replace("#", "");
+      const r = parseInt(hex.substring(0, 2), 16);
+      const g = parseInt(hex.substring(2, 4), 16);
+      const b = parseInt(hex.substring(4, 6), 16);
+      const hue = Math.atan2(Math.sqrt(3) * (g - b), 2 * r - g - b) * 180 / Math.PI;
+      return `invert(1) sepia(1) saturate(10000%) hue-rotate(${hue}deg)`;
+    };
     const iconStyle = vue.computed(() => {
       const size = typeof props.size === "number" ? props.size : parseInt(props.size);
       const style = {
@@ -685,6 +689,9 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
         width: size + "px",
         height: size + "px"
       };
+      if (props.color && isSvgIcon.value) {
+        style.filter = colorToFilter(props.color);
+      }
       if (props.color && !isSvgIcon.value) {
         style.color = props.color;
       }
@@ -713,7 +720,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const UIcon = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-632e7780"]]);
+const UIcon = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-535b2661"]]);
 const __default__$F = {
   options: {
     virtualHost: true,