cykj/hzdyjs

0 Fork 0

Files

T

zlwu 134f711349 删除不需要的文件及提交移动端的代码

2025-08-06 16:01:27 +08:00

9.0 KiB

Raw Blame History

📚 图标管理系统使用指南

🎯 概述

项目采用了 双图标系统：

iconfont 自定义图标 (推荐) - 基于 SVG data URI 的轻量级图标系统
uview-plus 图标 (辅助) - UI库自带图标，部分图标存在显示问题

📁 文件结构

mobile/src/static/fonts/
├── iconfont.css                 # 主图标文件（SVG data URI）
├── iconfont.ttf                 # 字体文件（可选）
└── iconfont.woff                # 字体文件（可选）

mobile/src/
├── main.js                      # 引入图标CSS
├── pages/iconfont-demo/         # 图标演示页面
└── pages/uview-icon-test/       # uview图标问题测试页面

🚀 添加新图标 - 超级简单！

方法一：SVG Data URI（推荐）

优势：

✅ 无需下载字体文件
✅ 支持彩色图标
✅ 完美适配所有平台
✅ 加载速度最快

操作步骤：

1. 从 iconfont.cn 下载 SVG

访问 iconfont.cn
搜索需要的图标
下载 SVG 格式

2. 转换为 data URI

使用在线工具或以下代码：

