Skip to content

Commit

Permalink
docs: update
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaoxian521
xiaoxian521 committed Jun 5, 2024
1 parent 01f7911 commit be4f8f3
Showing 1 changed file with 14 additions and 14 deletions.
28 changes: 14 additions & 14 deletions docs/01.指南/02.进阶/01.图标.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,17 @@ permalink: /pages/icon/

#### 存放目录

可以看到下图，平台将 `iconfont` 放到了 [src/assets/iconfont](https://gitee.com/yiming_chang/pure-admin-thin/tree/main/src/assets/iconfont) 文件夹里，这是平台内置的 `iconfont` ，最好不要删除。如果您项目也用到了 `iconfont` ，可以在同级目录`src/assets`下新建文件夹，比如`iconfont-business`，用来存放您项目的 `iconfont` 文件
可以看到下图，平台将 `iconfont` 放到了 [src/assets/iconfont](https://github.com/pure-admin/vue-pure-admin/tree/main/src/assets/iconfont) 文件夹里，这是平台内置的 `iconfont` ，最好不要删除。如果您项目也用到了 `iconfont` ，可以在同级目录`src/assets`下新建文件夹，比如`iconfont-business`，用来存放您项目的 `iconfont` 文件

![iconfont](~@alias/img/icon/iconfont.png)

#### 如何导入

来到 `src/main.ts` 文件下参考 [导入](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/main.ts#L22-L23) 即可
来到 `src/main.ts` 文件下参考 [导入](https://github.com/pure-admin/vue-pure-admin/blob/main/src/main.ts#L24-L25) 即可

#### 组件使用

平台对 `iconfont` 进行了组件的封装 [FontIcon](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/components/ReIcon/src/iconfont.ts)
平台对 `iconfont` 进行了组件的封装 [FontIcon](https://github.com/pure-admin/vue-pure-admin/blob/main/src/components/ReIcon/src/iconfont.ts)

::: details

Expand All @@ -61,7 +61,7 @@ permalink: /pages/icon/

#### 存放目录

可以看到下图，平台将 `svg` 放到了 [src/assets/svg](https://gitee.com/yiming_chang/pure-admin-thin/tree/main/src/assets/svg) 文件夹里，该文件夹作为 `svg` 文件统一存放处
可以看到下图，平台将 `svg` 放到了 [src/assets/svg](https://github.com/pure-admin/vue-pure-admin/tree/main/src/assets/svg) 文件夹里，该文件夹作为 `svg` 文件统一存放处

![svg](~@alias/img/icon/svg.png)

Expand Down Expand Up @@ -111,14 +111,14 @@ import backTop from "@/assets/svg/back_top.svg?component";
安装完成后，来到 `package.json` 文件，看到如下图出现 `@iconify-icons/ep` 代表安装成功（当然平台已经内置了，您就不需要安装了）

:::tip 温馨提示
安装完成后，还应该将其引入到 [exclude](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/build/optimize.ts#L25) 配置里哦 😊
安装完成后，还应该将其引入到 [exclude](https://github.com/pure-admin/vue-pure-admin/blob/main/build/optimize.ts#L57) 配置里哦 😊
:::

![ep-icon](~@alias/img/icon/ep-icon.png)

#### 基础用法

- [iconifyIconOffline](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/components/ReIcon/src/iconifyIconOffline.ts)<Badge text="具体实现代码"/>
- [iconifyIconOffline](https://github.com/pure-admin/vue-pure-admin/blob/main/src/components/ReIcon/src/iconifyIconOffline.ts)<Badge text="具体实现代码"/>

```Vue
<script setup lang="ts">
Expand Down Expand Up @@ -155,7 +155,7 @@ import Check from "@iconify-icons/ep/check";

### 基础用法

- [IconifyIconOnline](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/components/ReIcon/src/iconifyIconOnline.ts)<Badge text="具体实现代码"/>
- [IconifyIconOnline](https://github.com/pure-admin/vue-pure-admin/blob/main/src/components/ReIcon/src/iconifyIconOnline.ts)<Badge text="具体实现代码"/>

```Vue
<template>
Expand Down Expand Up @@ -200,16 +200,16 @@ import Check from "@iconify-icons/ep/check";

## 通用图标 `useRenderIcon` (hooks)

- [useRenderIcon](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/components/ReIcon/src/hooks.ts)<Badge text="具体实现代码"/>
- [useRenderIcon](https://github.com/pure-admin/vue-pure-admin/blob/main/src/components/ReIcon/src/hooks.ts#L12)<Badge text="具体实现代码"/>

### 参数

- 接收二个参数，第一个参数 `icon` ，第二个参数 `attrs` ，返回值类型 `FunctionalComponent`

| **参数属性** | **说明** | **类型** |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| `icon` | 图标 | `FunctionalComponent` 、`string` |
| `attrs` | 图标属性、样式配置，拥有十四个属性 [查看详情](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/components/ReIcon/src/types.ts#L1) | `iconType` |
| **参数属性** | **说明** | **类型** |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| `icon` | 图标 | `FunctionalComponent` 、`string` |
| `attrs` | 图标属性、样式配置，拥有十四个属性 [查看详情](https://github.com/pure-admin/vue-pure-admin/blob/main/src/components/ReIcon/src/types.ts#L1) | `iconType` |

### 基础用法

Expand Down Expand Up @@ -328,7 +328,7 @@ import { useRenderIcon } from "@/components/ReIcon/src/hooks";
![online](~@alias/img/icon/online.jpg)

:::warning
需注意在线图标的共性是都有一个 `:` 符号，所以这也要求您在使用本地图标时，本地图标名绝对不能存在 `:` 可以使用驼峰写法 [具体逻辑代码](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/components/ReIcon/src/hooks.ts#L53)
需注意在线图标的共性是都有一个 `:` 符号，所以这也要求您在使用本地图标时，本地图标名绝对不能存在 `:` 可以使用驼峰写法 [具体逻辑代码](https://github.com/pure-admin/vue-pure-admin/blob/main/src/components/ReIcon/src/hooks.ts#L53)
:::

## 图标插件
Expand All @@ -344,5 +344,5 @@ import { useRenderIcon } from "@/components/ReIcon/src/hooks";
[iconify 图标终极解决方案](https://www.bilibili.com/video/BV17S4y1J79d/?vd_source=5a992808de6229d78e7810536c5f9ab3) <Badge text="视频教程推荐"/>

::: tip 温馨提示 ❤️
`IconifyIconOffline`、`IconifyIconOnline`、`FontIcon` 这三个图标组件比较常用，所以均已 [全局注册](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/main.ts#L34-L41)，可直接在 `vue` 文件中引入即可，不需要在局部注册了
`IconifyIconOffline`、`IconifyIconOnline`、`FontIcon` 这三个图标组件比较常用，所以均已 [全局注册](https://github.com/pure-admin/vue-pure-admin/blob/main/src/main.ts#L36-L43)，可直接在 `vue` 文件中引入即可，不需要在局部注册了
:::

0 comments on commit be4f8f3

Please sign in to comment.