@wyg-plus/icons-vue

English | 简体中文

Wyg Plus Icons

• @wyg-plus/icons-svg raw svg files
• @wyg-plus/icons-vue vue components

预览

• wyg-icons 预览

许可证

MIT License © 2024-PRESENT Wyg Plus

使用说明

安装依赖

npm install @wyg-plus/icons-vue

引入

• 一：

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

• 二：

// 引入 WygIcon 组件
import { WygIcon } from '@wyg-plus/icons-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></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="font-size: 60px;color: #41b883;"></span>

<button class="wyg-travel-booking"></button>

<div class="wyg-travel-booking"></div>