删除不需要的文件及提交移动端的代码
This commit is contained in:
zlwu committed
1 parent
86f65df783
commit
134f711349
751 files changed
+3888
-115501
No files matched your search
@@ -0,0 +1,348 @@
|
||||
# 📚 图标管理系统使用指南
|
||||
|
||||
## 🎯 概述
|
||||
|
||||
项目采用了 **双图标系统**：
|
||||
- **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
|
||||
1. 访问 [iconfont.cn](https://www.iconfont.cn/)
|
||||
2. 搜索需要的图标
|
||||
3. 下载 SVG 格式
|
||||
|
||||
#### 2. 转换为 data URI
|
||||
使用在线工具或以下代码：
|
||||
|
||||
```javascript
|
||||
// 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` 中添加：
|
||||
|
||||
```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. 在页面中使用
|
||||
```vue
|
||||
<template>
|
||||
<text class="iconfont icon-add-circle" style="font-size: 24px; color: #1890ff;"></text>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 方法二：iconfont.cn 项目同步（适合大量图标）
|
||||
|
||||
#### 1. 创建 iconfont 项目
|
||||
1. 在 iconfont.cn 注册账号
|
||||
2. 创建新项目
|
||||
3. 添加需要的图标到项目
|
||||
|
||||
#### 2. 下载代码
|
||||
1. 点击"下载至本地"
|
||||
2. 选择 "Font class" 或 "Unicode" 方式
|
||||
3. 下载解压得到文件
|
||||
|
||||
#### 3. 替换项目文件
|
||||
```bash
|
||||
# 将下载的文件复制到项目
|
||||
cp iconfont.css mobile/src/static/fonts/
|
||||
cp iconfont.ttf mobile/src/static/fonts/
|
||||
cp iconfont.woff mobile/src/static/fonts/
|
||||
```
|
||||
|
||||
#### 4. 更新字体引用（如需要）
|
||||
在 `uni.scss` 或相关文件中更新字体路径：
|
||||
|
||||
```scss
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('./static/fonts/iconfont.woff') format('woff'),
|
||||
url('./static/fonts/iconfont.ttf') format('truetype');
|
||||
}
|
||||
```
|
||||
|
||||
## 🎨 使用规范
|
||||
|
||||
### 基础用法
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### 响应式尺寸
|
||||
```vue
|
||||
<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 编辑器
|
||||
- [SVG Editor](https://svg-edit.github.io/svgedit/)
|
||||
- [Boxy SVG](https://boxy-svg.com/)
|
||||
|
||||
### Data URI 转换工具
|
||||
```javascript
|
||||
// 工具函数：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...")};
|
||||
}
|
||||
`;
|
||||
```
|
||||
|
||||
### 批量添加脚本
|
||||
```javascript
|
||||
// 批量生成图标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. 命名规范
|
||||
```css
|
||||
/* ✅ 推荐命名 */
|
||||
.icon-user /* 功能性图标 */
|
||||
.icon-user-add /* 带操作的图标 */
|
||||
.icon-arrow-right /* 方向性图标 */
|
||||
|
||||
/* ❌ 避免命名 */
|
||||
.icon-1 /* 无意义编号 */
|
||||
.icon-temp /* 临时命名 */
|
||||
```
|
||||
|
||||
### 2. 颜色管理
|
||||
```scss
|
||||
// 使用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. 尺寸规范
|
||||
```scss
|
||||
// 标准尺寸系统
|
||||
.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
|
||||
|
||||
```vue
|
||||
<!-- 迁移前 -->
|
||||
<u-icon name="logout" size="20" color="#fff"></u-icon>
|
||||
|
||||
<!-- 迁移后 -->
|
||||
<text class="iconfont icon-close" style="font-size: 20px; color: #fff;"></text>
|
||||
```
|
||||
|
||||
### 批量替换工具
|
||||
```bash
|
||||
# 使用正则表达式批量替换
|
||||
# 将 <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. 按需加载
|
||||
```javascript
|
||||
// 动态导入图标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 优化
|
||||
```css
|
||||
/* 使用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](https://iconify.design/) - 100,000+ 开源图标
|
||||
- [Feather Icons](https://feathericons.com/) - 简洁线性图标
|
||||
- [Heroicons](https://heroicons.com/) - Tailwind CSS图标
|
||||
|
||||
## ❓ 常见问题
|
||||
|
||||
### Q: 图标不显示怎么办？
|
||||
A: 检查以下几点：
|
||||
1. CSS文件是否正确引入
|
||||
2. 类名是否拼写正确
|
||||
3. 字体文件路径是否正确
|
||||
4. 浏览器是否支持data URI
|
||||
|
||||
### Q: 如何修改图标颜色？
|
||||
A: 使用 `color` 或 `fill` 属性：
|
||||
```css
|
||||
.my-icon {
|
||||
color: #1890ff; /* 对于SVG data URI */
|
||||
fill: #1890ff; /* 对于字体图标 */
|
||||
}
|
||||
```
|
||||
|
||||
### Q: 图标模糊怎么解决？
|
||||
A: 确保图标尺寸为偶数像素：
|
||||
```css
|
||||
.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 方式，兼容性最好，性能最优。
|
||||
Reference in new issue
Block a user