fix(文档): 更新SVG图标使用说明,修正格式和表述

This commit is contained in:
feige996 2025-06-12 20:29:22 +08:00
parent d740a73b0e
commit 3430e6c764

View File

@ -2,7 +2,7 @@
上一章《五、图标篇》主要介绍了 `线上图标` 的使用,今天带给大家本地 `SVG` 图标的使用。 上一章《五、图标篇》主要介绍了 `线上图标` 的使用,今天带给大家本地 `SVG` 图标的使用。
本地 `SVG` 图标使用方式主要有: > 注意:`小程序``APP` 都不支持 `SVG` 标签,只能通过 `image` 的方式使用。即下面的 `image + src` 方式。
- `image + src` 方式 - `image + src` 方式
@ -10,11 +10,11 @@
- `相对目录` 图标 - `相对目录` 图标
- `线上地址` 图标 - `线上地址` 图标
> **`图片`** 也是使用上面几种方式 > PS`小程序``APP``图片` 也是这面几种方式,下面统一称为 “图片”
## `image + src` 方式 ## `image + src` 方式
根据图片地址不同,分为 2 种:`static目录`图标 `相对目录`图标。 如果图片在项目里面,根据放的位置不同,分为 2 种:`static目录`图标 `相对目录`图标。
### 1. `static目录` 图标 ### 1. `static目录` 图标
@ -29,13 +29,13 @@
这种方式需要先引入,再使用,代码编写如下: 这种方式需要先引入,再使用,代码编写如下:
```html ```html
<template>
<image :src="iconUrl" mode="scaleToFill" class="h-20 w-20" />
</template>
<script lang="ts" setup> <script lang="ts" setup>
import iconUrl from './demo.svg' import iconUrl from './demo.svg'
</script> </script>
<template>
<image :src="iconUrl" mode="scaleToFill" class="h-20 w-20" />
</template>
``` ```
### 3. `线上地址` 图标 ### 3. `线上地址` 图标
@ -48,9 +48,10 @@
</template> </template>
``` ```
## 其他 ## H5 额外支持的其他方式
> `SvgComponent` 方式 和 `SvgIcon` 方式,仅 `H5端` 适用,感兴趣的可以阅读下 > `SvgComponent` 方式 和 `SvgIcon` 方式,仅 `H5端` 适用,感兴趣的可以阅读下。
> 因为只有 `H5端` 支持,所以 unibest 没有引入这些,但是其他 `web` 项目可以参考。
:::details :::details
@ -170,12 +171,6 @@ createSvgIconsPlugin({
## 总结 ## 总结
本地 `svg` 的使用方式,如果要全端适配,那就只能使用 `image + src` 的方式。 适用于跨端的 `svg 和 图片` 的使用方式,只有 `image + src` 的方式。其他方式只能用于 `web` 端,仅供参考。
> `SvgComponent` 依赖 `vite-svg-loader` 插件
>
> `SvgIcon` 依赖 `vite-plugin-svg-icons` 插件
其他 2 种方式 —— `SvgComponent` + `SvgIcon``h5` 端生效,其他端都不能用,既然不能使用,那就删了,对应的 2 个插件也一起删了,目前 `base` 分支已经删了。
全文完~ 全文完~