阿里图标库引入
This commit is contained in:
冯辉
407
docs/阿里图标库快速开始.md
Normal file
407
docs/阿里图标库快速开始.md
Normal file
@@ -0,0 +1,407 @@
|
||||
# 阿里图标库快速开始 🚀
|
||||
|
||||
## 一、5分钟快速上手
|
||||
|
||||
### Step 1: 下载图标文件（2分钟）
|
||||
|
||||
1. 访问 https://www.iconfont.cn/
|
||||
2. 登录后搜索图标，点击"添加入库"
|
||||
3. 购物车 → 添加至项目（没有项目先创建）
|
||||
4. 我的项目 → 下载至本地
|
||||
|
||||
### Step 2: 放置文件（1分钟）
|
||||
|
||||
解压下载的文件，将以下4个文件复制到 `static/iconfont/` 目录：
|
||||
|
||||
```
|
||||
✅ iconfont.css
|
||||
✅ iconfont.ttf
|
||||
✅ iconfont.woff
|
||||
✅ iconfont.woff2
|
||||
```
|
||||
|
||||
### Step 3: 修改CSS路径（1分钟）
|
||||
|
||||
打开 `static/iconfont/iconfont.css`，将字体路径修改为相对路径：
|
||||
|
||||
```css
|
||||
@font-face {
|
||||
font-family: "iconfont";
|
||||
src: url('./iconfont.woff2?t=xxx') format('woff2'),
|
||||
url('./iconfont.woff?t=xxx') format('woff'),
|
||||
url('./iconfont.ttf?t=xxx') format('truetype');
|
||||
}
|
||||
```
|
||||
|
||||
### Step 4: 全局引入（1分钟）
|
||||
|
||||
在 `App.vue` 的 `<style>` 标签中添加：
|
||||
|
||||
```vue
|
||||
<style>
|
||||
/* 引入阿里图标库 */
|
||||
@import url("/static/iconfont/iconfont.css");
|
||||
</style>
|
||||
```
|
||||
|
||||
### Step 5: 开始使用 ✨
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<!-- 直接使用 -->
|
||||
<text class="iconfont icon-home"></text>
|
||||
|
||||
<!-- 或使用组件 -->
|
||||
<IconfontIcon name="home" :size="48" color="#13C57C" />
|
||||
</template>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 二、推荐使用方式
|
||||
|
||||
### 方式 A：使用封装的组件（最推荐）👍
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<IconfontIcon name="phone" :size="40" color="#13C57C" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
**优点：**
|
||||
- ✅ 统一管理，易于维护
|
||||
- ✅ 支持动态修改大小和颜色
|
||||
- ✅ 语义清晰
|
||||
- ✅ 支持点击事件
|
||||
|
||||
### 方式 B：使用配置常量（推荐）
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<IconfontIcon
|
||||
:name="ICONS.HOME"
|
||||
:size="ICON_SIZES.LARGE"
|
||||
:color="ICON_COLORS.PRIMARY"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
|
||||
import { ICONS, ICON_SIZES, ICON_COLORS } from '@/config/icons'
|
||||
</script>
|
||||
```
|
||||
|
||||
**优点：**
|
||||
- ✅ 统一图标名称
|
||||
- ✅ 避免拼写错误
|
||||
- ✅ IDE 自动补全
|
||||
- ✅ 便于重构
|
||||
|
||||
### 方式 C：直接使用类名
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<text class="iconfont icon-home" style="font-size: 32rpx; color: #333;"></text>
|
||||
</template>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 三、常用场景示例
|
||||
|
||||
### 场景1：导航栏图标
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="navbar">
|
||||
<IconfontIcon name="arrow-left" :size="40" @click="goBack" />
|
||||
<text class="title">页面标题</text>
|
||||
<IconfontIcon name="share" :size="36" @click="share" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const goBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
const share = () => {
|
||||
// 分享逻辑
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 场景2：按钮图标
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<button class="primary-btn">
|
||||
<IconfontIcon name="phone" :size="32" color="#FFFFFF" />
|
||||
<text>手机号登录</text>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.primary-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 场景3：列表项图标
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="list-item">
|
||||
<IconfontIcon name="location" :size="36" color="#13C57C" />
|
||||
<text class="text">工作地点</text>
|
||||
<IconfontIcon name="arrow-right" :size="28" color="#999" />
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 场景4：状态图标
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="status-box">
|
||||
<IconfontIcon
|
||||
:name="status.icon"
|
||||
:size="64"
|
||||
:color="status.color"
|
||||
/>
|
||||
<text>{{ status.text }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const orderStatus = ref('success')
|
||||
|
||||
const status = computed(() => {
|
||||
const map = {
|
||||
success: { icon: 'success', color: '#13C57C', text: '提交成功' },
|
||||
error: { icon: 'error', color: '#F44336', text: '提交失败' },
|
||||
loading: { icon: 'loading', color: '#256BFA', text: '处理中...' }
|
||||
}
|
||||
return map[orderStatus.value]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 四、组件API说明
|
||||
|
||||
### IconfontIcon 组件
|
||||
|
||||
**Props:**
|
||||
|
||||
| 参数 | 类型 | 默认值 | 说明 |
|
||||
|------|------|--------|------|
|
||||
| name | String | - | 图标名称（必填），如：'home' 或 'icon-home' |
|
||||
| size | String/Number | 32 | 图标大小，单位rpx |
|
||||
| color | String | - | 图标颜色，支持十六进制、rgb等 |
|
||||
| bold | Boolean | false | 是否加粗 |
|
||||
|
||||
**Events:**
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|--------|------|----------|
|
||||
| click | 点击图标时触发 | event |
|
||||
|
||||
**使用示例:**
|
||||
|
||||
```vue
|
||||
<IconfontIcon
|
||||
name="home"
|
||||
:size="48"
|
||||
color="#13C57C"
|
||||
:bold="true"
|
||||
@click="handleClick"
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 五、配置说明
|
||||
|
||||
### 图标名称配置（config/icons.js）
|
||||
|
||||
```javascript
|
||||
export const ICONS = {
|
||||
HOME: 'home',
|
||||
USER: 'user',
|
||||
SEARCH: 'search',
|
||||
// ... 更多图标
|
||||
}
|
||||
```
|
||||
|
||||
### 尺寸预设
|
||||
|
||||
```javascript
|
||||
export const ICON_SIZES = {
|
||||
MINI: 24, // 24rpx
|
||||
SMALL: 28, // 28rpx
|
||||
NORMAL: 32, // 32rpx（默认）
|
||||
LARGE: 40, // 40rpx
|
||||
XLARGE: 48, // 48rpx
|
||||
}
|
||||
```
|
||||
|
||||
### 颜色预设
|
||||
|
||||
```javascript
|
||||
export const ICON_COLORS = {
|
||||
PRIMARY: '#13C57C', // 主色调
|
||||
SECONDARY: '#256BFA', // 次要色
|
||||
SUCCESS: '#13C57C', // 成功
|
||||
WARNING: '#FF9800', // 警告
|
||||
DANGER: '#F44336', // 危险
|
||||
TEXT: '#333333', // 文本色
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 六、常见问题
|
||||
|
||||
### Q1: 图标不显示？
|
||||
|
||||
**检查清单：**
|
||||
- [ ] 文件是否已复制到 `static/iconfont/` 目录
|
||||
- [ ] CSS路径是否正确修改
|
||||
- [ ] 是否已在 App.vue 中引入
|
||||
- [ ] 图标类名是否正确（如：`icon-home`）
|
||||
- [ ] 清除缓存并重新编译
|
||||
|
||||
### Q2: 如何查看可用的图标？
|
||||
|
||||
1. 打开下载包中的 `demo_index.html`
|
||||
2. 或查看 `iconfont.css` 中的类名
|
||||
3. 类名格式通常为 `.icon-xxx:before`
|
||||
|
||||
### Q3: 如何更新图标？
|
||||
|
||||
1. 在阿里图标库添加新图标到项目
|
||||
2. 重新下载至本地
|
||||
3. 替换 `static/iconfont/` 下的所有文件
|
||||
4. 清除缓存，重新编译
|
||||
|
||||
### Q4: 小程序能用在线链接吗？
|
||||
|
||||
❌ 不能！微信小程序必须使用本地字体文件。
|
||||
|
||||
---
|
||||
|
||||
## 七、最佳实践
|
||||
|
||||
### ✅ 推荐做法
|
||||
|
||||
1. **统一管理图标名称**
|
||||
```javascript
|
||||
// 使用配置文件
|
||||
import { ICONS } from '@/config/icons'
|
||||
```
|
||||
|
||||
2. **使用封装的组件**
|
||||
```vue
|
||||
<IconfontIcon name="home" />
|
||||
```
|
||||
|
||||
3. **预设常用尺寸和颜色**
|
||||
```javascript
|
||||
import { ICON_SIZES, ICON_COLORS } from '@/config/icons'
|
||||
```
|
||||
|
||||
4. **语义化命名**
|
||||
```javascript
|
||||
const ICONS = {
|
||||
HOME: 'home', // ✅ 语义清晰
|
||||
USER_CENTER: 'user', // ✅ 明确用途
|
||||
}
|
||||
```
|
||||
|
||||
### ❌ 不推荐做法
|
||||
|
||||
1. **硬编码图标名称**
|
||||
```vue
|
||||
<text class="iconfont icon-home"></text> <!-- ❌ 不推荐 -->
|
||||
```
|
||||
|
||||
2. **使用在线链接（小程序）**
|
||||
```css
|
||||
@import url("//at.alicdn.com/xxx.css"); /* ❌ 小程序不支持 */
|
||||
```
|
||||
|
||||
3. **直接使用 Unicode**
|
||||
```vue
|
||||
<text class="iconfont"></text> <!-- ❌ 不直观 -->
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 八、测试页面
|
||||
|
||||
已为你创建了测试页面，可以查看各种使用方式：
|
||||
|
||||
**路径:** `pages/demo/iconfont-demo.vue`
|
||||
|
||||
在 `pages.json` 中添加页面配置即可访问：
|
||||
|
||||
```json
|
||||
{
|
||||
"path": "pages/demo/iconfont-demo",
|
||||
"style": {
|
||||
"navigationBarTitleText": "图标示例"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 九、相关文件
|
||||
|
||||
```
|
||||
项目结构：
|
||||
├── components/
|
||||
│ └── IconfontIcon/
|
||||
│ └── IconfontIcon.vue # 图标组件
|
||||
├── config/
|
||||
│ └── icons.js # 图标配置
|
||||
├── static/
|
||||
│ └── iconfont/
|
||||
│ ├── iconfont.css # 样式文件
|
||||
│ ├── iconfont.ttf # 字体文件
|
||||
│ ├── iconfont.woff # 字体文件
|
||||
│ ├── iconfont.woff2 # 字体文件
|
||||
│ └── README.md # 说明文档
|
||||
├── pages/
|
||||
│ └── demo/
|
||||
│ └── iconfont-demo.vue # 测试页面
|
||||
└── docs/
|
||||
├── 阿里图标库引入指南.md # 详细文档
|
||||
└── 阿里图标库快速开始.md # 本文档
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 十、总结
|
||||
|
||||
✅ **记住这三步：**
|
||||
|
||||
1. **下载** - 从阿里图标库下载文件
|
||||
2. **放置** - 复制到 `static/iconfont/` 目录
|
||||
3. **引入** - 在 `App.vue` 中引入 CSS
|
||||
|
||||
🎉 **就是这么简单！**
|
||||
|
||||
如有问题，请参考详细文档：`docs/阿里图标库引入指南.md`
|
||||
|
||||
Reference in New Issue
Block a user