指南组件

Icon 图标

用于显示图标的基础组件

sKy
@skiyee
Source 
<template>
  <div class="flex items-center gap-4 p-4">
    <SkIcon name="i-lucide:user" />
    <SkIcon name="i-lucide:star" />
    <SkIcon name="i-lucide:home" />
  </div>
</template>

用法

Name 图标名称

Prop类型默认值描述
namestring-设置图标的名称
<template>
  <div class="flex items-center gap-4 p-4 flex-wrap">
    <SkIcon name="i-lucide:user" />
    <SkIcon name="i-lucide:star" />
    <SkIcon name="i-lucide:home" />
    <SkIcon name="i-lucide:settings" />
    <SkIcon name="i-lucide:search" />
    <SkIcon name="i-lucide:network" />
    <SkIcon name="i-lucide:menu" />
  </div>
</template>

Size 尺寸

图标的尺寸大小需要包含单位，如 px、rpx、rem 等。
Prop类型默认值描述
sizestring-设置图标的尺寸大小 (需含单位)
<template>
  <div class="flex items-center gap-4 p-4">
    <SkIcon name="i-lucide:star" size="48rpx" />
    <SkIcon name="i-lucide:star" size="24px" />
    <SkIcon name="i-lucide:star" size="1.5rem" />
  </div>
</template>

Color 颜色

<template>
  <div class="flex items-center gap-4 p-4">
    <SkIcon name="i-lucide:star" clax="text-current" />
    <SkIcon name="i-lucide:star" clax="text-red" />
    <SkIcon name="i-lucide:star" clax="text-blue" />
    <SkIcon name="i-lucide:star" clax="text-green" />
    <SkIcon name="i-lucide:star" clax="text-[#ff6b35]" />
  </div>
</template>

接口

Props

属性名类型默认值描述
namestring-详见 Name 图标名称
sizestring-详见 Size 尺寸
claxstring-用于拓展当前基础样式

Emits

事件名参数描述
click(event: any)当图标被点击时触发

须知

新增白名单的方式才能支持远程图标，远程图标指的是没有在本地使用过，仅通过远程传递的图标

如果你正在使用 unocss，参考该设置进行图标的白名单化
unocss.config.ts
export default defineConfig({
  safelist: [
    // 你期望的白名单图标，比如: i-carbon:menu
  ]
})