Appearance
Icon 图标
Wyg Plus Icons 提供了一套常用的图标集合。
上传您的 SVG 图标
TIP
您可以点击“all upload to server”按钮，提交上传您所有文件列表中的 SVG 文件图标。或者，您也可以点击文件列表中单个 SVG 文件图标，进行单独的上传。如果上传失败，您同样可以点击文件列表中的单个 SVG 文件图标，重新尝试上传。
WARNING
文件名规范要求
为了确保正确的使用和显示，要求所有 SVG 文件的文件名遵循以下规范：
文件名只能包含小写字母和连字符（-）文件名必须是英文且不能为 "icon"文件名必须以 .svg 作为扩展名
例如，允许的文件名示例包括：star.svg、travel-booking.svg 。
请确保您的文件名符合上述规范，以确保能够正确识别和使用您的 SVG 文件。
引入
- 一：
javascript
// 引入 icon 名称对应组件
import { TravelBooking } from '@wyg-plus/icons-vue'- 二：
javascript
// 引入 WygIcon 组件
import { WygIcon } from '@wyg-plus/icons-vue'用法
用法一：使用 Vue3 内置特殊元素 component
html
<component :is="TravelBooking" color="#41b883" size="20" />用法二：使用 icon 名称对应组件
html
<TravelBooking color="#41b883" size="20" />用法三：结合 wyg-icon 使用
html
<wyg-icon color="#41b883" size="20" >
<TravelBooking />
</wyg-icon>用法四：使用 class 来定义图标，例如：class="wyg-xxx-yyy"
html
<wyg-icon color="#41b883" :size="20" class="wyg-travel-booking">
这是使用 class 来定义图标
</wyg-icon>
<span class="wyg-travel-booking" style="color: #41b883; font-size: 60px;"></span>
<button class="wyg-travel-booking"></button>
<div class="wyg-travel-booking"></div>WARNING
您需要引入样式 import '@wyg-plus/icons-vue/dist/index.css'
WARNING
使用 class 来定义图标：需要引入字体图标样式 import '@wyg-plus/icons-vue/dist/font.css'
DANGER
当使用 wyg-icon 组件并采用 class 方式来定义图标时，直接使用
stroke和stroke-width属性是无效的。如果采用其它标签并使用 class 定义图标，则直接使用
stroke和stroke-width属性将不起作用，因为它们是 SVG 标签的属性。此外，SVG 标签的其他属性可能也会受到影响。另外，剩余其它属性也同样无效，您可以通过重新定义新的 CSS 样式来实现。
Wyg Playground 演练场
您可以点击 这里 访问 Playground 演练场，在这里您可以实时编辑和预览组件效果，快速测试和调试。
基本使用
图标颜色
使用 color 属性设置图标颜色
图标大小
使用 size 属性设置图标大小
图标轮廓的颜色
使用 stroke 属性设置图标轮廓的颜色
TIP
您可以结合 stroke-width 属性来设置图标轮廓的宽度
图标旋转
使用 spin 属性来实现图标旋转。此外，您还可以通过调整 spin-rate 属性来控制旋转速度
徽标提示
设置 dot 属性后，会在图标右上角展示一个小红点；设置 badge-content 属性后，会在图标右上角展示相应的徽标
徽标最大值
使用 badge-max 属性，当 badge-content 的数值超过最大值时，会自动显示为 {max}+
自定义徽标颜色
使用 badge-color 属性来设置徽标的颜色
自定义徽标位置
使用 badge-position 属性来设置徽标的位置
自定义徽标位置偏移
使用 badge-offset 属性来设置徽标的偏移量
WygIcon Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| color | svg 的 fill 颜色 | string | — |
| size | SVG 图标的大小 | number | — |
| stroke | SVG 图标的轮廓颜色 | string | — |
| stroke-width | SVG 图标的轮廓宽度 | number string | — |
| spin | SVG 图标是否旋转 | boolean | — |
| spin-rate | SVG 图标旋转速度，单位 s (秒) | number | 2 |
| rotate | SVG 图标旋转角度，单位 deg | number | — |
| dot | 是否显示图标右上角小红点 | boolean | false |
| badge-content | 图标右上角徽标的内容 | number string | — |
| badge-max | 徽标内容最大值，超过最大值会显示 {max}+，仅当 badge-content 为数字时有效 | number | 99 |
| badge-color | 徽标背景颜色 | string | #ee0a24 |
| badge-position | 徽标位置，可选值为 top-left, top-right, bottom-left, bottom-right | string | top-right |
| badge-offset | 徽标位置的偏移量，默认单位为 px | number[] | [ ] |
| show-zero | 当 badge-content 为数字 0 或字符串 '0' 时，是否展示徽标 | boolean | true |
WygIcon Slots
| 名称 | 说明 |
|---|---|
| default | 自定义默认内容 |
图标集合
TIP
您可以点击图标复制代码。