图标库

专业级图标库，提供风格统一、灵活定制的矢量资源，赋能团队高效设计与开发。

IconAlarm

IconAll

IconApple

IconArrow

IconBottle

IconCattle

IconChicken

IconCircleError

IconCircleSuccess

IconClose

IconCommodity

IconConfig

IconDelete

IconEggplant

IconEqualizer

IconFile

IconGood

IconHoney

IconLike

IconLoading

IconMelon

IconPic

IconPlus

IconPreview

IconRefresh

IconSearch

IconShare

IconShopping

IconShrimp

IconTime

IconUpload

IconUser

IconWorkbench

IconPreview

IconShopping

图标

这是图标的基础用法

<script setup lang="ts">
import * as icons from '@npc-ui/icons'
</script>

<template>
  <div class="demo">
    <div v-for="(component, name) in icons" :key="name">
      <component :is="component" class="icon" />
      <p>{{ name }}</p>
    </div>
    <div>
      <component :is="icons.IconPreview" type="close" class="icon" />
      <p>IconPreview</p>
    </div>
    <div>
      <component :is="icons.IconShopping" type="fill" class="icon" />
      <p>IconShopping</p>
    </div>
  </div>
</template>

<style scoped>
.demo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-direction: row;
  justify-content: flex-start;
}

.demo > div {
  width: 150px;
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.icon {
  font-size: 48px
}

.demo > div:hover :deep(path) {
  color: #000;
}

.dark .demo > div:hover :deep(path) {
  color: #999;
}
</style>