From 3430e6c7648b3e4bfd1804308755aa38f58a4da5 Mon Sep 17 00:00:00 2001 From: feige996 <1020102647@qq.com> Date: Thu, 12 Jun 2025 20:29:22 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E6=96=87=E6=A1=A3):=20=E6=9B=B4=E6=96=B0SV?= =?UTF-8?q?G=E5=9B=BE=E6=A0=87=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E?= =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=AD=A3=E6=A0=BC=E5=BC=8F=E5=92=8C=E8=A1=A8?= =?UTF-8?q?=E8=BF=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/base/6-svg.md | 27 +++++++++++---------------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/docs/base/6-svg.md b/docs/base/6-svg.md index ac39aec..ad6524b 100644 --- a/docs/base/6-svg.md +++ b/docs/base/6-svg.md @@ -2,7 +2,7 @@ 上一章《五、图标篇》主要介绍了 `线上图标` 的使用,今天带给大家本地 `SVG` 图标的使用。 -本地 `SVG` 图标使用方式主要有: +> 注意:`小程序` 和 `APP` 都不支持 `SVG` 标签,只能通过 `image` 的方式使用。即下面的 `image + src` 方式。 - `image + src` 方式 @@ -10,11 +10,11 @@ - `相对目录` 图标 - `线上地址` 图标 -> **`图片`** 也是使用上面几种方式。 +> PS:`小程序` 和 `APP` 对 `图片` 也是这面几种方式,下面统一称为 “图片”。 ## `image + src` 方式 -根据图片地址不同,分为 2 种:`static目录`图标 , `相对目录`图标。 +如果图片在项目里面,根据放的位置不同,分为 2 种:`static目录`图标 , `相对目录`图标。 ### 1. `static目录` 图标 @@ -29,13 +29,13 @@ 这种方式需要先引入,再使用,代码编写如下: ```html - - + + ``` ### 3. `线上地址` 图标 @@ -48,9 +48,10 @@ ``` -## 其他 +## H5 额外支持的其他方式 -> `SvgComponent` 方式 和 `SvgIcon` 方式,仅 `H5端` 适用,感兴趣的可以阅读下 +> `SvgComponent` 方式 和 `SvgIcon` 方式,仅 `H5端` 适用,感兴趣的可以阅读下。 +> 因为只有 `H5端` 支持,所以 unibest 没有引入这些,但是其他 `web` 项目可以参考。 :::details @@ -170,12 +171,6 @@ createSvgIconsPlugin({ ## 总结 -本地 `svg` 的使用方式,如果要全端适配,那就只能使用 `image + src` 的方式。 - -> `SvgComponent` 依赖 `vite-svg-loader` 插件 -> -> `SvgIcon` 依赖 `vite-plugin-svg-icons` 插件 - -其他 2 种方式 —— `SvgComponent` + `SvgIcon` 仅 `h5` 端生效,其他端都不能用,既然不能使用,那就删了,对应的 2 个插件也一起删了,目前 `base` 分支已经删了。 +适用于跨端的 `svg 和 图片` 的使用方式,只有 `image + src` 的方式。其他方式只能用于 `web` 端,仅供参考。 全文完~