@wyg-plus/icons-vue

English | 简体中文

Wyg Plus Icons

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

Preview

• wyg-icons Preview

License

MIT License © 2024-PRESENT Wyg Plus

Instructions for use

Install dependencies

npm install @wyg-plus/icons-vue

Introduce

• 一：

// Introduce the component corresponding to the icon name
import { TravelBooking } from '@wyg-plus/icons-vue'

• 二：

// Introducing the WygIcon component
import { WygIcon } from '@wyg-plus/icons-vue'

usage

Usage 1：Use Vue3 built-in special element component

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

Usage 2: Use the icon name to correspond to the component

<TravelBooking color="#41b883" size="20" />

Usage 3: Use in conjunction with wyg-icon

<wyg-icon color="#41b883" size="20" >
  <TravelBooking></TravelBooking>
</wyg-icon>

Usage 4: Use class to define icons, for example: class="wyg-xxx-yyy"

<wyg-icon color="#41b883" :size="20" class="wyg-travel-booking">
  This is using class to define the icon
</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>