以下是常见图标风格类型及其使用场景：
- 线框风格 (Outline/Line)
- 特点：轮廓线条，无填充
- 场景：
- 界面主要图标
- 需要轻量视觉效果时
- 强调清晰度和简洁性
- 示例：
mdi:home-outline,ri:user-line
- 填充风格 (Filled/Solid)
- 特点：完全填充，视觉重量较重
- 场景：
- 需要强调或突出显示时
- 作为状态指示器
- 暗色背景上使用
- 示例：
mdi:home,ri:user-fill
- 双色风格 (Duotone)
- 特点：使用两种不同透明度
- 场景：
- 现代化界面
- 需要层次感时
- 特殊视觉效果
- 示例：
ph:user-duotone
- 细线风格 (Light/Thin)
- 特点：极细的线条
- 场景：
- 精致的界面设计
- 小尺寸显示
- 高分辨率屏幕
- 示例：
mdi-light:home
常用图标库及文档
- Material Design Icons (MDI)
- 文档：materialdesignicons.com/
- 特点：Google Material Design 风格
- 使用：
mdi:icon-name
- Remix Icon
- 文档：remixicon.com/
- 特点：简洁现代，两种风格（线框/填充）
- 使用：
ri:icon-name
- Phosphor Icons
- 文档：phosphoricons.com/
- 特点：六种权重变体
- 使用：
ph:icon-name
- Carbon Icons (IBM)
- 文档：carbondesignsystem.com/guidelines/…
- 特点：企业级设计系统
- 使用：
carbon:icon-name
- Heroicons
- 文档：heroicons.com/
- 特点：Tailwind 生态系统
- 使用：
heroicons:icon-name
Iconify 集成使用
<script setup lang="ts">
import { Icon } from '@iconify/vue'
</script>
<template>
<!-- 基础用法 -->
<Icon icon="mdi:home" />
<!-- 设置样式 -->
<Icon
icon="mdi:home"
class="text-2xl text-blue-500"
:style="{ transform: 'rotate(45deg)' }"
/>
<!-- 设置大小和颜色 -->
<Icon
icon="mdi:home"
width="24"
height="24"
color="#666"
/>
</template>
图标选择建议
- 一致性原则
- 同一项目使用同一图标库
- 保持风格统一（全部使用线框或填充）
- 可访问性
- 确保图标尺寸足够清晰
- 考虑色盲用户的识别度
- 性能考虑
- 按需加载图标
- 考虑使用本地打包的图标集
- 响应式设计
- 不同屏幕尺寸调整图标大小
- 考虑高分辨率屏幕的显示效果
实用工具
- Iconify 在线搜索
- icon-sets.iconify.design/
- 可搜索所有支持的图标库
- Icônes
- icones.js.org/
- 提供更好的预览和搜索体验
- SVG 编辑工具
- svgomg.net/
- 优化 SVG 图标文件
