# SVG 篇
上一章《五、图标篇》主要介绍了 `线上图标` 的使用,今天带给大家本地 `SVG` 图标的使用。
> 注意:`小程序` 和 `APP` 都不支持 `SVG` 标签,只能通过 `image` 的方式使用。即下面的 `image + src` 方式。
- `image + src` 方式
- `static目录` 图标
- `相对目录` 图标
- `线上地址` 图标
> PS:`小程序` 和 `APP` 对 `图片` 也是这面几种方式,下面统一称为 “图片”。
## `image + src` 方式
如果图片在项目里面,根据放的位置不同,分为 2 种:`static目录`图标 , `相对目录`图标。
### 1. `static目录` 图标
这种方式直接编写代码即可,如下:
```html
```
### 2. `相对目录` 图标
这种方式需要先引入,再使用,代码编写如下:
```html
```
### 3. `线上地址` 图标
这种方式直接使用,代码编写如下:
```html
```
## H5 额外支持的其他方式
> `SvgComponent` 方式 和 `SvgIcon` 方式,仅 `H5端` 适用,感兴趣的可以阅读下。
> 因为只有 `H5端` 支持,所以 unibest 没有引入这些,但是其他 `web` 项目可以参考。
:::details
### `SvgComponent` 方式
从 `Web端` 过来的同学都知道 `SvgComponent` 这种方式,只需要引入 `vite-svg-loader` 插件即可,支持 `3种` 方式引入 `svg`: `url`, `raw`, `component`。
- URL
SVGs can be imported as URLs using the `?url` suffix:
```js
import iconUrl from './my-icon.svg?url'
// 'data:image/svg+xml...'
```
Used in template:
```html
```
- Raw
SVGs can be imported as strings using the `?raw` suffix:
```js
import iconRaw from './my-icon.svg?raw'
// '...'
```
Used in template:
```html
{{ iconRaw }}
```
- Component
SVGs can be explicitly imported as Vue components using the `?component` suffix:
```js
import IconComponent from './my-icon.svg?component'
//
```
Used in template:
```html
```
但是目前经过测试,只有 `url` 的方式所有端可以使用,与上面的 `image + src - 相对目录 图标` 是一个效果。至于 `component` 只有 `H5端生效`,其他端不行。
### `SvgIcon` 方式
从 `Web端` 过来的同学都知道 `SvgIcon` 这种方式,只需要引入 `vite-plugin-svg-icons` 插件 + `vite 配置`,再编写一个通用的 `SvgIcon` 即可,但是同样只有 `H5端生效`,其他端不行。
`vite` 配置如下:
```
createSvgIconsPlugin({
// 指定要缓存的文件夹
iconDirs: [path.resolve(process.cwd(), 'src/assets')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
}),
```
如上,只需要把 `svg` 放到 `src/assets` 目录即可。
`SvgIcon` 代码如下:
```html
```
使用方式如下:
```html
```
> `SvgComponent` 依赖 `vite-svg-loader` 插件
>
> `SvgIcon` 依赖 `vite-plugin-svg-icons` 插件
:::
## 总结
适用于跨端的 `svg 和 图片` 的使用方式,只有 `image + src` 的方式。其他方式只能用于 `web` 端,仅供参考。
全文完~