图标

通过unocss presetIcons预设，uno-vui提供了unovuiIconsOptions设置。你可以使用任何你想使用的svg图标。在国内推荐直接安装@iconify/json

pnpmyarnnpm

shell

pnpm add @iconify/json -D

shell

yarn add @iconify/json -D

shell

npm install @iconify/json -D

基础用法

使用name属性定义图标名称,必须带上前缀i-,原因。你也可以直接通过class来使用图标

<script setup lang="ts">
const iconList = [
  "i-uim:500px",
  "i-logos:unocss",
  "i-logos:vue",
  "i-logos:visual-studio-code",
  "i-logos:angular-icon",
  "i-logos:react",
  "i-ic:baseline-wechat",
  "i-mdi:github",
  "i-eos-icons:loading"
];
</script>
<template>
  <div class="flex flex-wrap gap-4 text-2xl">
    <u-icon v-for="icon in iconList" :name="icon"></u-icon>
    <div class="i-svg:desktop text-4xl"></div>
  </div>
</template>

图标颜色

你可以使用bg-xxx text-xxx c-xxx来设置任何你想要设置的图标颜色，若果svg不是纯色图标,你也可以通过Modes Overriding的方式来设置图标颜色

<script setup lang="ts">
const iconList = [
  { icon: "i-uim:500px", color: "bg-primary" },
  { icon: "i-logos:unocss?mask", color: "text-accent" },
];
</script>
<template>
  <div class="flex flex-wrap gap-4 text-2xl">
    <u-icon v-for="item in iconList" :name="item.icon" :class="item.color"></u-icon>
    <div class="i-svg:desktop?mask c-warn/50"></div>
  </div>
</template>

图标大小

使用text-xxx来设置图标大小

<script setup lang="ts">
const iconList = [
  { icon: "i-uim:500px", class: "bg-primary text-7xl" },
  { icon: "i-logos:unocss?mask", class: "text-accent text-lg" },
];
</script>
<template>
  <div class="flex flex-wrap gap-4 text-2xl">
    <u-icon v-for="item in iconList" :name="item.icon" :class="item.class"></u-icon>
    <div class="i-svg:desktop?mask c-warn/50 text-50px"></div>
  </div>
</template>

props

名称	类型	默认值	描述
name	`string`	`undefined`	图标名称, 必填

图标 ​

基础用法 ​

图标颜色 ​

图标大小 ​

props ​

图标

基础用法

图标颜色

图标大小

props