YTUI 2

API ​

Icon ​

NameDescTypeDefault
name图标名称，不需带有 Icon 前缀，全小写。有效的图标名称示例：back \ close。String
size图标尺寸，需带单位。单位建议使用 px。String24px

icons ​

是个包含所有可用图标的对象 { IconBack, IconGo, ... }。

通过该对象能方便地遍历输出所有可用图标，详见文末示例。

Usage ​

两种使用方式。

使用 Icon 图标 ​

通过 Icon 组件 + name 传参使用图标。
name 的值全小写，有效的图标名称示例：go back close。

jsx
import { Icon } from 'ytui'
jsx
<Icon name="back" />

最终输出的图标带有 .yt-icon 默认样式：

html
<!-- 已省略部分内容，仅展示 HTML 结构 -->
<div class="yt-icon">
  <svg></svg>
</div>

自定义 Icon 图标尺寸 ​

可通 Icon 组件的 size 属性自定义图标尺寸：

1.25rem 图标
48px 图标
html
<div class="p-4 rounded-lg bg-[--c-bg]">
  <div class="flex items-center text-[1rem]">
    <Icon name="menu" size="1.25rem" /> 1.25rem 图标
  </div>
  <div class="flex items-center text-[32px]">
    <Icon name="menu" size="48px" /> 48px 图标
  </div>
</div>

使用纯 SVG 图标 ​

可通过 icons 获取最原始的纯 svg 图标。

vue
<script setup>
import { icons } from 'ytui'
const { IconBack } = icons
</script>
<template>
  <IconBack />
</template>

与 Icon 不同，通过 icons 导出的图标最终输出的是 svg 元素：

html
<!-- 已省略部分内容，仅展示 HTML 结构 -->
<svg></svg>

自定义 SVG 图标尺寸 ​

可通过 class 或 style 属性自定义 svg 图标尺寸：

1.25rem 图标
48px 图标
jsx
import { icons } from 'ytui'
const { IconMenu } = icons
html
<div class="p-4 rounded-lg bg-[--c-bg]">
  <div class="flex items-center text-[1rem]">
    <IconMenu class="h-[1.25rem] w-[1.25rem]" /> 1.25rem 图标
  </div>
  <div class="flex items-center text-[32px]">
    <IconMenu style="height: 48px; width: 48px;" /> 48px 图标
  </div>
</div>

图标一览 ​

每个图标根据其意义及使用场景命名。

IconAvatar
IconBack
IconClose
IconCollapse
IconExpand
IconGo
IconMenu
vue
<script setup>
import { Icon, icons } from "ytui"
</script>
<template>
  <div class="mt-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 text-[--c-text-1]">
    <template v-for="(icon, name) in icons">
      <div
        class="aspect-square flex flex-col gap-4 justify-center items-center rounded-lg"
      >
        <Icon :name="name.replace('Icon', '').toLowerCase()" size="64px" />
        {{ name }}
      </div>
    </template>
  </div>
</template>