@atooyu/uxto-ui 1.1.1 → 1.1.3

package/dist/index.mjs

@@ -653,12 +653,33 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       return !!getIcon(props.name);
     });
     const iconSrc = computed(() => {
-      return getIcon(props.name);
+      return getIcon(props.name) || "";
     });
     const sizePx = 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 = computed(() => {
       const size = typeof props.size === "number" ? props.size : parseInt(props.size);
       const style = {
@@ -666,11 +687,20 @@ const _sfc_main$G = /* @__PURE__ */ 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;
       }
       return style;
     });
+    const svgStyle = computed(() => {
+      return {
+        width: sizePx.value,
+        height: sizePx.value
+      };
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("view", {
         class: normalizeClass(["u-icon", { "u-icon--spin": __props.spin }]),
@@ -681,14 +711,14 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           key: 0,
           class: "u-icon__svg",
           src: iconSrc.value,
-          style: normalizeStyle({ width: sizePx.value, height: sizePx.value }),
+          style: normalizeStyle(svgStyle.value),
           mode: "aspectFit"
         }, null, 12, _hoisted_1$A)) : (openBlock(), createElementBlock("text", _hoisted_2$q, toDisplayString(__props.name), 1))
       ], 6);
     };
   }
 });
-const UIcon = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-5d845d48"]]);
+const UIcon = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-535b2661"]]);
 const __default__$F = {
   options: {
     virtualHost: true,