/* ========================================
寻宠平台 - 像素级SVG图标库
版本: V3.0 像素级优化版
用途: 完整的图标系统，禁止使用emoji
特点: 像素级精确、支持多尺寸、多颜色
======================================== */
/* ========== 图标基础样式 ========== */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: inherit;
transition: all 0.2s ease;
}
.icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.5px;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 图标尺寸层级 */
.icon-xs { width: 16px; height: 16px; }
.icon-sm { width: 20px; height: 20px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 48px; height: 48px; }
/* 图标颜色 */
.icon-primary { color: var(--primary-color); }
.icon-secondary { color: var(--text-secondary); }
.icon-success { color: var(--success-color); }
.icon-warning { color: var(--warning-color); }
.icon-danger { color: var(--danger-color); }
.icon-info { color: var(--info-color); }
/* ========== 导航图标 ========== */
/* 首页图标 - Home */
.icon-home::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 搜索图标 - Search */
.icon-search::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 发布图标 - Add/Publish */
.icon-add::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 消息图标 - Message/Chat */
.icon-message::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 个人中心图标 - User */
.icon-user::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* ========== 功能图标 ========== */
/* 地图图标 - Map */
.icon-map::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 定位图标 - Location */
.icon-location::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 相机图标 - Camera */
.icon-camera::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 分享图标 - Share */
.icon-share::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 收藏图标 - Favorite/Heart (默认线性) */
.icon-heart::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 收藏图标 - 已收藏状态 (填充) */
.icon-heart-fill::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 图片图标 - Image */
.icon-image::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 视频图标 - Video */
.icon-video::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 电话图标 - Phone */
.icon-phone::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 邮件图标 - Email */
.icon-email::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 链接图标 - Link */
.icon-link::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* ========== 状态图标 ========== */
/* 成功图标 - Success/Check */
.icon-success::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 成功图标 - 填充版 */
.icon-success-fill::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 失败图标 - Error/X */
.icon-error::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 失败图标 - 填充版 */
.icon-error-fill::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 警告图标 - Warning */
.icon-warning::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 警告图标 - 填充版 */
.icon-warning-fill::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 信息图标 - Info */
.icon-info::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 信息图标 - 填充版 */
.icon-info-fill::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 加载图标 - Loading (动画旋转) */
.icon-loading {
animation: icon-spin 1s linear infinite;
}
.icon-loading::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
@keyframes icon-spin {
to { transform: rotate(360deg); }
}
/* ========== 操作图标 ========== */
/* 编辑图标 - Edit */
.icon-edit::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 删除图标 - Delete/Trash */
.icon-delete::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 删除图标 - 填充版 */
.icon-delete-fill::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 刷新图标 - Refresh */
.icon-refresh::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 关闭图标 - Close */
.icon-close::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 设置图标 - Settings */
.icon-settings::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 过滤图标 - Filter */
.icon-filter::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 排序图标 - Sort */
.icon-sort::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 下载图标 - Download */
.icon-download::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 上传图标 - Upload */
.icon-upload::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* ========== 业务图标 ========== */
/* 宠物图标 - Pet */
.icon-pet::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 悬赏图标 - Reward/Money */
.icon-reward::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 线索图标 - Clue/Lightbulb */
.icon-clue::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 团队图标 - Team/Users */
.icon-team::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 领养图标 - Adopt */
.icon-adopt::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 时间图标 - Time/Clock */
.icon-time::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 日历图标 - Calendar */
.icon-calendar::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 文件图标 - File/Document */
.icon-file::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 通知图标 - Notification/Bell */
.icon-notification::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 通知图标 - 填充版 */
.icon-notification-fill::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 评论图标 - Comment */
.icon-comment::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 眼睛图标 - Eye/View */
.icon-eye::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 眼睛关闭图标 - Eye Off */
.icon-eye-off::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 更多图标 - More/Menu */
.icon-more::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 扫描图标 - Scan */
.icon-scan::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 回退图标 - Back/Arrow Left */
.icon-back::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 前进图标 - Forward/Arrow Right */
.icon-forward::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 上箭头图标 - Arrow Up */
.icon-arrow-up::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 下箭头图标 - Arrow Down */
.icon-arrow-down::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 下拉图标 - Chevron Down */
.icon-chevron-down::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 上拉图标 - Chevron Up */
.icon-chevron-up::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 帮助图标 - Help */
.icon-help::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 锁图标 - Lock */
.icon-lock::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 解锁图标 - Unlock */
.icon-unlock::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 星星图标 - Star */
.icon-star::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 星星图标 - 填充版 */
.icon-star-fill::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 标签图标 - Tag */
.icon-tag::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 书签图标 - Bookmark */
.icon-bookmark::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 书签图标 - 填充版 */
.icon-bookmark-fill::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 打印图标 - Print */
.icon-print::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 复制图标 - Copy */
.icon-copy::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* 钱包图标 - Wallet */
.icon-wallet::before {
content: '';
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
/* ========== 图标使用示例 ========== */
/* 示例1: 导航栏图标 */
.nav-icon {
width: 20px;
height: 20px;
color: var(--text-secondary);
}
.nav-icon.active {
color: var(--primary-color);
}
/* 示例2: 按钮内图标 */
.btn .icon {
margin-right: 8px;
width: 20px;
height: 20px;
}
.btn-icon-only {
padding: 8px;
}
.btn-icon-only .icon {
width: 24px;
height: 24px;
}
/* 示例3: 状态图标 */
.status-icon {
width: 16px;
height: 16px;
}
.status-icon-large {
width: 48px;
height: 48px;
}
/* 示例4: 空状态图标 */
.empty-state .icon {
width: 64px;
height: 64px;
color: var(--text-disabled);
opacity: 0.5;
}
/* ========== 图标组合 ========== */
/* 图标加文字 */
.icon-text {
display: inline-flex;
align-items: center;
gap: 8px;
}
.icon-text .icon {
width: 20px;
height: 20px;
}
/* 图标加徽章 */
.icon-badge {
position: relative;
display: inline-flex;
}
.icon-badge .icon {
width: 24px;
height: 24px;
}
.icon-badge::after {
content: attr(data-badge);
position: absolute;
top: -4px;
right: -4px;
min-width: 16px;
height: 16px;
padding: 2px 4px;
background-color: var(--danger-color);
color: white;
font-size: 12px;
border-radius: 50%;
text-align: center;
line-height: 12px;
}
/* ========== 响应式图标 ========== */
@media (max-width: 768px) {
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 28px; height: 28px; }
.icon-xl { width: 40px; height: 40px; }
}
/* ========== 图标动画 ========== */
/* 点击反馈 */
.icon-clickable {
cursor: pointer;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.icon-clickable:hover {
transform: scale(1.05);
}
.icon-clickable:active {
transform: scale(0.95);
opacity: 0.7;
}
/* 旋转动画 */
.icon-rotate {
animation: icon-spin 2s linear infinite;
}
/* 淡入动画 */
.icon-fade-in {
animation: iconFadeIn 0.3s ease-in;
}
@keyframes iconFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 跳动动画 */
.icon-pulse {
animation: iconPulse 1s ease-in-out infinite;
}
@keyframes iconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}