图片 URL 图标

使用自定义图片 URL 作为图标，支持品牌标识、自定义图标等场景。

🚀 基本使用

<script setup>
import { QxsIcon } from '@qxs-bns/components'
</script>

<template>
  <!-- 在线图片 -->
  <QxsIcon 
    icon="https://api.iconify.design/ep:home.svg"
    :size="24"
  />
  
  <!-- 本地图片 -->
  <QxsIcon 
    icon="/logo.svg"
    :size="32"
    color="#409eff"
  />
  
  <!-- 带错误处理 -->
  <QxsIcon 
    icon="https://example.com/icon.png"
    :size="24"
    fallback="i-ep:picture"
    loading="i-ep:loading"
  />
</template>

🛡️ 错误处理

加载状态和错误回退

<template>
  <QxsIcon 
    icon="https://slow-server.com/icon.svg"
    :size="24"
    loading="i-ep:loading"
    fallback="i-ep:picture"
    @load="onImageLoad"
    @error="onImageError"
  />
</template>

<script setup>
function onImageLoad() {
  console.log('图片加载成功')
}

function onImageError() {
  console.log('图片加载失败，显示回退图标')
}
</script>

🎨 支持的图片格式

• SVG：矢量图形，支持颜色修改
• PNG：透明背景图片
• JPG/JPEG：普通图片
• WebP：现代图片格式
• GIF：动画图片（不推荐用作图标）

🎯 使用场景

1. 品牌标识

<template>
  <!-- 公司 Logo -->
  <QxsIcon 
    icon="/assets/company-logo.svg"
    :size="32"
  />
  
  <!-- 第三方服务图标 -->
  <QxsIcon 
    icon="https://github.com/favicon.ico"
    :size="16"
  />
</template>

2. 自定义图标

<template>
  <!-- 自定义设计的图标 -->
  <QxsIcon 
    icon="/assets/custom-icons/special-feature.svg"
    :size="24"
    color="#ff6b6b"
  />
</template>

3. 动态图标

<template>
  <QxsIcon 
    :icon="userAvatar || '/default-avatar.png'"
    :size="40"
    fallback="i-ep:user"
  />
</template>

<script setup>
import { ref } from 'vue'

const userAvatar = ref('https://api.example.com/user/123/avatar')
</script>

⚠️ 注意事项

性能考虑

• 缓存策略：确保图片服务器设置了合适的缓存头
• 图片大小：控制图片文件大小，避免影响加载性能
• CDN 使用：使用 CDN 加速图片加载

安全考虑

• CORS 策略：确保跨域图片可以正常加载
• HTTPS：在 HTTPS 站点中使用 HTTPS 图片链接
• 内容验证：验证图片来源的可信度

兼容性

• 回退方案：始终提供 fallback 图标
• 加载状态：使用 loading 图标提升用户体验

🔧 高级功能

关于 QxsIcon 组件的更多功能（旋转、翻转、事件等），请参考：

👉 QxsIcon 组件文档

💡 最佳实践

1. 使用 SVG：优先使用 SVG 格式，支持颜色修改和缩放
2. 设置回退：总是设置 fallback 图标
3. 优化性能：使用适当的图片大小和格式
4. 错误处理：监听加载事件，提供用户反馈