@atooyu/uxto-ui 1.1.1 → 1.1.3

package/dist/style.css

@@ -321,25 +321,25 @@ to {
 .u-modal__button--confirm[data-v-9552a05f] {
   color: #00a29a;
   font-weight: 500;
-}.u-icon[data-v-5d845d48] {
+}.u-icon[data-v-535b2661] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-style: normal;
   line-height: 1;
 }
-.u-icon--spin[data-v-5d845d48] {
-  animation: u-icon-spin-5d845d48 1s linear infinite;
+.u-icon--spin[data-v-535b2661] {
+  animation: u-icon-spin-535b2661 1s linear infinite;
 }
-.u-icon__inner[data-v-5d845d48] {
+.u-icon__inner[data-v-535b2661] {
   font-family: inherit;
   line-height: 1;
 }
-.u-icon__svg[data-v-5d845d48] {
+.u-icon__svg[data-v-535b2661] {
   display: block;
   object-fit: contain;
 }
-@keyframes u-icon-spin-5d845d48 {
+@keyframes u-icon-spin-535b2661 {
 from {
     transform: rotate(0deg);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atooyu/uxto-ui",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "跨平台 UI 组件库 - 支持 Android、iOS、鸿蒙",
   "keywords": [
     "uxto-ui",

package/src/components/u-icon/u-icon.vue

@@ -10,7 +10,7 @@
       v-if="isSvgIcon && iconSrc"
       class="u-icon__svg"
       :src="iconSrc"
-      :style="{ width: sizePx, height: sizePx }"
+      :style="svgStyle"
       mode="aspectFit"
     />
     <!-- Emoji/文字模式 -->
@@ -48,7 +48,7 @@ const isSvgIcon = computed(() => {
 
 // 获取图标 SVG 资源
 const iconSrc = computed(() => {
-  return getIcon(props.name)
+  return getIcon(props.name) || ''
 })
 
 // 尺寸转换为 px
@@ -57,6 +57,38 @@ const sizePx = computed(() => {
   return size + 'px'
 })
 
+// 将颜色转换为 CSS filter
+const colorToFilter = (color: string): string => {
+  // 预定义颜色的 filter 值
+  const colorMap: Record<string, string> = {
+    '#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%)',
+  }
+
+  // 检查是否有预定义的 filter
+  const lowerColor = color.toLowerCase()
+  if (colorMap[lowerColor]) {
+    return colorMap[lowerColor]
+  }
+
+  // 动态计算 filter（简化版本，适用于纯色图标）
+  // 将 hex 转换为 RGB
+  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)
+
+  // 使用 invert + sepia + hue-rotate 组合
+  // 这是一个近似方案
+  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)
@@ -65,13 +97,27 @@ const iconStyle = computed(() => {
     width: size + 'px',
     height: size + 'px'
   }
-  // SVG 图标通过 fill="currentColor" 支持颜色
-  // 但 image 标签不支持直接设置颜色，需要通过 filter 或特殊处理
+
+  // SVG 图标通过 filter 设置颜色
+  if (props.color && isSvgIcon.value) {
+    style.filter = colorToFilter(props.color)
+  }
+
+  // 非 SVG 图标设置颜色
   if (props.color && !isSvgIcon.value) {
     style.color = props.color
   }
+
   return style
 })
+
+// SVG 图标样式
+const svgStyle = computed(() => {
+  return {
+    width: sizePx.value,
+    height: sizePx.value
+  }
+})
 </script>
 
 <script lang="ts">
@@ -114,4 +160,4 @@ export default {
     transform: rotate(360deg);
   }
 }
-</style>
+</style>