@atooyu/uxto-ui 1.1.0 → 1.1.2

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-632e7780] {
   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-632e7780] {
+  animation: u-icon-spin-632e7780 1s linear infinite;
 }
-.u-icon__inner[data-v-5d845d48] {
+.u-icon__inner[data-v-632e7780] {
   font-family: inherit;
   line-height: 1;
 }
-.u-icon__svg[data-v-5d845d48] {
+.u-icon__svg[data-v-632e7780] {
   display: block;
   object-fit: contain;
 }
-@keyframes u-icon-spin-5d845d48 {
+@keyframes u-icon-spin-632e7780 {
 from {
     transform: rotate(0deg);
 }

package/package.json

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

package/src/components/u-icon/icons/location.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
+</svg>

package/src/components/u-icon/icons/scan.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M3 11h8V3H3v8zm2-6h4v4H5V5zm8-2v8h8V3h-8zm6 6h-4V5h4v4zM3 21h8v-8H3v8zm2-6h4v4H5v-4zm13-2h-2v3h-3v2h3v3h2v-3h3v-2h-3v-3z"/>
+</svg>

package/src/components/u-icon/index.ts

@@ -85,6 +85,8 @@ import bookmark from './icons/bookmark.svg'
 import bookmarkO from './icons/bookmark-o.svg'
 import chat from './icons/chat.svg'
 import clipboard from './icons/clipboard.svg'
+import location from './icons/location.svg'
+import scan from './icons/scan.svg'
 
 // 图标映射表
 export const icons: Record<string, string> = {
@@ -208,6 +210,10 @@ export const icons: Record<string, string> = {
   'clock': clock,
   'time': clock,
   'calendar': clock,
+
+  // 位置和扫码
+  'location': location,
+  'scan': scan,
 }
 
 // 获取图标 SVG 内容

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,33 @@ const isSvgIcon = computed(() => {
 
 // 获取图标 SVG 资源
 const iconSrc = computed(() => {
-  return getIcon(props.name)
+  const svgData = getIcon(props.name)
+  if (!svgData) return ''
+
+  // 如果指定了颜色，替换 SVG 中的 fill 颜色
+  if (props.color && svgData.startsWith('data:image/svg+xml')) {
+    try {
+      // 解码 SVG 内容
+      let svgContent = decodeURIComponent(svgData.replace('data:image/svg+xml,', ''))
+
+      // 替换 currentColor 或添加 fill 属性
+      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 {
+        // 替换已有的 fill 颜色
+        svgContent = svgContent.replace(/fill="[^"]*"/g, `fill="${props.color}"`)
+      }
+
+      // 重新编码
+      return 'data:image/svg+xml,' + encodeURIComponent(svgContent)
+    } catch (e) {
+      return svgData
+    }
+  }
+
+  return svgData
 })
 
 // 尺寸转换为 px
@@ -65,13 +91,20 @@ const iconStyle = computed(() => {
     width: size + 'px',
     height: size + 'px'
   }
-  // SVG 图标通过 fill="currentColor" 支持颜色
-  // 但 image 标签不支持直接设置颜色，需要通过 filter 或特殊处理
+  // 非 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 +147,4 @@ export default {
     transform: rotate(360deg);
   }
 }
-</style>
+</style>