Icon 图标

Wyg Plus Icons 提供了一套常用的图标集合。

上传您的 SVG 图标

TIP

您可以点击“all upload to server”按钮，提交上传您所有文件列表中的 SVG 文件图标。或者，您也可以点击文件列表中单个 SVG 文件图标，进行单独的上传。如果上传失败，您同样可以点击文件列表中的单个 SVG 文件图标，重新尝试上传。

WARNING

文件名规范要求

为了确保正确的使用和显示，要求所有 SVG 文件的文件名遵循以下规范：

• 文件名只能包含小写字母和连字符（-）
• 文件名必须是英文且不能为 "icon"
• 文件名必须以 .svg 作为扩展名

例如，允许的文件名示例包括：star.svg、travel-booking.svg 。

请确保您的文件名符合上述规范，以确保能够正确识别和使用您的 SVG 文件。

引入

• 一：

// 引入 icon 名称对应组件
import { WTravelBookingIcon } from '@wyg/icons-plus-vue'

• 二：

// 引入 WygIcon 组件
import { WygIcon } from '@wyg/icons-plus-vue'

用法

用法一：使用 Vue3 内置特殊元素 component

<component :is="WTravelBookingIcon" color="#41b883" size="20" />

用法二：使用 icon 名称对应组件

<w-travel-booking-icon color="#41b883" size="20" />

用法三：结合 wyg-icon 使用

<wyg-icon color="#41b883" size="20" >
  <w-travel-booking-icon />
</wyg-icon>

用法四：使用 class 来定义图标，例如：class="wyg-xxx-yyy"

<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/icons-plus-vue/dist/index.css'

WARNING

使用 class 来定义图标：需要引入字体图标样式 import '@wyg/icons-plus-vue/dist/font.css'

DANGER

• 当使用 wyg-icon 组件并采用 class 方式来定义图标时，直接使用 stroke 和 stroke-width 属性是无效的。

• 如果采用其它标签并使用 class 定义图标，则直接使用 stroke 和 stroke-width 属性将不起作用，因为它们是 SVG 标签的属性。此外，SVG 标签的其他属性可能也会受到影响。另外，剩余其它属性也同样无效，您可以通过重新定义新的 CSS 样式来实现。

Wyg Playground 演练场

您可以点击 这里 访问 Playground 演练场，在这里您可以实时编辑和预览组件效果，快速测试和调试。

基本使用

图标颜色

使用 color 属性设置图标颜色

WARNING

如果您的图标是多色图标，我们为您图标添加了 multicolor 类名，那么设置 color 属性将不起作用。因为多色图标的颜色是预先定义好的，无法通过 color 属性进行修改。

图标大小

使用 size 属性设置图标大小

图标轮廓的颜色

使用 stroke 属性设置图标轮廓的颜色

TIP

您可以结合 stroke-width 属性来设置图标轮廓的宽度

图标旋转

使用 spin 属性来实现图标旋转。此外，您还可以通过调整 spin-rate 属性来控制旋转速度

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	—

WygIcon Slots

名称	说明
default	自定义默认内容

图标集合

TIP

您可以点击图标复制代码。