// SVG 转 data URI 工具函数
function svgToDataUri(svgContent) {
    const encoded = encodeURIComponent(svgContent)
        .replace(/'/g, '%27')
        .replace(/"/g, '%22');
    return `data:image/svg+xml;charset=utf8,${encoded}`;
}

// 示例
const svgContent = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'>
    <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z'/>
</svg>`;

3. 添加到 CSS 文件

在 mobile/src/static/fonts/iconfont.css 中添加：

/* 新增图标示例 */
.icon-add-circle {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z'/%3E%3C/svg%3E");
}

4. 在页面中使用

<template>
    <text class="iconfont icon-add-circle" style="font-size: 24px; color: #1890ff;"></text>
</template>

方法二：iconfont.cn 项目同步（适合大量图标）

1. 创建 iconfont 项目

在 iconfont.cn 注册账号
创建新项目
添加需要的图标到项目

2. 下载代码

点击"下载至本地"
选择 "Font class" 或 "Unicode" 方式
下载解压得到文件

3. 替换项目文件

# 将下载的文件复制到项目
cp iconfont.css mobile/src/static/fonts/
cp iconfont.ttf mobile/src/static/fonts/
cp iconfont.woff mobile/src/static/fonts/

4. 更新字体引用（如需要）

在 uni.scss 或相关文件中更新字体路径：

@font-face {
  font-family: 'iconfont';
  src: url('./static/fonts/iconfont.woff') format('woff'),
       url('./static/fonts/iconfont.ttf') format('truetype');
}

🎨 使用规范

基础用法

<template>
    <!-- 方式1：直接使用class -->
    <text class="iconfont icon-user"></text>
    
    <!-- 方式2：自定义样式 -->
    <text class="iconfont icon-setting custom-icon"></text>
    
    <!-- 方式3：动态样式 -->
    <text 
        class="iconfont icon-home"
        :style="{
            fontSize: '24px',
            color: iconColor
        }"
    ></text>
</template>

<style>
.custom-icon {
    font-size: 20px;
    color: #52c41a;
}
</style>

响应式尺寸

<template>
    <!-- 小图标 -->
    <text class="iconfont icon-user icon-sm"></text>
    
    <!-- 中等图标 -->
    <text class="iconfont icon-user icon-md"></text>
    
    <!-- 大图标 -->
    <text class="iconfont icon-user icon-lg"></text>
</template>

<style>
.icon-sm { width: 16px; height: 16px; font-size: 16px; }
.icon-md { width: 24px; height: 24px; font-size: 24px; }
.icon-lg { width: 32px; height: 32px; font-size: 32px; }
</style>

📋 当前可用图标列表

基础图标

icon-user - 用户
icon-lock - 锁定
icon-eye - 显示
icon-eye-close - 隐藏
icon-home - 首页
icon-setting - 设置

操作图标

icon-add - 添加
icon-close - 关闭
icon-check - 确认
icon-search - 搜索
icon-arrow-right - 右箭头

功能图标

icon-message - 消息
icon-phone - 电话
icon-mail - 邮件
icon-login - 登录

🔧 管理工具

在线 SVG 编辑器

Data URI 转换工具

// 工具函数：SVG 转 data URI
function createSvgDataUri(svgPath, viewBox = "0 0 24 24") {
    const svg = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='${viewBox}' fill='currentColor'><path d='${svgPath}'/></svg>`;
    return `url("data:image/svg+xml;charset=utf8,${encodeURIComponent(svg)}")`;
}

// 使用示例
const newIconCSS = `
.icon-new-feature {
  background-image: ${createSvgDataUri("M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10...")};
}
`;

批量添加脚本

// 批量生成图标CSS的脚本
const icons = [
    { name: 'star', path: 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z' },
    { name: 'heart', path: 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' }
];

function generateIconCSS(icons) {
    return icons.map(icon => `
.icon-${icon.name} {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='${icon.path}'/%3E%3C/svg%3E");
}`).join('\n');
}

🎯 最佳实践

1. 命名规范

/* ✅ 推荐命名 */
.icon-user          /* 功能性图标 */
.icon-user-add      /* 带操作的图标 */
.icon-arrow-right   /* 方向性图标 */

/* ❌ 避免命名 */
.icon-1             /* 无意义编号 */
.icon-temp          /* 临时命名 */

2. 颜色管理

// 使用CSS变量管理图标颜色
:root {
    --icon-primary: #1890ff;
    --icon-success: #52c41a;
    --icon-warning: #faad14;
    --icon-error: #ff4d4f;
}

.icon-primary { color: var(--icon-primary); }
.icon-success { color: var(--icon-success); }
.icon-warning { color: var(--icon-warning); }
.icon-error { color: var(--icon-error); }

3. 尺寸规范

// 标准尺寸系统
.icon-xs { width: 12px; height: 12px; }  // 超小
.icon-sm { width: 16px; height: 16px; }  // 小
.icon-md { width: 24px; height: 24px; }  // 中（默认）
.icon-lg { width: 32px; height: 32px; }  // 大
.icon-xl { width: 48px; height: 48px; }  // 超大

🔄 迁移指南

从 uview 图标迁移到 iconfont

<!-- 迁移前 -->
<u-icon name="logout" size="20" color="#fff"></u-icon>

<!-- 迁移后 -->
<text class="iconfont icon-close" style="font-size: 20px; color: #fff;"></text>

批量替换工具

# 使用正则表达式批量替换
# 将 <u-icon name="logout" 替换为 <text class="iconfont icon-close"
find ./src -name "*.vue" -exec sed -i 's/<u-icon name="logout"/<text class="iconfont icon-close"/g' {} \;

🚀 性能优化

1. 按需加载

// 动态导入图标CSS（大型应用）
const loadIconFont = async () => {
    if (!document.querySelector('#iconfont-css')) {
        const link = document.createElement('link');
        link.id = 'iconfont-css';
        link.rel = 'stylesheet';
        link.href = './static/fonts/iconfont.css';
        document.head.appendChild(link);
    }
};

2. CDN 优化

/* 使用CDN加载字体文件 */
@font-face {
  font-family: 'iconfont';
  src: url('https://cdn.example.com/fonts/iconfont.woff') format('woff');
}

🛠️ 开发工具

VS Code 插件推荐

SVG Viewer - 预览SVG文件
CSS Peek - 快速查看CSS定义
IconFont Helper - iconfont图标提示

图标搜索工具

Iconify - 100,000+ 开源图标
Feather Icons - 简洁线性图标
Heroicons - Tailwind CSS图标

❓ 常见问题

Q: 图标不显示怎么办？

A: 检查以下几点：

CSS文件是否正确引入
类名是否拼写正确
字体文件路径是否正确
浏览器是否支持data URI

Q: 如何修改图标颜色？

A: 使用 color 或 fill 属性：

.my-icon {
    color: #1890ff;  /* 对于SVG data URI */
    fill: #1890ff;   /* 对于字体图标 */
}

Q: 图标模糊怎么解决？

A: 确保图标尺寸为偶数像素：

.icon-clear {
    width: 24px;   /* ✅ 偶数 */
    height: 24px;  /* ✅ 偶数 */
}

📞 技术支持

项目位置: mobile/src/static/fonts/
演示页面: /pages/iconfont-demo/index
测试页面: /pages/uview-icon-test/index
文档更新: 2025-01-07

✨ 总结: iconfont 图标系统让您轻松管理图标，添加新图标只需要复制粘贴几行CSS代码！推荐使用 SVG data URI 方式，兼容性最好，性能最优。

9.0 KiB Raw Blame History Unescape Escape